HTML5 定義附欄

    ■知識點(diǎn)

    aside表示附欄，用來標(biāo)識所處內(nèi)容之外的內(nèi)容。aside內(nèi)容應(yīng)該與所處的附近內(nèi)容相關(guān)。例如，當(dāng)前頁面或文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分。 

    aside元素主要有以下兩種用法。

    作為主體內(nèi)容的附屬信息部分，包含在article中，aside內(nèi)容可以是與當(dāng)前內(nèi)容有關(guān)的參考資料、名詞解釋等。

    作為頁面或站點(diǎn)輔助功能部分，在article之外使用。最典型的形式是側(cè)邊欄，其中的內(nèi)容可以 是友情鏈接，最新文章列表、最新評論列表、歷史存檔、日歷等。

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

【示例1】下面的示例設(shè)計(jì)一篇文章，文章標(biāo)題放在header中，在header后面將所有關(guān)于文章的部分放在了一個(gè)article中，將文章正文放在一個(gè)p元素中。該文章包含一個(gè)名詞注釋的附屬部分，因此在正文下面放置了一個(gè)aside元素，用來存放名詞解釋的內(nèi)容。

<header〉

    <hl>HTML5</hl>

</header>

<article>

    <hl>HTML5歷史</hl>

    <p>HTML5草案的前身名為Web Applications 1.0，于2004年被WHATWG提出，于2007年被 W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。HTML5的第一份正式草案已于2008年1月22日公布。2014 年10月28日，W3C的HTML工作組正式發(fā)布了HTML5的官方推薦標(biāo)準(zhǔn)。</p>

    <aside>

        <hl>名詞解釋</hl>

        <dl>

            <dt>WHATWG</dt>

            <dd>Web Hypertext Application Technology Working Group, HTML 工作開發(fā) 組的簡稱，目前與W3C組織同時(shí)研發(fā)HTML5。</dd>

        </dl>

        <dl>

            <dt>W3C</dt>

            <dd>World Wide Web Consortium,萬維網(wǎng)聯(lián)盟，萬維網(wǎng)聯(lián)盟是國際著名的標(biāo)準(zhǔn)化組織。1994年成立后，至今己發(fā)布近百項(xiàng)相關(guān)萬維網(wǎng)的標(biāo)準(zhǔn)，對萬維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。</dd>

        </dl>

    </aside>

</article>

這個(gè)aside被放置在一個(gè)article內(nèi)部，因此引擎將這個(gè)aside內(nèi)容理解為是與article內(nèi)容相關(guān)聯(lián)的。 

【示例2】下面的代碼使用aside元素為個(gè)人博客添加一個(gè)友情鏈接的輔助版塊。

<aside>

    <nav>

        <h2> 友情鏈接</h2>

        <ul>

            <li> <a href="#">網(wǎng)站 l</a></li>

            <li> <a href="#">網(wǎng)站 2</a></li>

            <li> <a href="#">網(wǎng)站 3</a></li>

        </ul>

    </nav>

</aside>

    友情鏈接在博客網(wǎng)站中比較常見，一般放在左右兩側(cè)的邊欄中，因此可以使用aside來實(shí)現(xiàn)，但是這個(gè)版塊又具有導(dǎo)航作用，因此嵌套了一個(gè)nav元素，該側(cè)邊欄的標(biāo)題是“友情鏈接”，放在了h2元素中，在標(biāo)題之后使用了一個(gè)ul列表，用來存放具體的導(dǎo)航鏈接列表。