前端笔记-day02

文章目录

    • 01-无序列表
    • 02-有序列表
    • 03-定义列表
    • 04-表格
    • 06-表格-合并单元格
    • 07-表单-input
    • 08-表单-input占位文本
    • 09-表单-单选框
    • 10-表单-上传多个文件
    • 11-表单-多选框
    • 12-表单-下拉菜单
    • 13-表单-文本域
    • 14-表单-label标签
    • 15-表单-按钮
    • 16-无语义-span和div
    • 17-字体实体
    • 19-注册登录页面

01-无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表条目</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    
    </ul>
</body>
</html>

02-有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Ol>
        <li>liebiao1</li>
        <li>2</li>
        <li>3</li>
    </Ol>
</body>
</html>

03-定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>服务中心</dt>
        <dd>shenqing</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>申请售后</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dd>5</dd>

        <dt>服务中心</dt>
        <dd>shenqing</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>申请售后</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dd>5</dd>
    </dl>
</body>
</html>

04-表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table  table row    table head    table data -->
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
    
            </tr>
    
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
                
            </tr>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

06-表格-合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table  table row    table head    table data -->
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
    
            </tr>
    
            <tr>
                <td>张三</td>
                <td>11</td>
                <!-- 跨行合并 -->
                <td rowspan="2">22</td>
                <td>55</td>
                
            </tr>
            <tr>
                <td>张三</td>
                <td>11</td>
                <!-- <td>22</td> -->
                <td>55</td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 -->
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td> -->
                <!-- <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

07-表单-input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框：<input type="text"><br><br>
    密码框：<input type="password"><br><br>
    单选框：<input type="radio"><br><br>
    多选框：<input type="checkbox"><br><br>
    上传文件：<input type="file">
</body>
</html>

08-表单-input占位文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框：<input type="text" placeholder="用户名"><br><br>
    密码框: <input type="password" placeholder="密码"><br><br>

</body>
</html>

09-表单-单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女
</body>
</html>

10-表单-上传多个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    上传文件：<input type="file" multiple>
</body>
</html>

11-表单-多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    兴趣爱好：
    <input type="checkbox">敲代码
    <input type="checkbox" checked>敲前端代码
    <input type="checkbox" checked>敲前端HTML代码
</body>
</html>

12-表单-下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    城市：
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <!-- 默认选中   selected -->
        <option value="" selected>广州</option>
    </select>
</body>
</html>

13-表单-文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 右下角有拖拽功能未来进化掉 -->
    <textarea >请输入文字</textarea>
</body>
</html>

14-表单-label标签

点击旁边的也能选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 方法一 -->
    <label >
        <input type="radio">女
    </label>
    <input type="radio">男

<br>
<br>

    性别:
    <input type="radio" id="man"><label for="man">男</label>

</body>
</html>

15-表单-按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- form是表单区域 -->
    <!-- actions=“”是发送数据的地址 -->
    <form action="">
        用户名：<input type="text"><br><br>
        密码：<input type="password"><br><br>
        <button type="submit">提交</button>
        <!-- 去掉submit 默认依然是submit功能 -->
        <button>提交</button>
        <button type="reset">重置</button>
        <!-- button是以后配合javascript使用 -->
        <button type="button">普通按钮</button>
    </form>
</body>
</html>

16-无语义-span和div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是div</div>
    <div>这是div</div>

    <span>这是span</span>
    <span>这是span</span>
</body>
</html>

17-字体实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    乾坤未定，你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。
    &lt;p&gt;
</body>
</html>

19-注册登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <h2>个人信心</h2>
        姓名：<input type="text" placeholder="请输入真实姓名"><br><br>
        密码：<input type="password" placeholder="请输入密码"><br><br>
        确认密码：<input type="password" placeholder="请输入确认密码"><br><br>
        性别：<input type="radio" name="gender">男
              <input type="radio" name="gender">女
        <br><br>
        居住城市：
        <select >
            <option >北京</option>
            <option value="" selected>上海</option>
        </select>
        <br><br>
        <h2>教育经历</h2>
        最高学历：
        <select name="" id="">
            <option value="">博士</option>
            <option value="">硕士</option>
            <option value="">本科</option>
            <option value="">专科</option>
        </select><br><br>
    
        学校名称：<input type="text"><br><br>
        所学专业：<input type="text"><br><br>
        在校时间：
        <select name="" id="">
            <option value="">2015</option>
            <option value="">2016</option>
        </select>
        --
        <select name="" id="">
            <option value="">2017</option>
            <option value="">2018</option>
        </select><br><br>
    
        <h2>工作经历</h2>
        公司名称：<input type="text"><br><br>
        工作描述：<br>
        <textarea ></textarea><br><br>
    
        <input type="checkbox">已阅读并同意一下条约
        <ul>
            <li><ins><a href="#">《用户服务协议》</a></ins></li>
            <li><ins><a href="#">《隐私政策》</a></ins></li>
        </ul>
        <button type="submit">免费注册</button>
        <button type="reset">重新填写</button>
    
    </form>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/614155.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

