H5相对于H4的一个重大修改在于增加了很多新的结构元素，使文档更加清晰、容易阅读。
此元素一般写文本时才用，值得注意的是，同于h标签，header、footer标签每个页面上有且只有一个。
article元素表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专门用于独立的分类或复用，比如聚合。
首先，article元素除了内容部分，通常有自己的标题和脚注，范例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
其次，article支持嵌套，内层的内容也是相对独立的模块，并且原则上要与外层的内容相关联，实现样例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
</section>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
最后，article元素也可以用来表示其他比较完整的内容，比如说插件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>电子商务网站</h1>
</header>
<object>
<embed src="http://player.youku.com/player.php/sid/XNzM4MzYyNzg0/v.swf"allowFullScreen="true" quality="high" width="480"height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</object>
</article>
</body>
</html>
Section元素代表文档或应用程序中的一个段落，指的是对文章内容按照主题分组，通常还附带标题，它的应用在上面的实例中已经有展示，现在说一下section使用时的场景：
首先，section不是用来写样式的容器，那是div的工作；
其次，当article、aside或nav更符合页面要求时，尽量不要使用seaction；
最后，不要为没有标题的内容区块使用seaction元素。
用来构建页面的导航或一个站点内的链接，nav元素是一个包装器，它不会代替有序列表或无序列表，它与menu的区别在于，menu注重页面的交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>***文档</h1>
<nav>
<ul>
<li><a="javascript:;">主页</a></li>
<li><a="javascript:;">第一章</a></li>
<li><a="javascript:;">第二章</a></li>
</ul>
</nav>
<article>
<header>
<h2>***功能简介</h2>
<nav>
<ul>
<li><a href="#gl">管理功能</a></li>
<li><a href="#gf">规范功能</a></li>
</ul>
</nav>
</header>
<section id="gl">
<h3>管理功能</h3>
<p>********</p>
</section>
<section id="gf">
<h3>规范功能</h3>
<p>*********</p>
</section>
</article>
</body>
</html>
用来表示当前页面或文章的附属部分，常见的有广告、名词解释、友情链接等。
<aside>
<nav>
<h4>友情链接</h4>
<ul>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.zuche.com/?WT.srch=1&WT.mc_id=pc201508050147">神州租车</a>
</li>
</ul>
</nav>
</aside>
用于明确的对机器的日期和时间进行编码，并以易读的方式来展现。如下，机器的可读部分放在元素的datatime属性里，中间的部分时显示在网页上的。日期与时间用“T”分隔。
<time datetime="2016-04-15">新版本上线的日子</time>
是一个布尔属性，用来表示这个特定的<timedatetime="2016-04-15" pubdate> </time>
是某个article或body的发布日期
具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块，但也可以包含搜索表单或相关内容的logo等。通常至少包含一个heading元素，也可以包括hgroup、table、form、nav等
将标题分组
做为父级内容区块或是一个根区块的脚注。在h5出现之前使用div，
<div id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</div>
在h5中使用更加语义化的footer来代替，
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
是当前article或文档的作者的联系方式，可以是邮箱地址、邮政地址等。不限形式。
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
