HTML标签之article

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

article元素：代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复，总之article它所表示的所展现的内容，是外表独立出来的内容，所以它有自己独立的标题、页脚。

<article>
    <header>
        <h1>在线看电影</h1>
        <p>发表日期：<time pubdate="pubdate">2017/09/01</time></p>
    </header>
    <p>公众号：abcdefg</p>
    <footer>
        <p><small>Copyright @hahaCompany All Rights Reserverd</small></p>
    </footer>
</article>

 

<!DOCTYPE html>
</html>
    <head lang=”en”>
        <meta charset=”UTF-8”>
        <titile></title>
    </head>
    <body>
        </article>
            <header>
                <p>header部分，如：创建时间：<time pubdate=”pabdate”>2014/09/27</time></p>
            </header>
            <b>body部分：</b>Article是一个独一的区域
            <b>关于xxx的文章</b>
            </footer>
                <p><small>footer部分：此文章转自xxxxxxxx</small></p>
            <footer>
        <article>
    </body>
<html>

 因此，以上实例代码是一个完整的、独立的。所以我们使用article元素是正确的。

 

怎么用嵌套

Article元素是可以被嵌套使用的，内层的内容在原则上是需要与外层的内容相关联，比如我们刚刚讲解的article的实例，针对这个实例，我们就可以使用嵌套的article元素来展示，用来呈现的评论将会被包含在整理的大的元素里面，我们就来展示下怎么用嵌套。

我们找到内容区域，在内容区域的下面添加一个section元素。

<!DOCTYPE html>
</html>
    <head lang=”en”>
        <meta charset=”UTF-8”>
        <titile></title>
    </head>
    <body>
        <section>
            <h2>读者评论</h2>
            <article>
                <header>
                    <h3>读者：路人a</h3>
                    <p>
                    <time pudate datetime=”2014/09/27T21:00”>2小时前</time>
                    </p>
                </header>
                <p>文章很好！</p>
            </article>
            <h2>读者评论</h2>
            <article>
                <header>
                    <h3>读者：小星星</h3>
                    <p>
                    <time pudate datetime=”2014/09/27T21:00”>2小时前</time>
                    </p>
                </header>
                <p>文章非常好!</p>
            </article>
        </section>
    </body>
<html>

 

posted on 2018-12-26 09:48  myworldworld  阅读(1680)  评论(0)    收藏  举报

导航