页面结构

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>
最后修改日期:2020-03-12

留言

Thank you for the auspicious writeup. It in fact was a amusement account it.
Look advanced to far added agreeable from
you! By the way, how can we communicate?

My brother suggested I might like this web site.
He was entirely right. This post truly made my
day. You cann’t imagine simply how much time I had spent for this
info! Thanks!

I’m amazed, I have to admit. Rarely do I encounter a blog that’s both educative and entertaining, and without
a doubt, you have hit the nail on the head. The issue is something that not enough men and women are speaking
intelligently about. I am very happy I came across this during my search for something regarding this.

What’s up to every one, it’s actually a
nice for me to pay a quick visit this website, it contains helpful Information.

Hey! Someone in my Facebook group shared this site
with us so I came to take a look. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my
followers! Superb blog and brilliant style and design.

Stop by my site – Royal CBD

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。