HTML5基础实战 - 第一部分：初试锋芒(3) Article和Section

Article和Section区

你设计的页面包含了一个Article区，该区域存放了页面的实际内容。你使用< article>标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。例如，如果想创建一个RSS源(RSS feed)的话，那么你可以使用<article>来唯一标识该内容。<article>标签标识了可被删除、可被放置在另一上下文中，并且是可被完全理解的内容。

Acme United规划中的Article区包含了三个Section区，可使用<setction>标签来创建这几个区域。<section>包含了web内容的相关组件区域，<section>标签——以及<article>标签——可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。< section>标签用于分组的内容，<section>标签和<article>标签通常以一个<header>为开始并以一个<footer>结束，标签的内容则放在这两者之间。

<section>标签也可以包含<article>标签，就像<article>标签可以包含<section>标签一样。<section>标签应该用来分组相类似的信息，而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。

<article>和<section>标签的用法例子请参见清单4。

清单4. < article>标签和< section>标签的例子

<article>
 <section>
 Content
 </section>
 <section>
 Content
 </section>
</article>
<section>
 <article>
 Content
 </article>
 <article>
 Content
 </article>
</section>

图像元素

<section>和<article>标签这两者，以及<header>和<footer>标签都可以包含<figure>标签，你使用该标签来加入图像、图表和照片。

<figure>标签可以包含<figcaption>，该标签相应的包含了包含在<figure>标签中的图形的标题，其允许你输入描述，把图形和内容更加紧密的关联起来。清单5提供了一个<figure>和<figcaption>标签结构的例子。

清单5. <figure>和<figcaption>标签的例子

<figure>
 <img src="/figure.jpg" kesrc="/figure.jpg" width="304" height="228" alt="Picture">
 <figcaption>Caption for the figure< /figcaption>
</figure>

媒体元素

<section>和<article>标签还可以包含各种媒体元素，HTML5提供的标签立刻就传达了其内容的意思。媒体元素，比如说音乐和视频，以前只能嵌入，但现在能够被更精准地标识出来。

<audio>标签标识了声音内容，比如说音乐或是任何的其他音频流。<audio>标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src、preload、control、loop和autoplay。在清单6给出的例子中，只要页面一加载音频就开会播放，其会持续播放，所提供的控制可以让用户停止或是重新开始播放音频。

清单6. <audio>标签的例子

<audio src="MyFirstMusic.ogg" kesrc="MyFirstMusic.ogg" controls autoplay loop>
 Your browser does not support the audio tag.
</audio>

<video>标签允许你播放视频片段或是流化视觉媒体。其拥有< audio>标签所有的属性，另外再加上三个：poster、width和height。当视频正在加载或是视频处于完全没有加载的糟糕情况中时，poster属性可让你找出一张图像来应付着先。

清单7提供了一个<video>标签结构的例子

清单7. 标签的例子

<video src="MyFirstMovie.ogg" kesrc="MyFirstMovie.ogg" controls="controls">
 Your browser does not support the video tag
</video>

<video>和<audio>标签可以包含<source>标签，该标签定义了<video>和<audio>标签的多媒体资源。使用这一元素，你可以指定替代的视频或是音频文件，然后浏览器就可以基于它的媒体类型或是所支持的编解码器来从中进行选择。清单8中有两种选择，如果文件的WMA版本不能在所使用的浏览器中播放的话，就再尝试MP3版本。否则的话就显示信息，这样用户就知道为什么音频不可用了。

清单8. <source>标签的例子

<audio>
 <source src="/music/good_enough.wma" kesrc="/music/good_enough.wma" type="audio/x-ms-wma">
 <source src="/music/good_enough.mp3" kesrc="/music/good_enough.mp3" type="audio/mpeg">
 <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

<embed>标签定义了可带入到页面中的嵌入式内容——例如， 一个Adobe Flash SWF文件的插件。清单9包含了type属性，标明嵌入的资源为Flash文件。

清单9. <embed>标签的例子

<embed src="MyFirstVideo.swf" kesrc="MyFirstVideo.swf" type="application/x-shockwave-flash" />

除了src和type属性之外，<embed>标签还拥有height和width属性。