HTML的语义化标签
以下默认样式如非特别表现的样式，均写为无。 下列样式仅考虑chrome，可能存在和其它浏览器不同的情况
- 结构标签
| 标签 | 语义 |
|---|---|
| < header > | 文档内容头部 |
| < nav > | 导航栏 |
| < main > | 主要内容 |
| < section > | 文档章节或者说是一个内容区域 |
| < article > | 独立的文档内容区域 |
| < aside > | 独立的区块，一般为侧边栏 |
| < footer > | 文档的尾部 |
笔记：
- article标签定义独立的文档内容，它往往具有header、footer等部分，也就是它是一个独立完整的文档。比如，博文、新闻、内嵌页面等。
- aside标签定义独立的区块，它不是独立完整的文档，但是由独立于目前的html文档的其它内容，更多地作为一种补充。比如，侧边栏，客服，广告。
- 文本标签
| 标签 | 语义 | 默认样式 |
|---|---|---|
| < strong > | 表示文本强调 | 加粗 |
| < em > | 表示文本强调 | 斜体 |
| < mark > | 表示文本强调 | 黄色字体 |
| < sub > | 文本标号 | 文本下标 |
| < sup > | 文本标号 | 文本上标 |
| < address > | 联系方式 | 无 |
| < time > | 时间 | 无 |
| < small > | 文本旁注 | 小型文本 |
| < cite > | 文章等引用和参考 | 无 |
| < q > | 语句引用 | 添加双引号 |
| < blockquote > | 长语句引用 | 前后添加换行和边距 |
| < del > | 移除的内容 | 文本有删除线 |
| < ins > | 插入的文本 | 文本有下划线 |
| < code > | 一行代码 | 代码格式不变 |
| < pre > | 多行代码 | 代码格式不变 |
笔记： del和ins标签应该一起使用，以显示更换前后的文本
- 功能标签（含特殊属性和功能的标签）
| 标签 | 语义 | 功能 | 默认样式 |
|---|---|---|---|
| < attr > | 缩写文本 | 缩写文本 | 鼠标覆盖悬浮显示全文本 |
| < a > | 超链接 | 链接跳转 | 蓝字和下划线 |
笔记：
- attr标签使用title定义显示的全文本，标签之间的文本是缩写文本
- a标签使用href定义跳转的链接
- 工具标签
1.表格
| 标签 | 语义 | 默认样式 |
|---|---|---|
| < table > | 表格 | 无 |
| < caption > | 表格标题 | 文本水平居中 |
| < thead > | 表格头部 | 文本垂直水平居中 |
| < tbody > | 表格内容主体 | 文本垂直居中 |
| < tfoot > | 表格尾部 | 文本垂直居中 |
| < tr > | 表格内容行 | 无 |
| < th > | 表格标题单元格 | 粗体 |
| < td > | 表格单元格 | 无 |
笔记：
- 表格结构
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
th、tr、td可以是多个。
- 使用单元格的colspan、rowspan属性可以实现跨行和跨列。
2.表单
| 标签 | 类型 | 语义 | 默认样式 |
|---|---|---|---|
| < form > | 表单 | 无 | |
| < fieldset > | 表单组合域 | ||
| < legend > | 表单组合域的标题 | ||
| < label > | 标记 | 无 | |
| < input > | text | 单行文本输入框 | 聚焦高亮，下同 |
| 地址输入框 | |||
| password | 密码输入框 | 输入文本变圆圈 | |
| search | 搜索输入框 | 浏览器差异 | |
| tel | 电话号码输入框 | ||
| url | url输入框 | ||
| button | 普通按钮 | ||
| submit | 提交按钮 | ||
| reset | 重置按钮 | ||
| image | 图片按钮 | ||
| file | 文件选择器 | ||
| radio | 单选框 | 可选圆点 | |
| checkbox | 复选框 | 可选方框 | |
| number | 数字输入框 | ||
| range | 滑块 | 滑块条 | |
| datetime-local | 日期时间选择器 | 年月日+时间 | |
| date | 日期选择器 | 年月日 | |
| month | 月选择器 | 月 | |
| time | 时间选择器 | 时间 | |
| week | 周选择器 | 周 | |
| color | 拾色器 | 拾色面板 | |
| hidden | 隐藏内容 | 不可见 | |
| < textarea > | 多行文本框 | ||
| < button > | button(或不写) | 普通按钮 | |
| submit | 提交按钮 | ||
| reset | 重置按钮 | ||
| < select > | 下拉框 | ||
| < datalist > | 菜单列表 | 下拉菜单列表 | |
| < option > | 选项 | ||
| < progress > | 进度条 | 单一色进度条 | |
| < meter > | 仪表 | 状态进度条 |
笔记：
- 表单元素兼容性查看 H5表单元素当前状态
- label标签用于标记其它表单元素，多与input联用，使用for和关联的input的id对应。组合方式一般是:
<label for="form-el1-id">标记：<input id="form-el1-id" /></label>
<label for="form-el2-id">标记：</label><input id="form-el2-id" />
- form的action属性确定提交路径，method属性确定提交方式（GET和POST）
- 表单元素使用name属性绑定提交时的字段，使用value属性绑定对应的值
- 文本域(input作为输入框和textarea)时，使用placeholder添加提示文本
- input、select和textarea元素都有required属性，表示必须填写字段
- 表单元素都有disaled属性，input（输入框时）和textarea有readonly属性。前者表示不可用，不提交；后者表示只读，值不可更改，提交。
- input文本域（输入框）具有pattern属性，用于使用正则表达式校验文本。
3.多媒体和嵌入元素
| 标签 | 语义 |
|---|---|
| < figure > | 独立流内容区域（一般指插图） |
| < figcaption > | figure的标题 |
| < img > | 图片 |
| < audio > | 音频 |
| < video > | 视频 |
| < track > | 歌词或字幕 |
| < iframe > | 内嵌网页 |
| < embed > | 嵌入多媒体（一般是falsh） |
| < object > | 嵌入多媒体（一般是pdf） |
| < param > | object标签的参数 |
笔记：
- track标签兼容性不太好；在移动端，屏幕放大可能会消失。
- video和audio标签都有autoplay、controls、loop、muted、preload、src属性。其中，前四者是绝对真值，不需要赋值，只要出现就表示应用该属性；preload设置载入情况、src是媒体路径
4.列表
| 标签 | 语义 | 默认样式 |
|---|---|---|
| < ul > | 无序列表 | |
| < ol > | 有序列表 | |
| < li > | 列表项 | 由列表的type决定 |
| < dl > | 定义列表 | |
| < dt > | 定义列表标题 | |
| < dd > | 定义列表的解释 | margin-start为40px |
笔记
- ul和ol的列表项都是li，li的样式可以由ul和ol的type属性决定。
- dl是定义列表，用于给某个事物下定义，它的结构如下:
<dl>
<dt>自然数</dt>
<dd>零到无穷大之间的整数，包括零。</dd>
</dl>