HTML5新增的语义化标签解析

HTML5 新增了许多语义化标签

语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

作用 ：

1.为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

2.用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用;

3.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重;

4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

HTML5 新增的标签

1.header 页眉(网页(部分区域)的头部 顶部 导航区域等等)

2.nav 导航

3.section 标签定义网页中的区域(部分)。

4.footer 页脚(网页(部分区域)的底部|版权区域等等)

5.article 外部引用的内容。

6.aside 跟 article 是一起使用;是辅助 article(比如：网页右侧的工具栏)

7.hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。

8.figure 标签规定独立的流内容(图像、图表、照片、代码等等)。

figcaption 元素卸载 figure 内 为其 添加标题

9.audio 标签定义声音，比如音乐或其他音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

10.video 播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

11.source 为媒介元素(比如 video 和 audio)指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。

12.canvas定义图形，比如图表和其他图像。

13.datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

请使用 input 元素的 list 属性来绑定 datalist。

14.embed 定义嵌入的内容，比如插件。

15.time 定义日期或时间，或者两者。

16.address

①标签定义文档或文章的作者/拥有者的联系信息。

②如果

元素位于

元素内，则它表示文档联系信息。

③如果

元素位于元素内，则它表示文章的联系信息。

④

元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行

注意： 标签不应该用于描述通讯地址，除非它是联系信息的一部分。元素通常连同其他信息被包含在元素中。

17.map 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

注意：

中的 usemap 属性可引用中的 id 或 name 属性(取决于浏览器)，所以我们应同时向添加 id 和 name 属性。

18. area 永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

圆形：shape="circ"，coords="x,y,z"

多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."

矩形：shape="rect"，coords="x1,y1,x2,y2"

19. mark 定义页面中需要突出显示或高亮显示的内容

20. details 标签定义元素的细节，目前只有 Chrome 和 Safari 6 支持 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。