HTML5基础知识：Article和Section区别

您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 <article>标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 <article>来唯一地识别内容。<article>标记识别可以移除并放到另一个上下文的内容，并且非常易于理解。

Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 <section>标记创建这些区。<section>包含 Web 内容的相关的组件区。<section> 标记 —以及 <article>标记 —可以包含标题、页脚或任何其他必要的组件。<section>标记用于对内容分组。<section>标记和 <article>标记的内容通常以 <header>开头，以 <footer>结尾，中间为标记的内容。

<section>标记还可以包含 <article>标记，正如 <article>标记可以包含 <section>标记一样。<section>应用于将类似的信息划分成组，而 <article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。顾名思义，<article>提供了完整的信息判断，而 <section>标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。

清单 4 显示了 <article> 和 <section>标记的用法示例。

清单 4. <article> 标记和 <section> 标记示例

<section>和 <article>标记以及 <header>和 <footer>标记可以包含 <figure>标记。您可以使用该标记包含图像、图表和照片。

<figure>标记可以包含 <figcaption>，后者包含 <figure>标记中的图形的说明文字，允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 <figure>和 <figcaption>标记结构的示例。

清单 5. <figure> 标记和 <figcaption> 标记示例

<section>和 <article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。

<audio>标记识别声音内容，例如音乐或任何其他的音频流。<audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是 src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。(www.xing528.com)

清单 6. <audio> 标记示例

<video>标记允许您广播视频片段或可视流媒体。它除了具备 <audio>标记的所有属性外，还包含另外三个属性：poster、width和 height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。

清单 7 提供了 <video>标记结构的示例。

清单 7. <video> 标记示例

<video>和 <audio>标记可以包含 <Source>标记，后者为 <video>和 <audio> 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件，浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中，提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放，那么就可以尝试使用 MP3 版本。否者，显示一条消息，通知客户音频不可用的原因。

清单 8. <source> 标记示例

<embed>标记定义了可以嵌入到页面中的内容 —例如，Adobe Flash SWF 文件的插件。清单 9 包含 type属性，该属性将嵌入的源识别为 Flash 文件。

清单 9. <embed> 标记示例

除了 src和 type属性外，<embed>标记还包含 height 和 width属性。