一、列表标签
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜账单等。
特点：按照行的方式，整齐显示内容。
种类：无序列表；有序列表；自定义列表
1、无序列表
场景：在网页表示一组无顺序之分的列表，如：新闻列表
标签组成：
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示圆点标识
【注：ul标签中只允许包含li 标签；li标签可以包含任意内容】
<ul> <li></li> </ul><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>水果列表</h1>
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
</body>
</html> 
2、有序列表
场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示序号标识
【注：ol标签中只允许包含li 标签；li标签可以包含任意内容】
<ol> <li></li> </ol><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>成绩排行榜</h1>
<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项 -->
<ol>
<li>小姐姐：100分</li>
<li>小帅哥：80分</li>
<li>小可爱：60分</li>
</ol>
</body>
</html> 
3、自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt\dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果
【注：dl标签中只允许包含dt\dd标签；dt\dd标签可包含任意内容】
<dl>
<dt> </dt>
<dd> </dd>
</dl><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- dl表示自定义列表的整体 -->
<!-- dt表示自定义列表的主题 -->
<!-- dd表示自定义列表中的每一项解释说明 -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html> 
无序列表最常用，有序列表偶尔用，自定义列表底部导航用
二、表格标签
1、基本标签
场景：在网页中以行+列的单元格的方式整齐展示和数据；如：学生数据
基本标签：
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
【注：标签的嵌套关系：table>tr>td】
2、相关属性
场景：设置表格基本展示效果
常见相关属性：（设置在table标签里面）
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
【注：实际开发时针对样式效果推荐使用CSS设置】
3、表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
其他标题：
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格的第一行，默认内部文字加粗并居中显示 |
【注：caption标签写在table标签内部；th标签书写在tr标签内部（用于替换td标签——直接把td换成th）】
4、表格的结构标签
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
【注：表格结构标签内部用于包裹tr标签；表格的结构标签可省略】
5、合并单元格
场景：将水平或垂直多个单元格合并成一个单元格
步骤：
- 明确合并哪几个单元格；
- 通过左上原则，确保保留谁删除谁{上下合并——只保留最上的，删除其他；左右合并——只保留最左的，删除其他}
- 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
【注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead|tbody|tfoot）】属性名 属性值 说明 rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并 colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table表示表格标签的整体 --> <!-- tr表示表格标签的每一行 --> <!-- td表示表格标签的单元格 --> <!-- border：表格的边框 --> <!-- width：表格的宽度 --> <!-- heihgt:表格的高度 --> <!-- caption：表格整体的大表题 --> <!-- th：表头单元格，表格一列小标题 --> <!-- thead:表格的头部 --> <!-- tbody:表格的主体 --> <!-- tfoot：表格的底部 --> <table border="1" width="300" height="300"> <caption><h3>学生成绩单</h3></caption> <!-- 表格的头部 --> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <!--表格的主体--> <tbody> <tr> <td>小哥哥</td> <!-- 保留 --> <td rowspan="2">100分</td> <td>小哥哥真帅气</td> </tr> <tr> <td>小姐姐</td> <!-- 删除 --> <!-- <td>100分</td> --> <td>小姐姐真漂亮</td> </tr> </tbody> <!-- 表格的底部 --> <tfoot> <tr> <td>总结</td> <!-- 保留 --> <td colspan="2">郎才女貌</td> <!-- 删除 --> <!-- <td>郎才女貌</td> --> </tr> </tfoot> </table> </body> </html>
三、表单标签
1、input标签
场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页
标签名：input【input标签可以通过type属性值的不同,展示不同效果】
type属性值：
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- input标签可以通过type属性值的不同展现出不同效果 -->
<!-- 1、文本框：text (type属性的默认值)-->
昵称：<input type="text"><br><br>
<!-- 2\密码框：password -->
密码：<input type="password"><br><br>
<!-- 3、单选框：radio -->
性别：<input type="radio">男 <br><br>
<!-- 4、多选框：checkbox -->
爱好：<input type="checkbox">敲代码 <br><br>
<!-- 5、文件选择框：file -->
<input type="file">
</body>
</html>
input系列标签：
文本框：
场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：（后端收到的数据格式是：name的属性值=value的属性值）
| 属性名 | 说明 |
| placeholder | 占位符，提示用户输入内容的文本 |
| value | 用户输入的内容，提交之后会发送给后端服务器 |
| name | 当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义 |
密码框：
场景：在网页中显示输入密码的表单控件
type属性值：password
常用属性：
| 属性名 | 说明 |
| placeholder | 占位符，提示用户输入内容的文本 |
| value | 用户输入的内容，提交之后会发送给后端服务器 |
| name | 当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义 |
【注：type属性值不要拼错或多加空格，否则相当于设置了默认值状态：text文本框】
单选框：
场景：在网页中显示多选一表单控件
type属性值：radio
常用属性：
| 属性名 | 说明 |
| name | 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
【注：name属性对于单选框有分组功能；有相同name属性值的单选框为一组，一组中同时只能有一个被选中】
复选框：
场景：在网页中显示多选多的多选表单控件
type属性值：checkbox
常用属性：同单选框，checked
文件选择：
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
| 属性名 | 说明 |
| multiple | 多文件选择 |
按钮：
场景：在网页中显示不同功能的按钮表单控件
常用属性：submit（提交）；reset（重置）；button（普通）
【注：如果需要实现以上按钮功能，需要配合form标签使用；form使用方法：用form标签把表单一起包裹起来即可】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- 1、文本框：text (type属性的默认值)-->
昵称：<input type="text" placeholder="请输入您的昵称"
value="" name="nickname"><br><br>
<!-- 2、密码框：password -->
密码：<input type="password" placeholder="请设置您的密码"><br><br>
<!-- 3、单选框：radio -->
性别： <input type="radio" name="sex">男
<input type="radio" name="sex" checked>女<br><br>
<!-- 4、多选框：checkbox -->
爱好： <input type="checkbox" >敲代码
<input type="checkbox">熬夜
<input type="checkbox" checked>看三小只<br><br>
<!-- 5、文件选择：file-->
<input type="file" multiple><br><br>
<!-- 6、按钮 -->
<!-- submit:提交按钮 -->
<input type="submit">
<!-- reset:重置按钮 -->
<input type="reset">
<!-- button:普通按钮 -->
<input type="button" value="普通按钮">
</form>
</body>
</html>
2、按钮标签（button）
场景：在网页中显示用户点击的按钮
标签名：button
type属性值：同input的按钮系列
【注：谷歌浏览器中的button默认浏览器是提交按钮；button标签是双标签，更便于包裹其他内容，如：文字、图片等】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
昵称：<input type="text" placeholder="请输入您的昵称"
value="" name="nickname"><br><br>
<!-- 1、提交按钮：submit -->
<button type="submit"> button提交按钮</button>
<!-- 2、重置按钮:reset -->
<button type="reset">button重置按钮</button>
<!-- 3、普通按钮:button -->
<button type="button">button普通按钮</button>
</form>
</body>
</html>
3、select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
| select标签 | 下拉菜单的整体 |
| option | 下拉菜单的每一项 |
常见属性：selected：下拉菜单的默认选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 下拉菜单 -->
<!-- select标签：表示下拉菜单的整体 -->
<!-- option标签：表示下拉菜单的每一项 -->
所在城市：
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option selected>重庆</option>
</select>
</body>
</html>
4、textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
| cols | 规定了文本域内可见宽度 |
| rows | 规定了文本域内可见行数 |
【注：右下角可拖拽改变大小；实际开发时针对样式效果推荐使用CSS设置】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 文本域标签 -->
<textarea cols="30" rows="10"></textarea>
</body>
</html> 
5、label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
方法一：
- 使用label标签把内容（如：文本）包裹起来；
- 在表单标签上添加id属性；
- 在label标签的for属性中设置对应的id属性值
方法二：
- 直接使用label标签把内容（如：文本和表单标签一起包裹起来）；
- 需要把label标签的for属性删除即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
爱好：
<!-- 第一种 -->
<input type="checkbox" id="three"><label for="three">TFBOYS</label>
<!-- 第二种 -->
<label> <input type="checkbox">我家啵啵</label>
</body>
</html>
扫一扫
2604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
