html5知识点补充—aside元素的使用

2024年5月10日 179次阅读 来源: 两仪

使用aside标记创建侧边栏

aside标记表示跟周围内容紧密关联的一组内容，比如热门文章列表、博文分类、最近评论。这种内容与主页内容相关，但又与它相独立存在。

在当今的Web开发中，侧边栏在页面中可谓是随处可见。侧边栏并不代表它的位置一定是在网页的两边，而是它经常包括如相关链接和分类列表等内容。要想正确地使用aside，取决于它的放置位置。如果放置在article中，aside内容必须与article内容紧密关联，比如词汇表。如果放置在article或者section之外，则它的内容应该是与整个页面相关的，如相关链接、网站所有者的微博列表或广告。

<body>
    <article>
        <header>
            <h1>10 things about HTML5</h1>

            <p><strong>This is test txt... ...</strong></p>
        </header>
    </article>
    <aside>
        <h2>Related links</h2>
        <nav>
            <ul>
                <li>10 things about HTML4</li>
                <li>10 things about CSS3</li>
                <li>10 things about JavaScript</li>
            </ul>
        </nav>
    </aside>
</body>

也可以将aside嵌套在article之类的其他元素中。我们对前面的例子进行拓展，可以为用户提供涵盖各种短语或者用户不熟悉内容的词汇表。

<body>
    <article>
        <header>
            <h1>10 things about HTML5</h1>

            <p><strong>This is test txt... ...</strong></p>
        </header>
        <aside>
            <h2>Glossary</h2>
            <p>We have probably used lots of acronyms and abbreviations on this page</p>
        </aside>
    </article>
</body>
    原文作者：两仪
    原文地址: https://segmentfault.com/a/1190000003494142
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