目录
一、列表标签
（应用场景、无序、有序、自定义列表）
1）列表的应用场景（内容规整的区域）
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
2）无序列表
显示特点：列表每一项前默认显示圆点标识
注意：ul标签中只允许包含li标签
li标签可以包含任意内容
| 标签名 | 说明 |
| ul（unordered list） | 表示无序列表的整体 用于包裹li标签 |
| li | 表示无序列表的每一项 用于包裹每一行的内容 |
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>3）有序列表
显示特点：列表每一项前默认显示序号标识
注意：ol标签中只允许包含li标签
li标签可以包含任意内容
| 标签名 | 说明 |
| ol（ordered list） | 表示有序列表的整体 用于包裹li标签 |
| li | 表示无序列表的每一项 用于包裹每一行的内容 |
<ol>
<li>喜羊羊 100分</li>
<li>美羊羊 80分</li>
<li>沸羊羊 75分</li>
<li>懒羊羊 60分</li>
</ol>4）自定义列表
显示特点：dd前会默认显示缩进效果
注意：dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
| 标签名 | 说明 |
| dl（definition list） | 表示自定义列表的整体 用于包裹dl/dd标签 |
| dt（definition title） | 表示自定义列表的主题 |
| dd（definition details） | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
二、表格标签
1）表格基本标签
| 标签名 | 说明 |
| table | 表格整体 可用于包裹多个tr |
| tr（table rows） | 表格每行 可用于包裹td |
| td（table details） | 表格单元格 可用于包裹内容 |
2）表格相关属性
（属性写在table上）（实际开发中 样式效果推荐css设置）
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
<table border="2" width="500">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>美羊羊</td>
<td>100分</td>
<td>美丽</td>
</tr>
<tr>
<td>喜羊羊</td>
<td>100分</td>
<td>聪明</td>
</tr>
</table>3）表格标题和表头单元格标签
（表示整体大标题和一列小标题（属性））
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题 默认在表格整体顶部居中显示 |
| th（table header） | 表头单元格 | 表示一列小标题 通常用于表格第一行 默认加粗居中显示 |
caption标签在table内部
th标签在tr内部（用于替换td标签）
<table border="1">
<caption>成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>美羊羊</td>
<td>100分</td>
<td>美丽</td>
</tr>
</table>4）表格结构标签（了解）
（为了方便浏览器阅读，提高执行效率）
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
5）合并单元格
左上原则
· 上下合并 保留最上的 删除其他（手动删除）
· 左右合并 保留最左的 删除其他（手动删除）
| 属性名 | 属性值 | 说明 |
| rowspan(跨行合并) | 合并单元格的个数 | 多行单元格垂直合并 |
| colspan(跨列合并) | 合并单元格的个数 | 多列单元格水平合并 |
（只有同一个标签结构中的单元格才能合并 不能跨结构合并（不能跨thead、tbody、tfoot））
<table border="2" >
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>美羊羊</td>
<td rowspan="2">100分</td>
<td>美丽</td>
</tr>
<tr>
<td>喜羊羊</td>
<td>聪明</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">优秀</td>
</tr>
</table>三、表单标签
（用于 登录页面 注册页面 搜索页面）
1）input标签
（input可以通过type属性值的不同 展示不同效果）
| 标签名 | type属性值 | 说明 |
| input | text | 文本框 输入单行文本 |
| password | 密码框 输入密码 | |
| radio | 单选框 多选一 | |
| checkbox | 多选框 多选多 | |
| file | 文件选择 用于之后上传文件 |
text常用属性
| placeholder | 占位符 提示用户输入内容的文本 |
账号：<input type="text" placeholder="手机号/邮箱/用户名">
<br>
密码：<input type="password" placeholder="密码">
<br>radio常用属性
| name | 分组 有相同name属性值的单选框为一组 一组中同时只能有一个被选中 |
| checked | 默认选中（若不做选择 默认选择一个选项） |
（不使用name分组 会出现可以多选的情况）
性别：<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女file常用属性
| multiple | 多文件选择 |
<input type="file" multiple>type常用属性
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮 点击后提交数据给后端服务器 |
| reset | 重置按钮 点击后回复表单默认值 | |
| button | 普通按钮 默认无功能 配合js添加功能 |
1. value标签 加名称/改名称
2. 如需实现以上按钮功能 需配合form标签（表单域）使用
<form action=""></form>（action:提交地址）
form使用方法：用form标签把表单标签一起包裹起来即可
<form action="">
账号：<input type="text" placeholder="手机号/用户名/邮箱">
<br><br>
密码：<input type="password" placeholder="密码">
<br><br>
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="按钮">
</form>2）button标签（同input）
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮 点击后提交数据给后端服务器 |
| reset | 重置按钮 点击后回复表单默认值 | |
| button | 普通按钮 默认无功能 配合js添加功能 |
1. 谷歌中button默认是提交按钮
2. button标签是双标签，更易于包裹其他内容：文字、图片等
3）select下拉菜单标签
常见属性：
select:下拉菜单的整体
option:下拉菜单的每一项
selected:下拉菜单的默认选中
<select>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option selected>江苏</option>
</select>4）textarea文本域标签
（在网页中提供可输入多行文本的表单控件）
常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意：
右下角可以拖拽改变大小
实际开发时针对样式效果推荐用CSS设置
<textarea cols="30" rows="10"></textarea>5）label标签
（绑定内容于表单标签的关系 如选择性别单选时 点击女和点击单选框效果相同）
使用方法1：
· 用label标签把内容（如 文本）包裹起来
· 在表单上添加id属性
· 在label标签的for属性中设置对应的id属性值
使用方法2：
· 直接用label标签把内容（如 文本）和表单标签一起包裹起来
· 需要把label标签的for属性删除即可
<!-- 使用方法1 -->
性别： <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<!-- 使用方法2 -->
<label> <input type="radio" name="sex">女</label>四、语义化标签
1）没有语义的布局标签（div、span）
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
2）有语义的布局标签（了解）
（做手机端网页要用到）
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意：以上标签显示特点和div一致，但比div多了不同的语义
五、字符实体
（能通过字符实体在网页中显示特殊符号） （主记空格）
4498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
