HTML5基础（三）
新增的非主体结构元素
1、header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。
在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把NAV元素包括进去。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
text-align: center;
}
a{
color: #f60;
text-decoration: none;
}
hgroup{
margin-bottom: 10px;
}
nav{
height: 48px;
background: #ff6600;
}
nav li{
float: left;
background: #000000;
border-radius: 5px;
padding: 5px 10px;
margin: 10px;
list-style: none;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>HTML5视频教程</h1>
<a href="/">[手机版]</a>
<a href="/">[HTML5论坛]</a>
</hgroup>
<nav>
<ul>
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/">手机版</a>
</li>
<li >
<a href="/">论坛</a>
</li>
</ul>
</nav>
</header>
</body>
2、hgroup元素
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。
通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<article>
<header>
<h1>文章标题</h1>
<p><time datetime="2014-10-08">2014年10月8日</time></p>
</header>
<p>文章正文</p>
</article>
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p><time datetime="2014-10-08">2014年108日</time> </p>
</header>
<p>文章正文</p>
</article>
3、footer元素
footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息，比如作者、版权信息等。
注意：footer元素和我们前面所讲的header元素一样，并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。
<article>
<p>文章内容</p>
<footer>
文章的脚步注释
</footer>
</article>
<section>
<p>文章内容</p>
<footer>
文章的脚步注释
</footer>
</section>
<footer>
<p>
<a href="/">版权信息</a>|
<a href="/">关于我们</a>|
<a href="/">联系我们</a>|
<a href="/">站点地图</a>|
</p>
<p>学院版权所有</p>
</footer>
4、address元素
address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章中的相关的联系人的所有联系信息。
<address>作者信息</address>
<footer>
<address>
<a href="/" title="bin">bin</a>
<a href="/" title="binperson">binperson</a>
重庆市高新区天府软件园D区D5栋504室
</address>
时间：<time datetime="2014-10-11">2014年10月11日</time>
</footer>
