![Vue 3移动Web开发与性能调优实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/918/52842918/b_52842918.jpg)
上QQ阅读APP看书,第一时间看更新
2.6 <aside>标签
HTML 5的<aside>标签用来表示与当前页面内容相关的部分内容,通常用于显示侧边栏或者补充的内容,如目录、索引等。在一些场景下,可以将它理解成一个侧边的导航栏,如图2-3所示。
![](https://epubservercos.yuewen.com/8C3DBE/31398717004278106/epubprivate/OEBPS/Images/Figure-P23_2751.jpg?sign=1738820421-MiPY8M9yvxC84d2uAl6ShjqnaRMaXw0G-0-87e351491af9d081bbc2bb3a35c91663)
图2-3 <aside>侧边栏
如果采用<aside>标签来实现侧边栏,与一般的<div>标签在样式上没有区别,如示例代码2-6-1所示。
示例代码2-6-1 <aside>标签
![](https://epubservercos.yuewen.com/8C3DBE/31398717004278106/epubprivate/OEBPS/Images/Figure-P24_56931.jpg?sign=1738820421-LOlV8W9Yl7Zx7pTTAc6lnDcXjUpBX3hr-0-f4b3efe446e7c9415dd539c93e557050)
<aside>标签也可以作为<section>标签中独立模块的一部分,用来表示主要内容的附属信息,其中的内容可以是与当前文章有关的资料、名词解释等,如示例代码2-6-2所示。
示例代码2-6-2 <aside>标签和<section>标签
![](https://epubservercos.yuewen.com/8C3DBE/31398717004278106/epubprivate/OEBPS/Images/Figure-P24_56932.jpg?sign=1738820421-86MlYQt5mb1LbBn6om6X3oteSJdaLOOq-0-3a0c018ebbf040f91502987ddeef2b81)
下面总结一下<aside>标签的使用场景和规范:
· <aside>标签就像它的名字一样,在页面的一侧,其中的内容可以是友情链接、博客中的其他文章列表、广告单元等。
· <aside>标签也可以和<section>标签搭配使用,作为单个独立模块的附加信息来显示。