HTML5语义化结构元素详解

HTML5语义化结构元素由来：Google（谷歌）对现有网页和用户习惯进行跟踪、分析和概括而推出的。例如，google分析了上百万的网页页面，从中分析出了div标签的通用id名称，并且发现重复量很大，如很多开发工程师使用<div id="header"></div>来标记页面区域，为了解决实际问题，HTML5就添加一个<header>标签。也就是说，HTML5新增的很多元素、属性或者功能都是根据现实互联网中已经存在的各种应用进行技术精炼，而不是实验室中进行理想化的虚构新功能。好了，开头就介绍到这里了，我们言归正传

HTML5新增语义化结构元素

元素名称	说明
header	表中页面中一个内容区块或整个页面标题
footer	表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者的联系       信息
section	表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。他可以与h1、h2、h3...h6等元素结合     使用，表示文档结构。
article	表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章
aside	表示article元素的内容之外的、与article元素的内容相关辅助信息
nav	表示页面中导航链接的部分
main	表示网页中的主要内容。主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容
figure	表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标   题

                                                                                                  设计主体结构

定义导航块(nav)：nav元素市一个可以用作页面导航连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

nav元素使用场景，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素最恰当。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。在实际开发中nav元素作用

传统导航条，常规网站都设置有不同层级导航条，其作用是将当前画面跳转到网站的其他主要页面上去。

侧边栏导航，现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。

页内导航，页内导航的作用是在本页面几个主要的组成部分之间进行跳转。

翻页操作，翻页操做是指在多个页面的前后页或博客网站前后篇文章滚动。

（注：在HTML5中不要用menu元素代替nav元素。很多用户喜欢用menu元素进行导航，menu元素主要使用在一系列交互命令的菜单上的，如使用在web应用程序中的）

定义文章块（article）:article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。

定义内容块（section）:section元素用于对网站或应用程序中页面上的内容进行分区。一个section元素通常由内容及其标题组成。div元素也可以用来对页面进行分区，但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div,而非section元素。article和section区别？它们的功能与div类似，都是用来区分不同区域，它们的使用方法也相似，因此很多初学者会将其混用。HTML5之所以新增这两种元素，就是为了更好地描述文档的内容，所以它们之间肯定有区别的。article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一个浏览者的评论等。因为article元素是一段独立的内容，所以article元素通常包含头部（header元素）、底部（footer底部元素）。section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。

定义侧边栏（aside）：aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。aside元素主要有以下两种使用方法。

（1）作为主要内容的附属信息部分,包含在article元素中，其中的内容可以是与当前文章有关的参考资料、名词解释等。

定义主要区域（main）:main元素表示网页中的主要内容。主要内容区域是指与网页标题或应用程序中本页主要功能直接相关或进行扩展的内容。该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航条、版权信息、网站logo、公共搜索表单等整个网站内部的共同内容。（注：每个网页内部只能放置一个main元素。不能将main元素放置在任何article、aside、footer、header、nav元素内部）

                                                                                                        设计语义结构（非主体结构元素）

定义标题栏（header）:header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块标题，但也可以包含其他内容，如数据表格、搜索表单或相关的logo图片，因此整个页面的标题应该放在页面的开头。header元素通常包含h1~h6，也可以包含hgroup、table、form、nav等元素，只要应该显示在头部区域的语义标签，都可以包含在header元素中。

定义脚注栏（footer）:footer元素可以作为内容块的注脚，如在父级内容快中添加注释，或者在网页中添加版权信息等。脚注信息有很多种形式，如作者、相关阅读链接及版权信息等。与header元素一样，页面种也可以重复使用footer元素。同时，可以为article元素或section元素添加footer元素。下面代码分别在article、section、和body元素中添加footer元素。

定义联系信息段(address):??

定义标题组（hgroup）:??

定义时间段（time）:？？

定义发布日期（pubdate）：？？

这上面四个语义化元素是不常用的，感兴趣的小伙伴自己去自学去吧！语义化元素就分享到这里了，由于夜深没有给你们写源码。如有疑问可以咨询