HTML5 定义文章块

    ■知识点

    article表示文章块，用来标识页面中一块完整的、独立的、可以被转发的内容，如报纸文章、论坛帖子、用户评论、博客条目等。提示，一些交互式小部件或小工具，或任何其他可独立的内容，原则上都可以作为article块，如日期选择器组件。

    ■实例设计

【示例1】下面的示例演示了 article元素的应用。

<header role="banner">

    <nav role="navigation”> [包含多个链接的 ul]</nav>

</header>

<main role="main">

    <article>

        <hl id="news">区块链“时代号”列车驶来</h1>

        <p>对于精英们来说，这个春节有点特殊。</p>

        <p>他们身在视营心在汉，他们被区块链搅动得燥热难耐，在兴奋、焦虑、恐慌、质疑中度过一个漫长春节。</p>

        <h2 id="subl">l.三点钟无眠</h2>

        <p><img src="images/0001. jpg" width="200" />春节期间，一个大姥云集的区块链群建立，因为有蔡文胜、薛蛮子、徐小平等人的参与，群被封上了 “市值万亿”。这个名为“三点钟无眠区块链”的群，搅动了一池春水。</p>

        <h2 id="sub2">2.被碾压的春节</h2>

        <p>...</p>

    </article>

</main>

    为了精简，本示例对文章内容进行了缩写，略去了与上一节相同的nav代码。尽管在这个示例里只有段落和图像，但article可以包含各种类型的内容。

    可以将article嵌套在另一个article中，只要里面的article与外面的article是部分与整体的关系。一个页面可以有多个article元素。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的articleo —个article可以包含一个或多个section元素。在article里包含独立的hl〜h6元素。

    【示例2】示例1只是使用article的一种方式，下面看看其他的用法。本示例展示了对基本的新闻报道或报告进行标记的方法。注意footer和address元素的使用。这里，address只应用于其父元素article (即这里显示的article)，而非整个页面或任何嵌套在那个article里面的article。

    <article>

    <hl id="news">区块链“时代号”列车驶来</hl>

    <P>对于精英们来说，这个春节有点特殊。</P>

    <!--文章的页脚，并非页面级的页脚 -->

    <footer>

        <p>出处说明</p>

        <address>

        访问网址<a href="https : //www.huxiu.com/article/233472.html">虎嗅</a> 

        </address>

    </footer>

</article>

    【示例3】下面的示例展示了嵌套在父元素article里面的article元素。该示例中嵌套的article是用户提交的评论，就像在博客或新闻网站上见到的评论部分。该示例还显示了 section元素和time元素的用法。这些只是使用article及有关元素的几个常见方式。

<article>

    <hl id="news">区块链“时代号”列车驶来</hl>

    <P>对于精英们来说，这个春节有点特殊。</p>

    <section>

        <h2> 读者评论</112>

        <article>

            <footer〉发布时间

                <time datetime=n2018-02-20n>2018-2-20</time>

            </footer>

            <p>评论内容</p>

        </article>

        <article〉[下一则评论]〈/article〉

    </section>

</article>

每条读者评论都包含在一个article里，这些article元素则嵌套在主article里。