重学前端：深入理解aside标签|人间不值得

页面结构

aside标签通常用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。

包裹文章的附属信息部分（article内）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>article_demo</title>
    </head>
    <body>
        <article>
            <header>
                <h1>标题</h1>
                <p>发布日期：<time pubdate="true">2020-03-09</time></p>
            </header>
            <p>此处是正文内容</p>
            <aside>
                <!-- aside在article内部，说明aside的内容是与文章相关的，例如参考文献 -->
                <h1>参考文献</h1>
                <ul>
                    <li>参考小凯哥博客</li>
                </ul>
            </aside>
            <footer>
                <p><small>此处是脚注，例如：PM 小凯哥<xuxinkai.cn>版权所有</small></p>
            </footer>
        </article>
    </body>
</html>

包裹页面全局附属信息（article之外）

这里最常见的形式是网站侧边栏，例如最新评论、广告单元、热门文章推荐等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>article_demo</title>
    </head>
    <body>
        <article>
            <header>
                <h1>标题</h1>
                <p>发布日期：<time pubdate="true">2020-03-09</time></p>
            </header>
            <p>此处是正文内容</p>
            <aside>
                <!-- aside在article内部，说明aside的内容是与文章相关的，例如参考文献 -->
                <h1>参考文献</h1>
                <ul>
                    <li>参考小凯哥博客</li>
                </ul>
            </aside>
            <footer>
                <p><small>此处是脚注，例如：PM 小凯哥<xuxinkai.cn>版权所有</small></p>
            </footer>
        </article>
        <aside>
            <nav>
                <h2>热门文章</h2>
                <ul>
                    <li>产品经理真牛逼</li>
                    <li>前端真厉害</li>
                    <li>程序员真辛苦</li>
                </ul>
            </nav>
        </aside>
    </body>
</html>

本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载，仅供学习和研究使用，不得用于任何商业用途，您可以转载分享，但同时需保留原文链接。

THE END