HTML5 定義文章塊

    ■知識(shí)點(diǎn)

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

    ■實(shí)例設(shè)計(jì)

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

<header role="banner">

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

</header>

<main role="main">

    <article>

        <hl id="news">區(qū)塊鏈“時(shí)代號(hào)”列車(chē)駛來(lái)</h1>

        <p>對(duì)于精英們來(lái)說(shuō)，這個(gè)春節(jié)有點(diǎn)特殊。</p>

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

        <h2 id="subl">l.三點(diǎn)鐘無(wú)眠</h2>

        <p><img src="images/0001. jpg" width="200" />春節(jié)期間，一個(gè)大姥云集的區(qū)塊鏈群建立，因?yàn)橛胁涛膭?、薛蠻子、徐小平等人的參與，群被封上了 “市值萬(wàn)億”。這個(gè)名為“三點(diǎn)鐘無(wú)眠區(qū)塊鏈”的群，攪動(dòng)了一池春水。</p>

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

        <p>...</p>

    </article>

</main>

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

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

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

    <article>

    <hl id="news">區(qū)塊鏈“時(shí)代號(hào)”列車(chē)駛來(lái)</hl>

    <P>對(duì)于精英們來(lái)說(shuō)，這個(gè)春節(jié)有點(diǎn)特殊。</P>

    <!--文章的頁(yè)腳，并非頁(yè)面級(jí)的頁(yè)腳 -->

    <footer>

        <p>出處說(shuō)明</p>

        <address>

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

        </address>

    </footer>

</article>

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

<article>

    <hl id="news">區(qū)塊鏈“時(shí)代號(hào)”列車(chē)駛來(lái)</hl>

    <P>對(duì)于精英們來(lái)說(shuō)，這個(gè)春節(jié)有點(diǎn)特殊。</p>

    <section>

        <h2> 讀者評(píng)論</112>

        <article>

            <footer〉發(fā)布時(shí)間

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

            </footer>

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

        </article>

        <article〉[下一則評(píng)論]〈/article〉

    </section>

</article>

每條讀者評(píng)論都包含在一個(gè)article里，這些article元素則嵌套在主article里。