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>
© 版权声明
本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载,仅供学习和研究使用,不得用于任何商业用途,您可以转载分享,但同时需保留原文链接。
THE END
请我喝怡宝