Html5 aside标签的用法和作用
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标签的用法和作用相关推荐
- Html中meta标签的用法和作用
mate标签的用法和作用: meta标签一般用于网页中的<head>与</head>之间,meta标签的种类有很多.在我们网页设计中用的比 较多的有keywords,descr ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
- [html] html5中的meta标签renderer有什么作用?
[html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
- [html] html5中的meta标签robots有什么作用?
[html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
- html中mark标记,html5 mark标签是什么意思?html5 mark标签的作用又是什么?
本篇文章为大家介绍的是html5中的mark标签,文中介绍了包括html5 mark标签中的定义和使用的一些说明,还有,关于html5 mark标签的一些作用和实例代码,mark标签使用简单,就是使文 ...
- html5中footer元素的作用,html5 footer标签怎么用?footer标签的用法实例
本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧 首先我们先看 ...
- html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许 没有 ...
- 20 Java程序员面试宝典视频课程之HTML5新标签、功能
一.HTML5认识?(是什么,为什么) 答: 1.HTML5指的是包括 HTML . CSS 和 JavaScript 在内的一套技术组合. 2.HTML4陈旧不能满足日益发展的互联网需要,特别是移动 ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
最新文章
- C/C++学习之路: 多态
- elk 聚合日志_使用ELK堆栈进行日志聚合
- 对于boost锁机制结论性的介绍
- 复习Collection_迭代器使用细节_泛型_综合案例
- tensor也可以作为索引
- 计算机初级包括php吗,计算机的基本组成包括什么
- linux中设备文件的主要内容包括什么,LINUX期末考试复习题.doc
- 材价看板(1)- 如何建立你的第一个kanban,看看这些暴露的问题你们有没有?...
- 最近给公司写的it规范,有经验的朋友给点意见
- [转]架构蓝图--软件架构 4+1 视图模型
- MacOS系统下matplotlib中SimHei中文字体缺失报错的解决办法
- 全球与中国塑料树脂市场深度分析及发展研究预测报告
- 亚商策略会|闪马智能乘势“价值重构”,分享智慧城市建设新思路
- 服务器系统2008r2企业版补丁,windows2008R2服务器更新补丁
- Meet Hadoop
- 数据系统架构-5.实时离线统计系统
- esim工业路由器,爱陆通4G工业路由器5G工业路由器全网通工业路由器
- Android 学习笔记(十二):安卓中的事件分发机制
- Codeforces 1324D(红黑树+求指定区间中大于指定值的个数)
- Caffeine Cache和Ehcache3.x 进程缓存性能比较
热门文章
- RPC-client异步收发核心细节?
- 6.1.1 验证注解的使用
- Console-算法[if,while]-一输入两个正整数m和n,求其最大公约数和最小公倍数
- 路由器配置实践 教你如何在Linux中三台主机两个网段互相通信
- 使用HTML5监測站点性能
- Mybatis插件原理和PageHelper结合实战分页插件(七)
- ionic + cordova+angularJs 搭建的H5 App完整版总结
- POJ2796 Feel Good(单调栈)
- Velocity 入门(一)
- strom.yaml配置