1.3.1　课堂案例——使用article元素

article元素可以包含独立的内容项，例如包含一篇论坛帖子、一篇杂志文章、一篇博客文章、用户评论等。这个元素可以将信息各部分进行任意分组，而不考虑信息原来的性质。

作为文档的独立部分，每一个article元素的内容都具有独立的结构。它们不仅能用在正文中，还能用在文档的各个节中。

下面讲述article元素的使用，具体代码如下。

<article>
   <header>      
        <h1>北京房山十渡风景区简介</h1>      
   </header>    
   <p>十渡位于北京西南，属北京市房山区，与河北省涞水县野三坡相邻，距北京市区（六里桥）约90公里。十渡
是有山有水的自然风景区，独特的喀斯特地貌北方罕见，因此被评为世界地质公园，国家AAAA级风景区。流经十渡的河
名叫拒马河，十渡的山属太行山余脉。 <br>
   <br>
十渡的游玩主要集中在六渡（孤山寨）、九渡（拒马乐园）、十五渡（东湖港）、十七渡（有山家园，野战大东沟
.真人CS）、十八渡（拒马河第一漂）。</p> 
<footer>      
   <p><small>版权所有</small></p>
</footer>
</article>

header元素中嵌入了文章的标题部分，h1元素中是文章的标题“北京房山十渡风景区简介”。标题下部的p元素中是文章的正文，结尾处的footer元素中是文章的版权声明。对这部分内容使用了article元素。在浏览器中的效果如图1.6所示。

图1.6 article元素实例

另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码示例如下。

<article>
   <h1>article表示插件</h1> 
   <object> 
      <param name="allowfullscreen" value="true"> 
      <embed src="#" width="600" height="395"></embed> 
   </object>
</article>

一个网页中可能有多个独立的article元素，每个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。一个网页中的样式可能如下所示。

header{
   display:block;
   color:green;
   text-align:center;
}  
   aritcle header{
   color:red;
   text-align:left;
}