重学前端:深入理解aside标签

页面结构

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

包裹文章的附属信息部分(article内)

放在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>
© 版权声明
THE END
请我喝怡宝
点赞1
分享
评论 共1条
    • 人间不值得
    • canlibahis.top0

      Hey very nice blog!

      42天前回复