分布式与一致性协议之一致哈希算法(二)

分布式与一致性协议之一致哈希算法(二)

一致哈希算法 使用哈希算法有什么问题 通过哈希算法&#xff0c;每个key都可以寻址到对应的服务器&#xff0c;比如&#xff0c;查询key是key-01,计算公式为hash(key-01)%3,警告过计算寻址到了编号为1的服务器节点A&#xff0c;如图所示。 但如果服务器数量发生变化&#x…
阅读更多...
嵌入式人工智能是一个怎样的概念呢？

嵌入式人工智能是一个怎样的概念呢？

嵌入式人工智能将会是未来几年人工智能发展的主要方向之一&#xff0c;并且会伴随着一系列的职位和角色的出现。虽然目前还没有嵌入式人工智能的确切定义&#xff0c;但随着人工智能的不断发展&#xff0c;它势必会延伸到边缘、终端和嵌入式市场。 嵌入式人工智能具有速度快、功…
阅读更多...
NSSCTF | [SWPUCTF 2021 新生赛]jicao

NSSCTF | [SWPUCTF 2021 新生赛]jicao

打开题目&#xff0c;发现高亮显示了一个 php 脚本 这是脚本的内容 <?php highlight_file(index.php); include("flag.php"); $id$_POST[id]; $jsonjson_decode($_GET[json],true); if ($id"wllmNB"&&$json[x]"wllm") {echo $flag;…
阅读更多...
共享旅游卡免费旅游真实反馈，有图有真相？

共享旅游卡免费旅游真实反馈，有图有真相？

新伙伴体验&#xff0c;云南昆大丽6天5晚品质双人游&#xff0c;真实反馈&#xff01;珠海伙伴蔡总&#xff0c;加入千益畅行共享旅游卡团队&#xff0c;自己亲自体验“云南昆大丽6天5晚品质双人游”真实反馈&#xff0c;分享全程内容截图&#xff0c;无半点虚假&#xff01; …
阅读更多...
uniapp——点赞、取消点赞

uniapp——点赞、取消点赞

案例 更新点赞状态&#xff0c;而不是每次都刷新整个列表。避免页面闪烁&#xff0c;提升用户体验 代码 <view class"funcBtn zan" click"onZan(index,item.id)"><image src"/static/images/circle/zan.png" mode"aspectFill&…
阅读更多...
C# WinForm —— 15 DateTimePicker 介绍

C# WinForm —— 15 DateTimePicker 介绍

1. 简介 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 dtp 开头Format设置显示时间的格式&#xff0c;包含Long&#xff1a; Short&#xff1a; Time&#xff1a; Custom&#xff1a;采用标准的时间格式 还是 自定义的格式CustomFormat自定…
阅读更多...
干货教程【AI篇】| 目前全球最强AI换脸工具swapface详细图文教程及整合包下载

干货教程【AI篇】| 目前全球最强AI换脸工具swapface详细图文教程及整合包下载

需要这个工具整合包的小伙伴可以关注一下文章底部公众号&#xff0c;回复关键词【swapface】即可获取。 从我们的链接下载&#xff0c;得到这个exe文件 双击运行即可进入安装界面 如下图所示已经在安装中啦 安装好之后我们根据上面的安装路径找到要执行的文件 双击红框中的…
阅读更多...
【VTKExamples::Rendering】第五期 环形阵列Rotations

【VTKExamples::Rendering】第五期 环形阵列Rotations

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ：870202403 公众号：VTK忠粉 前言 本文分享VTK样例环形阵列Rotations，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！ 你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ 1. Rotations
阅读更多...
OIDC 与 OAuth2.0学习

OIDC 与 OAuth2.0学习

OpenID Connect (OIDC) 和 OAuth 2.0 是两种不同的协议&#xff0c;它们通常一起使用&#xff0c;但服务于不同的目的。下面是它们的 主要区别和联系&#xff1a; OAuth 2.0 OAuth 2.0 是一个授权框架&#xff0c;它允许第三方应用代表用户获取对服务器资源的有限访问权限。…
阅读更多...
PHP高级教程

PHP高级教程

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;PHP &#x1f4da;参考教程&#xff1a;菜鸟\编程网❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、PHP 多维数组 二、PHP date&#xff08;&#…
阅读更多...
进程间通信（一）

