首頁(yè)技術(shù)文章正文

Html5 aside標(biāo)簽的用法和作用

更新時(shí)間:2021-03-24 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


aside元素用來(lái)定義當(dāng)前頁(yè)面或者文章的附屬信息部分,它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。

aside元素的用法主要分為兩種。

● 被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。

● 在article元素之外使用,作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最常用的使用形式是側(cè)邊欄,其中的內(nèi)容可以是友情鏈接、廣告單元等。

下面通過(guò)一個(gè)案例對(duì)aside元素的用法進(jìn)行演示,如下所示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>aside元素的使用</title>
    </head>
    <body>
        <article>
            <header>
                <h1>標(biāo)題</h1>
            </header>
            <section>文章主要內(nèi)容</section>
            <aside>其他相關(guān)文章</aside>
        </article>
        <aside>右側(cè)菜單</aside>
    </body>
</html>

上面案例中定義了兩個(gè)aside元素,其中第1個(gè)aside元素位于article元素中,用于添加文章的其他相關(guān)信息。第2個(gè)aside元素用于存放頁(yè)面的側(cè)邊欄內(nèi)容。

效果如下圖所示

1616578655558_aside元素.jpg


猜你喜歡:

什么是HTML語(yǔ)義化?HTML語(yǔ)義化有哪些好處?

HTML5中figure標(biāo)簽的作用

HTML入門(mén)之 a 標(biāo)簽

Html5是什么?HTML5的發(fā)展歷程介紹

黑馬程序員HTML&JS+前端課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!