html5新增的非主体结构元素
header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面
或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、
搜索表单或相关的logo图片。
<header>
<h1>IT最新技术</h1>
<a href="http://www.jikexueyuan.com">极客学院</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">极客</a></li>
</ul>
</nav>
</header>
footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。
footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">练习方式</a></li>
</ul>
</footer>
<article>
<footer>
这是一个文章的底部
</footer>
</article>
<section>
<footer>这是一个区块的底部</footer>
</section>
hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。
hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
<article>
<header>
<hgroup>
<h1>这是文章标题</h1>
<h2>这是一个子标题</h2>
</hgroup>
<p>
<time datetime="2015-10-10">2015-10-10</time>
</p>
</header>
<div>
这是内容
</div>
<footer>
这是底部
</footer>
</article>
address元素
address元素用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字、
他们的网站链接、电子邮箱、真实地址、电话号码等。
address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
<address>
<a href="#">iwen</a>
<a href="#">ime</a>
</address>
<footer>
<div>
<address>
<a href="#">iwen</a>
大沙滩，毛里求斯
</address>
<time datetime="2015-10-10">2015-10-10</time>
</div>
</footer>
HTML5的结构，页面编排的规则
1.显示编排内容区域块
明确的使用section等元素创建区域块
2.隐示编排内容区域块
不写section等元素，根据需求写相应的h1到h6和相应的hgroup
把各级内容区域块自动创建出来。
3.标题分级
标题不同生成不同的区域块。
4.不同区域块使用相同的标题
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章正标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<div>
<article>
<h1>评论标题</h1>
<p>评论内容</p>
</article>
</div>
</section>
</article>
<footer>
<div>
<small>版权所有</small>
</div>
</footer>