进程间通信（一）

IPC 在之前我们也有涉及到进程间通信的知识点&#xff0c;比如fork或exec或父进程读取子进程的退出码等&#xff0c;但是这种通信方式很有限&#xff0c;今天来学习进程间通信的其他技术——IPC&#xff08;InterProcess Communication&#xff09;。 IPC的方式通常有管道&…
阅读更多...
【比邻智选】MF871U模组

【比邻智选】MF871U模组

&#x1f680;搭载国产芯&#xff0c;严苛测试&#xff0c;稳定可靠 &#x1f6e0;️R16特性加持&#xff0c;5G LAN&#xff0c;纳秒级精度 &#x1f310;超低成本&#xff0c;丰富协议&#xff0c;连接无界限
阅读更多...
linux安装配置Docker保姆级教程

linux安装配置Docker保姆级教程

Docker到底是什么? Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。 容器是完全使用沙箱机制&#xff0c;相互之间…
阅读更多...
[AutoSar]lauterbach_001_ORTI_CPUload_Trace

[AutoSar]lauterbach_001_ORTI_CPUload_Trace

目录 关键词平台说明一、ORTI概述二、ORTI文件的生成三、ORTI文件的导入四、Trace 功能4.1 Trace 功能菜单介绍4.2 Trace功能的配置4.3 Trace MCDS 设置4.4 Task Switches断点的设置4.5 Trace 数据的录取4.6 CPU 负载和Task调度的查看 关键词 嵌入式、C语言、autosar、OS、BSW…
阅读更多...
智慧公厕建设，打造智慧城市基础设施新亮点

智慧公厕建设，打造智慧城市基础设施新亮点

公共厕所是城市基础设施的重要组成部分&#xff0c;而智慧公厕的建设则是现代城市管理的创新之举。为了实现公厕的精细化管理和提供更便捷的服务&#xff0c;推进智慧公厕建设必须要实现技术融合、业务融合、数据融合的目标&#xff0c;跨越层级、地域、系统、部门和业务的限制…
阅读更多...
LabVIEW的MEMS电容式压力传感器测试系统

LabVIEW的MEMS电容式压力传感器测试系统

LabVIEW的MEMS电容式压力传感器测试系统 针对传统微惯性测量单元(MIMU)标定方法存在的过程繁琐、标定周期长及设备复杂等问题&#xff0c;提出了一种基于LabVIEW软件的MIMU误差参数快速标定方法。通过软件上位机控制小型三轴转台&#xff0c;配合卡尔曼滤波器技术&#xff0c;…
阅读更多...
Linux进程间通信 pipe 实现线程池 命名管道 实现打印日志 共享内存代码验证 消息队列 信号量

Linux进程间通信 pipe 实现线程池 命名管道 实现打印日志 共享内存代码验证 消息队列 信号量

文章目录 前言管道匿名管道 pipe测试管道接口 --> 代码验证管道的4种情况管道的5种特征 线程池案例代码实现&#xff1a;ProcessPool.ccTask.hpp检测脚本makefile 命名管道代码演示&#xff1a;makefilenamedPipe.hppserver.ccclient.cc 实现日志Log.hpp 共享内存共享内存原…
阅读更多...
机器人系统仿真

机器人系统仿真

0、何为仿真 通过计算机对实体机器人系统进行模拟的技术。 1、为何仿真 低成本&#xff1a; 机器人实体一般价格昂贵&#xff0c;为降低机器人学习、调试的成本&#xff1b;高效&#xff1a; 搭建的环境更为多样且灵活&#xff0c;可以提高测试效率以及测试覆盖率&#xff1b…
阅读更多...
1.基于python的单细胞数据预处理-降维可视化

1.基于python的单细胞数据预处理-降维可视化

目录 降维的背景PCAt-sneUMAP检查质量控制中的指标 参考&#xff1a; [1] https://github.com/Starlitnightly/single_cell_tutorial [2] https://github.com/theislab/single-cell-best-practices 降维的背景 虽然特征选择已经减少了维数&#xff0c;但为了可视化&#xff0…
阅读更多...
pikachu靶场-全套学习

pikachu靶场-全套学习

文章目录 配置pikachu靶场浏览器访问过程burpsuite配置代理hackbar安装使用kali安装中国蚁剑暴力破解cookie简化场景解释各部分含义如何工作 基于表单的暴力破解验证码绕过(On server)验证码绕过(on client)token防爆破? XSS&#xff08;Cross-Site Scripting跨站脚本攻击 &am…
阅读更多...
最新文章

Copyright @ 2022~2023