HTML5 定義文章塊

    ■知識點

    article表示文章塊，用來標(biāo)識頁面中一塊完整的、獨立的、可以被轉(zhuǎn)發(fā)的內(nèi)容，如報紙文章、論壇帖子、用戶評論、博客條目等。提示，一些交互式小部件或小工具，或任何其他可獨立的內(nèi)容，原則上都可以作為article塊，如日期選擇器組件。

    ■實例設(shè)計

【示例1】下面的示例演示了 article元素的應(yīng)用。

<header role="banner">

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

</header>

<main role="main">

    <article>

        <hl id="news">區(qū)塊鏈“時代號”列車駛來</h1>

        <p>對于精英們來說，這個春節(jié)有點特殊。</p>

        <p>他們身在視營心在漢，他們被區(qū)塊鏈攪動得燥熱難耐，在興奮、焦慮、恐慌、質(zhì)疑中度過一個漫長春節(jié)。</p>

        <h2 id="subl">l.三點鐘無眠</h2>

        <p><img src="images/0001. jpg" width="200" />春節(jié)期間，一個大姥云集的區(qū)塊鏈群建立，因為有蔡文勝、薛蠻子、徐小平等人的參與，群被封上了 “市值萬億”。這個名為“三點鐘無眠區(qū)塊鏈”的群，攪動了一池春水。</p>

        <h2 id="sub2">2.被碾壓的春節(jié)</h2>

        <p>...</p>

    </article>

</main>

    為了精簡，本示例對文章內(nèi)容進行了縮寫，略去了與上一節(jié)相同的nav代碼。盡管在這個示例里只有段落和圖像，但article可以包含各種類型的內(nèi)容。

    可以將article嵌套在另一個article中，只要里面的article與外面的article是部分與整體的關(guān)系。一個頁面可以有多個article元素。例如，博客的主頁通常包括幾篇最新的文章，其中每一篇都是其自身的articleo —個article可以包含一個或多個section元素。在article里包含獨立的hl?h6元素。

    【示例2】示例1只是使用article的一種方式，下面看看其他的用法。本示例展示了對基本的新聞報道或報告進行標(biāo)記的方法。注意footer和address元素的使用。這里，address只應(yīng)用于其父元素article (即這里顯示的article)，而非整個頁面或任何嵌套在那個article里面的article。

    <article>

    <hl id="news">區(qū)塊鏈“時代號”列車駛來</hl>

    <P>對于精英們來說，這個春節(jié)有點特殊。</P>

    <!--文章的頁腳，并非頁面級的頁腳 -->

    <footer>

        <p>出處說明</p>

        <address>

        訪問網(wǎng)址<a href="https : //www.huxiu.com/article/233472.html">虎嗅</a> 

        </address>

    </footer>

</article>

    【示例3】下面的示例展示了嵌套在父元素article里面的article元素。該示例中嵌套的article是用戶提交的評論，就像在博客或新聞網(wǎng)站上見到的評論部分。該示例還顯示了 section元素和time元素的用法。這些只是使用article及有關(guān)元素的幾個常見方式。

<article>

    <hl id="news">區(qū)塊鏈“時代號”列車駛來</hl>

    <P>對于精英們來說，這個春節(jié)有點特殊。</p>

    <section>

        <h2> 讀者評論</112>

        <article>

            <footer〉發(fā)布時間

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

            </footer>

            <p>評論內(nèi)容</p>

        </article>

        <article〉[下一則評論]〈/article〉

    </section>

</article>

每條讀者評論都包含在一個article里，這些article元素則嵌套在主article里。