![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=1739135604-01WiT8RLZDDvmz65OPdR7MmYaiwpvYLA-0-ea311fbce164ef4f14cdb089ab8351ac)
图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=1739135604-bIhGhWceXpvt2ukiHtl9fvib71sQRoUz-0-4c808cbe87c0e09ed943ee9a76661d61)
<aside>标签也可以作为<section>标签中独立模块的一部分,用来表示主要内容的附属信息,其中的内容可以是与当前文章有关的资料、名词解释等,如示例代码2-6-2所示。
示例代码2-6-2 <aside>标签和<section>标签
![](https://epubservercos.yuewen.com/8C3DBE/31398717004278106/epubprivate/OEBPS/Images/Figure-P24_56932.jpg?sign=1739135604-qcHfzod1PX8Vk2dFyWiz169cZ1fJULst-0-548b764be3118bf30680c8fb4520a92b)
下面总结一下<aside>标签的使用场景和规范:
· <aside>标签就像它的名字一样,在页面的一侧,其中的内容可以是友情链接、博客中的其他文章列表、广告单元等。
· <aside>标签也可以和<section>标签搭配使用,作为单个独立模块的附加信息来显示。