首页 > 代码库 > HTML5 结构之美(1) - 新增的主体结构标签
HTML5 结构之美(1) - 新增的主体结构标签
article标签
article 标签代表文档或页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。
除了内容之外，一个 article 标签通常有它自己的标题（一般放在一个 header 标签里面），有时还有自己的脚注。
现在，让我们以博客为例来看一段关于 article 标签的代码示例：
<article> <header> <h1>苹果</h1> <p>发表日期：<time pubdate="pubdate">2014/10/24</time></p> </header> <p><strong>苹果</strong>，植物类水果，多次花果。。。</p> <p>介绍“苹果”的文章正文。。。</p> <footer> <p><small>著作权归***公司所有。</small></p> </footer></article>
这个示例是一篇描述苹果的博客文章，在 header 标签中嵌入了文章的标题部分，在这部分中，文章的标题“苹果”被嵌入在 h1 标签中，文章的发表日期嵌入在 p 标签中。在标题下面的 p 标签中，嵌入了一大段该博客文章的正文，在结尾处的 footer 标签中，嵌入了文章的著作权，作为脚注。
article 标签是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，在一篇博客文章中，针对该文章的评论就可以使用嵌套 article 标签的方式；用来呈现评论的 article 标签被包含在表示整体内容的 article 标签里面。
接下来，让我们来看一个关于 article 标签嵌套的代码示例：
<article> <header> <h1>苹果</h1> <p>发表日期：<time pubdate datetime="2014/10/27">2014/10/27</time></p> </header> <p><strong>苹果</strong>，植物类水果，多次花果。。。(“苹果”文章正文)</p> <section> <h2>评论</h2> <article> <header> <h3>发布者：Lucky</h3> <p><time pubdate datetime="2014-10-27 17:16:03">一小时前</time></p> </header> <p>我喜欢苹果，我最喜爱的品种是红富士。</p> </article> <article> <header> <h3>发布者：Jason</h3> <p><time pubdate datetime="2014-10-27 17:17:56">一小时前</time></p> </header> <p>苹果？我不喜欢，我喜欢吃橘子。</p> </article> </section></article>
具体来说，示例内容分为以下几部分：
1、文章标题放在了 header 标签中；
2、文章正文放在 header 标签后面的 p 标签中；
3、用 section 标签把正文与评论部分进行了区分。
因为每一个人的评论相对来说是比较独立、完整的，因此对它们使用一个 article 标签。在评论的 article 标签中，又可以分为标题与评论内容部分，分别放在 header 标签与 p 标签中。
另外，article 标签也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。
<article> <h1>My Spinner</h1> <object> <param name="allowFullScreen" value="true" /> <embed src="#" width="600" height="400"></embed> </object></article>
section标签
section 标签用于对页面上的内容进行分块，一个 section 标签通常由标题及其内容组成。但 section 标签并非一个普通的容器标签；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div 而非 section 标签。
我们可以这样理解：section 标签中的内容可以单独存储到数据库中或输出到 Word 文档中。下面，让我们来看一个示例（注意：标题部分位于它的内部，而不是它的前面）。
<section> <h1>苹果</h1> <p><strong>苹果</strong>，植物类水果，多次花果。。。（“苹果”文章正文）</p></section>
通常不推荐为那些没有标题的内容使用 section 标签，可以使用 HTML5 轮廓工具(http://gsnedders.html5.org/outliner/)来检查页面中是否存在没有标题的 section 标签，如果使用该工具进行检查后，发现某个 section 的说明中有“untitiled section”（没有标题的section）文字，这个 section 就有可能使用不当（备注：但是 nav 标签或 aside 标签没有标题是合理的）。
section 标签的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与“有着自己的完整的、独立的内容”的 article 标签混淆。下面，我们来看 article 标签与 section 标签结合使用的两个示例，希望能够帮助你更好的理解 article 标签与 section 标签的区别。
首先来看一个带有 section 标签的 article 标签示例：
<article> <h1>苹果</h1> <p><strong>苹果</strong>，植物类水果，多次花果。。。</p> <section> <h2>红富士</h2> <p>红富士是从普通富士的芽(枝)变种选育出的着色系富的统称。。。</p> </section> <section> <h2>苹果</h2> <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗。。。</p> </section></article>
首先，以上内容是一段独立的、完整的文章，因此使用 article 标签。该文章分为3段，每一段都有一个独立的标题，因此使用了两个 section 标签。可能有人会问，为什么没有对第一段使用 section 标签，这里其实是可以使用 section 标签的，但是由于其结构比较清晰，分析器可以识别第一段内容在一个 section 标签里，所以也可以将第一个 section 标签忽略，但是如果第一个 section 标签里还要包含子 section 标签或子 article 标签，那么就必须写明第一个 section 标签了。
接着，我们来看一个包含 article 标签的 section 标签示例：
<section> <h1>水果</h1> <article> <h2>苹果</h2> <p>苹果，植物类水果，多次花果。。。</p> </article> <article> <h2>橘子</h2> <p>橘子，是芸香料柑橘属的一种水果。。。</p> </article> <article> <h2>香蕉</h2> <p>香蕉，芭蕉科（Musaceae）芭蕉属（Musa）植物，又指其果实。。。</p> </article></section>
这个示例比前面的示例复杂一些了，首先，它是一篇文章中的一段，因此最初没有使用 article 标签。但是，在这一段中有几块独立的内容，因此，嵌入了几个独立的 article 标签。
可能你会问，这两个标签可以互换使用吗？它们的区别到底是什么呢？事实上，在 HTML5中，article 标签可以看成是一个特殊种类的 section 标签，但是它比 section 标签更强调独立性。即 section 标签强调分段或分块，而 article 强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用 article 标签，但是如果你想将一块内容分成几段的时候，应该使用 section 标签。
最后，关于 section 标签的使用禁忌总结如下：
1、不要将 section 标签用作设置样式的页面容器，那是 div 标签的工作；
2、如果 article 标签、aside 标签或 nav 标签更符合使用条件，不要使用 section 标签；
3、不要为没有标题的内容区块使用 section 标签。
nav标签
nav 标签是一个可以用作页面导航的连接组，但不是所有的链接组都要被放进 nav 标签的，只需将主要的、基本的连接组放进 nav 标签即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权申明等，这时使用 footer 标签是最恰当的。一个页面中可以拥有多个 nav 标签，作为页面整体或不同部分的导航。
接着让我们来看一个 nav 标签的使用示例，在这个示例中，一个页面由几部分组成，每个部分都带有链接，但只将最主要的链接放入 nav 标签中。
<body> <h1>技术资料</h1> <nav> <ul> <li><a href="/">主页</a></li> <li><a href="/documents">开发文档</a></li> ...more... </ul> </nav> <article> <header> <h2>HTML5 与 CSS3 的历史</h2> <nav> <ul> <li><a href="#HTML5">HTML5 的历史</a></li> <li><a href="#CSS3">CSS3 的历史</a></li> ...more... </ul> </nav> </header> <section id="HTML5"> <h3>HTML5的历史</h3> <p>描述 HTML5 历史的正文。。。</p> </section> <section id="CSS3"> <h3>CSS3的历史</h3> <p>描述 CSS3 历史的正文。。。</p> </section> <footer> <p> <a href="?edit">编辑</a> | <a href="?delete">删除</a> | <a href="?rename">重命名</a> | </p> </footer> </article> <footer> <p><small>版权所有：XXX</small></p> </footer></body>
在这个例子中，第一个 nav 标签用于页面导航；第二个 nav 标签放置在 article 标签中，用作这篇文章中两个组成部分的页内导航。
具体来说，nav 标签可以使用以下这些场合：
传统导航条：
现在主流网站上都有不同层级的导航条，其作用是将当前画面跳转到网站的其他主要页面上去。
侧边栏导航：
现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
页内导航：
页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
翻页操作：
翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
除此之外，nav 标签也可以用于其他所有你觉得是重要的、基本的导航链接组中。
请注意：在 HTML5 中不要用 menu 标签代替 nav 标签。过去有很多 Web 应用程序的开发人员喜欢用 menu 标签进行导航，在这次再次强调，menu 标签是用在一系列发出命令的菜单上的，是一种交互性的标签，或者更确切地说是使用在 Web 应用程序中的。
aside标签
aside 标签用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
aside 标签主要有以下两种使用方法。
1) 被包含在 article 标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释，等等。
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>aside标签示例</title></head><body> <header> <h1>F#入门</h1> </header> <article> <h2>第四节 语法闭包</h2> <p>lambda表达式可以创建语法闭包。。。（文章正文）</p> <aside> <!-- 因为这个 aside 标签被放置在一个 article 标签内部， 所以分析器将这个 aside 标签的内容理解成是和 article 标签的内容相关联的。 --> <h3>名词解释</h3> <dl> <dt>F#</dt> <dd>F#是一种新型函数式编程语言。</dd> </dl> <dl> <dt>语法闭包</dt> <dd>语法闭包是指，将创建 lambda 表达式时的环境保存起来。。。（详细解释）</dd> </dl> </aside> </article></body></html>
这是一篇常见的技术文章，网页的标题放在了 header 标签中，在 header 标签的后面将所有有关于文章的部分放在了一个 article 标签中，将文章的正文放在了一个 p 标签中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在 p 标签的下部又放置了一个 aside 标签，用来存放名词解释部分的内容。
2) 在 article 标签之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。下面的这个示例为标准博客网页中一个侧边栏的示例。
<aside> <h2>评论</h2> <nav> <ul> <li><a href="#">erway</a> 10-24 14:32</li> <li><a href="#">太阳雨</a> 10-22 23:48<br /><a href="#">顶，拜读一下作者的文章。</a></li> <li><a href="#">新浪官博</a> 08-12 08:50<br /><a href="#">恭喜！您已经成功开通了博客。</a></li> </ul> </nav></aside>
该示例为一个典型的博客网站中的侧边栏部分，因此放在了 aside 标签中，该侧边栏的标题是“评论”，放在了 h2 标签中，但是该侧边栏又是具有导航作用的，因此放置在 nav 标签中。
time标签与微格式
首先来说以下微格式，它是一种利用 HTML 的 class 属性来对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间、个人电话号码、企业邮箱等。
微格式并不是在 HTML5 之后才有的，在 HTML5 之前它就和 HTML 结合使用了，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。HTML5 增加了一种新的标签来无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它。这个标签就是 time 标签。
time 标签代表 24 小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间，如下所示：
<time datetime="2010-11-13">2010年11月13日</time><time datetime="2010-11-13">11月13日</time><time datetime="2010-11-13">我的生日</time><time datetime="2010-11-13T20:00">我生日的晚上8点</time><time datetime="2010-11-13T20:00Z">我生日的晚上8点</time><time datetime="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>
编码时机器读到的部分在 datetime 属性里，而标签的开始标记与结束标记中间的部分就是显示在网页上的。datetime 属性中日期与时间之间要用“T”文字分隔，“T”表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，倒数第一行则加上了时差，表示向机器编码另一个地区时间，如果是编码本地时间，则不需要添加时差。
pubdate属性
pubdate 属性是一个可选的、布尔值的属性，它可以用到 article 标签中的 time 标签上，意思是 time 标签代表了文章(article标签的内容)或整个网页的发布日期，pubdate 属性的具体使用方法如下代码所示：
<article> <header> <h1>苹果</h1> <p>发布日期：<time datetime="2010-10-29" pubdate>2010年10月29日</time></p> </header> <p>苹果，植物类水果，多次花果。。。（“苹果”文章正文）</p> ...more...</article>
也许你会疑惑为什么要用到 pubdate 属性，为什么不能认为 time 标签就直接表示了文章或网页的发布日期呢？请看如下代码：
<article> <header> <h1>关于<time datetime="2010-10-29">10月29日</time>的舞会通知</h1> <p>发布日期：<time datetime="2010-10-11" pubdate>2010年10月11日</time></p> </header> <p>大家好：我是法律系3年级学生代表。。。（关于舞会的通知）</p></article>
在这个例子中，有两个 time 标签，分别定义了两日期--一个是舞会日期，另一个是通知发布日期。由于都使用了 time 标签，所以需要使用 pubdate 属性表明哪个 time 标签代表了通知的发布日期。
HTML5 结构之美(1) - 新增的主体结构标签