HTML5标签语义化
为什么标签要语义化
- 搜索引擎友好。
- 更容易让屏幕阅读器读出网页内容。
- 去掉或样式丢失的时候能让页面呈现清晰的结构。
- 便于团队开发和维护。
应注意的问题
HTML5元素标签
一、结构标签
- article（标识文章）：表示文档、页面中独立完整的可以被外部引用的内容；
- section（给内容分段）：用于对网站或者应用程序中页面上的内容进行分块，一个 section 元素通常由内容以及标题组成；
- aside（设计辅助信息）：表示当前页面或文章的附属信息部分；
- header（添加标题块）：某个区块的头部信息/标题，header元素往往在一对 body 元素之中；
- hgroup（给标题分组）：可以为标题或者子标题进行分组；
- footer（添加脚注块）：通常会在这里标出网站的一些相关信息；
- nav（设计导航信息）：导航条部分信息，一个可以用作页面导航的链接组；
- figure（独立引用单元）：常与
<figcaption>配合使用，这个标签经常是在主文中引用的图片，插图，表格，代码段等等； - address（添加联系信息）：用来在文档中定义联系信息。
二、表单标签
- email：必须输入邮件；
- url：必须输入url地址；
- number：必须输入数值，可通过对其 max、min、step 等属性进行控制；
- range：必须输入一定范围内的数值，在网页中显示为滑动条；
- Date Pickers：日期选择器；
- date：选取日、月、年
- month：选取月、年
- week：选取周和年
- time：选取时间（小时和分钟）
- datetime：选取时间、日、月、年（UTC时间）
- datetime-local：选取时间、日、月、年（本地时间）
- search：搜索常规的文本域；
- tel：用于输入电话号码的文本框；
- color：用于设置颜色的文本框。
input 属性
- autocomplete 属性：辅助用户完成输入的自动完成功能；
- autofocus 属性：文字输入框会自动获取光标焦点；
- multiple 属性：file 类型支持一次选择多个文件；
- pattern 属性：用于验证 input 类型输入框中用户输入的内容与自定义的正则表达式相匹配；
- placeholder 属性：为 input 类型的输入框提供一种提示；
- required 属性：规定输入框填写的内容不能为空，否则不允许用户提交表单。
三、媒体标签
- video：播放视频
- audio：播放音频
- embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
四、其他功能标签
- mark：标注（像荧光笔做笔记）
- progress：表示进度条，可通过对其 max、min、step 等属性进行控制
- time：表示时间值，添加 pubdate 属性意思是 time 元素代表文章或者整个网页的发布日期。
- wbr：软换行，页面宽度到需要换行时换行；
- canvas：使用JS代码做内容进行图像绘制；
- command：用来处理命令按钮；
- deteils ：展开菜单，用来表示一段具体的内容，但是内容默认可能不显示。；
- datalist：为输入框提供一个可选的列表，该列表由 datalist 中的 option 元素创建；
- keygen：密钥对生成器，能够使用户验证更为可靠；