aside元素用来定义当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。

  aside元素的用法主要分为两种。

  ● 被包含在article元素内作为主要内容的附属信息。

  ● 在article元素之外使用,作为页面或站点全局的附属信息部分。最常用的使用形式是侧边栏,其中的内容可以是友情链接、广告单元等。

  下面通过一个案例对aside元素的用法进行演示,如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aside元素的使用</title>
</head>
<body>
<article>
<header>
<h1>标题</h1>
</header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
</html>

  上面案例中定义了两个aside元素,其中第1个aside元素位于article元素中,用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。

效果如下图所示

Html5 aside标签的用法和作用相关推荐

  1. Html中meta标签的用法和作用

    mate标签的用法和作用: meta标签一般用于网页中的<head>与</head>之间,meta标签的种类有很多.在我们网页设计中用的比 较多的有keywords,descr ...

  2. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...

  3. [html] html5中的meta标签renderer有什么作用?

    [html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...

  4. [html] html5中的meta标签robots有什么作用?

    [html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...

  5. html中mark标记,html5 mark标签是什么意思?html5 mark标签的作用又是什么?

    本篇文章为大家介绍的是html5中的mark标签,文中介绍了包括html5 mark标签中的定义和使用的一些说明,还有,关于html5 mark标签的一些作用和实例代码,mark标签使用简单,就是使文 ...

  6. html5中footer元素的作用,html5 footer标签怎么用?footer标签的用法实例

    本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧 首先我们先看 ...

  7. html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)

    点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1.  声明的变化 2.  指定字符编码的变化,html5中建议使用utf-8 3.  Html5中允许 没有 ...

  8. 20 Java程序员面试宝典视频课程之HTML5新标签、功能

    一.HTML5认识?(是什么,为什么) 答: 1.HTML5指的是包括 HTML . CSS 和 JavaScript 在内的一套技术组合. 2.HTML4陈旧不能满足日益发展的互联网需要,特别是移动 ...

  9. HTML5 Audio标签方法和函数API介绍

     问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...

最新文章

  1. C/C++学习之路: 多态
  2. elk 聚合日志_使用ELK堆栈进行日志聚合
  3. 对于boost锁机制结论性的介绍
  4. 复习Collection_迭代器使用细节_泛型_综合案例
  5. tensor也可以作为索引
  6. 计算机初级包括php吗,计算机的基本组成包括什么
  7. linux中设备文件的主要内容包括什么,LINUX期末考试复习题.doc
  8. 材价看板(1)- 如何建立你的第一个kanban,看看这些暴露的问题你们有没有?...
  9. 最近给公司写的it规范,有经验的朋友给点意见
  10. [转]架构蓝图--软件架构 4+1 视图模型
  11. MacOS系统下matplotlib中SimHei中文字体缺失报错的解决办法
  12. 全球与中国塑料树脂市场深度分析及发展研究预测报告
  13. 亚商策略会|闪马智能乘势“价值重构”,分享智慧城市建设新思路
  14. 服务器系统2008r2企业版补丁,windows2008R2服务器更新补丁
  15. Meet Hadoop
  16. 数据系统架构-5.实时离线统计系统
  17. esim工业路由器,爱陆通4G工业路由器5G工业路由器全网通工业路由器
  18. Android 学习笔记(十二):安卓中的事件分发机制
  19. Codeforces 1324D(红黑树+求指定区间中大于指定值的个数)
  20. Caffeine Cache和Ehcache3.x 进程缓存性能比较

热门文章

  1. RPC-client异步收发核心细节?
  2. 6.1.1 验证注解的使用
  3. Console-算法[if,while]-一输入两个正整数m和n,求其最大公约数和最小公倍数
  4. 路由器配置实践 教你如何在Linux中三台主机两个网段互相通信
  5. 使用HTML5监測站点性能
  6. Mybatis插件原理和PageHelper结合实战分页插件(七)
  7. ionic + cordova+angularJs 搭建的H5 App完整版总结
  8. POJ2796 Feel Good(单调栈)
  9. Velocity 入门(一)
  10. strom.yaml配置