article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。

除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。

现在,让我们以博客为例来看一段关于article元素的代码示例,如代码清单3-1所示。

代码清单3-1   article元素示例


<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p>
    <footer>
        <p><small>著作权归***公司所有。</small></p>
    </footer>
</article>

这个示例是一篇讲述苹果的博客文章,在header元素中嵌入了文章的标题部分,在这部分中,文章的标题“苹果”被镶嵌在h1元素中,文章的发表日期镶嵌在p元素中。在标题下部的p元素中,嵌入了一大段该博客文章的正文,在结尾处的footer元素中,嵌入了文章的著作权,作为脚注。整个示例的内容相对比较独立、完整,因此,对这部分内容使用了article元素。

article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。

接着,让我们来看一个关于article元素嵌套的代码示例,如代码清单3-2所示。

代码清单3-2   article元素嵌套示例

    <article> 
        <header> 
            <h1>苹果</h1> 
            <p>发表日期:  
                   <time pubdate datetime="2010/10/09">2010/10/09</time> 
            </p> 
        </header> 
        <p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p> 
        <section> 
            <h2>评论</h2> 
            <article> 
                <header> 
                   <h3>发表者:陆凌牛</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:10-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>我喜欢苹果,我最喜爱的品种是红富士。</p> 
            </article> 
            <article> 
                <header> 
                   <h3>发表者:张玉</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:15-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>苹果?我不喜欢,我喜欢吃橘子。</p> 
            </article> 
        </section> 
    </article> 

这个示例中的内容比代码清单3-1中的内容更加完整了,它添加了文章读者的评论内容,示例的整体内容还是比较独立、完整的,因此对其使用article元素。具体来说,示例内容又分为几部分,文章标题放在了header元素中,文章正文放在了header元素后面的p元素中,然后section元素把正文与评论部分进行了区分(section元素马上就要讲到,是一个分块元素,用来把页面中的内容进行分块),在section元素中嵌入了评论的内容,评论中每一个人的评论相对来说又是比较独立、完整的,因此对它们都使用一个article元素,在评论的article元素中,又可以分为标题与评论内容部分,分别放在header元素与p元素中。

关于示例中提到的time元素与pubdate属性,请查看本节结尾处有关time元素与pubdate属性的说明。

另外,article元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。代码清单3-3是它的一个示例。

代码清单3-3   用article元素表示插件

    <article> 
        <h1>My Fruit Spinner</h1> 
        <object> 
            <param name="allowFullScreen" value="true"> 
            <embed src="#" width="600" height="395"></embed> 
        </object> 
    </article> 

 

参考资料:HTML5 与 CSS3 权威指南