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

凯哥 2020-03-10 05:49:30 2613℃ 0条

页面结构

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>
标签: HTML, CSS

非特殊说明,本博所有文章均为博主原创。

评论啦~