Html5 aside標簽的用法和作用

更新時間:2021-03-24 來源:黑馬程序員瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

aside元素用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等其他類似的有別于主要內容的部分。

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

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

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

下面通過一個案例對aside元素的用法進行演示，如下所示。

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

上面案例中定義了兩個aside元素，其中第1個aside元素位于article元素中，用于添加文章的其他相關信息。第2個aside元素用于存放頁面的側邊欄內容。

效果如下圖所示

1616578655558_aside元素.jpg