html5标签总结

目标：统计html5的标签，根据应用场景进行划分

PS：“标签”用于给”内容”打上”标记”，告诉浏览器”内容”是什么，怎么去解析”内容”，标签还可以引用资源嵌入文档……
PS：“标签属性”用于修饰标签和”内容”，告诉浏览器关于标签和”内容”的额外信息，更进一步告诉浏览器怎么解析标签和”内容”，表单标签、表格标签、a标签…这些标签的独有标签属性比较多，而其他标签例如大部分的文档标签、文本标签除了一些全局的标签属性（例如：id、title、class），独有的标签基本没有
PS：标签属性：全局、部分标签拥有的、某个标签独有的

一、划分标签(下面统计的有102个)
1、用于结构：文档元素、分组元素
2、用于包裹内容：文本标签、表格标签、表单标签
3、用于引入资源、向页面嵌入内容：嵌入标签(不一定是单标签)
4、文档必备标签

二、文档标签(16个)
h1~h6 标题
header 一个相对独立内容的头部
footer 一个相对独立内容的尾部
nav 一组导航元素
section 一组相关的内容
article 一段独立的内容
address 表示文档或article的联系信息
aside 表示与主体不怎么相关的内容
hgroup 一组标题
details 生成一个区域，点击可 收/放 ,最好配合summary使用
summary 用在details元素中，设置标题

三、分组标签(12个)
p 表示段落
div 一个没有任何语义的通用元素，和span是对应元素，h5的文档标签可以算是div语义化之后的标签
pre 标签之间的内容格式将被保留
blockquote 表示引自他出的大段内容
hr 水平线，语义上表示段落级别的主体转换
ul，ol 无序列表、有序列表，需要配合li使用
li 列表项，ul、ol的子标签
dl、dt、dd dt 在 dl 内部表示术语，一般充当标题；dd 在 dl 内部表示定义，一般是内容。
figure 表示图片，配合img、figcaption使用
figcaption 表示figure元素的标题

四、文本标签(28个)
1、a 生成超链接
2、span 通用元素，没有任何语义，和div对应，一个默认块级一个默认行内，如果不追求语义化，span标签可以完成大部分文本标签的效果
PS：以上两个元素，再加上p元素基本可以达到标记文本内容的需要，不过语义化标签更能明确内容的含义

3、time 表示时间和日期
4、u 标记一段文字但不强调
5、sup 表示上标字体
6、sub 表示下标字体
7、small 表示小号字体内容
8、bdo 控制文字的方向
9、ruby 表示位于表意文字上方或右方的注音符号
10、rt 与 ruby 元素结合使用，标记括号
11、rp 与 ruby 元素结合使用，标记括号
12、q 表示引自他处的内容
13、mark 表示与另一段上下文有关的内容
14、dfn 表示术语定义
15、s 表示文字已不再确认
16、del 表示被删除的文字
17、cite 表示其他作品的标题
18、abbr 表示缩写
19、kdb 表示用户输入
20、samp 表示变量
21、var 表示程序输出
22、code 表示计算机代码
23、em 表示强调
24、i 表示外文或科学术语
25、strong 表示重要
26、b 标记一段文字但不强调
27、wbr 可安全换行
28、br 强制换行

五、表格标签(10个)
1、table 定义一个表格，表格标签都要放在该标签里
2、thead+th thead定义一个表格头，th定义表格头中的单元格，th需要被tr包裹
3、tbody 定义表格的主体内容
4、tfoot 定义表格的尾部
5、tr 定义表格的行
6、td 定义表格的单元格，和th类似，单元格标签必须在tr标签中
7、col 纵向一列
8、colgroup 一组纵向列
9、caption 表格的标题

六、表单标签(12个)
1、form 表示HTML表单
2、input 表示用来收集用户输入数据的控件，通过设置type属性的不同属性值获取不同功能的控件
3、label 可以通过for属性绑定表单中其它控件，解释其他控件用途
4、select、option、optgroup 表单下拉框组合
5、textarea 表示可以输入多行文本的控件
6、datalist 定义一组提供给用户的建议值
7、fieldset、legend 对表单中的控件分组
8、output 表示计算结果
9、button 按钮，可以通过设置type值获取重置、提交、普通按钮这三种功能的按钮，这些功能的控件都可以通过input获取

七、嵌入标签(15个)
1、img 嵌入图片
2、map+area 创建分区响应图，需要配合img标签使用
3、iframe 嵌入另一个文档
4、embed 用于扩展浏览器的功能，大部分用于添加对插件的支持。
5、object+ param 该标签和embed标签一样，只不过object是html4的标准，而 embed是html5的标准。而object不但可以嵌入插件，还可以嵌入图片等其他内容。
6、progress 该标签可以显示一个进度条，一般通过 JS 控制内部的值。
7、meter 显示某个范围内的值
8、audio 嵌入音频，最好配合source标签使用
9、video 嵌入视频，最好配合source标签使用
10、canvas 生成一个动态的图形画布
11、svg 结构化矢量内容
12、source 引用各种媒体资源
13、track 表示媒体的附加轨道，例如字幕

八、文档必备标签：定义文档类型的!DOCTYPE、html、head、meta、title、body、script、link、注释