《HTML 5与CSS 3 权威指南（第4版·上册）》 —3.1.4 aside元素
【摘要】 本节书摘来自华章计算机《HTML 5与CSS 3 权威指南（第4版·上册）》一书中第3章，第3.1.4节，作者是陆凌牛。
3.1.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
这部分代码如代码清单3-8所示。
代码清单3-8 文章内部的aside元素示例
程序运行结果如图3-1所示。
图3-1 aside元素示例
这是笔者博客网页中的一篇文章，网页的标题放在header元素中，在header元素的后面将所有关于文章的部分放在一个article元素中，将文章的正文部分放在一个p元素中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在p元素的下部又放置了一个aside元素，用来存放名词解释部分的内容。
2）在article之外元素使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。
下面这个示例为标准博客网页中一个侧边栏的示例，示例中的“IT新技术”为博客的名称，如代码清单3-9所示。
代码清单3-9 侧边栏示例
如果对这部分也加上CSS样式，在浏览器中的显示效果如图3-2所示。
该示例为一个典型的博客网站中的侧边栏部分，因此被放在aside元素中，但是该侧边栏又具有导航的作用，因此被放置在nav元素中，该侧边栏的标题是“评论”，被放在h2元素中，在标题之后使用一个ul列表，用来存放具体的导航链接。
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）