H5新特性之语义化标签
一、为什么要增加新的语义化标签
在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生。
二、何为语义化标签
顾名思义就是标签有自己的含义,一眼看过去就知道该标签内容。更加方便我们开发与维护,和搜索引擎识别我们的页面。
三、标签详解
(一)heard 表示内容合作网页的头部区域。
(二)footer 表示内容或者网页的底部区域。
(三)nav 表示页面的导航,可以通过导航连接到网站的其他页面,或者当前页面的其它部分。
(四)article 表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,更偏向内容的展示。
(五)aside 表示页面内容侧边的区域。
如下图所示:
(六)section 表示类似div,更偏向划分区域。
(七)figure 表示一块独立的内容,类似于div,并且需要注意的是默认自带margin值。
(八)figcaption 表示figure的标题,一般放在figure的第一位或者最后一位。
(九)main 表示主体内容,注意IE浏览器不支持。
(十)hgroup 代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内。
(十一)mark 表示高亮显示,默认背景为黄色,可以更改。
(十二) time 表示标记一篇文章的发布时间。
(十三)dialog 表示类似于微信的对话框,默认自带display:none,定位,边框。
多媒体标签
(十四)video :表示视频 它有很多属性分别是以下几个:
src属性:表示资源路径。
controls属性:表示向用户显示控件。
autoplay属性: 表示自动播放。
loop属性:表示重复播放。
muted属性:表示静音。
poster属性:规定视频正在下载时显示的图像。
(十五)source:用来定义媒介资源,并且浏览器允许有多个,浏览器将使用第一个可识别的格式。
(十六)audio :表示音频,它的属性与video之间只是没有poster属性。
src属性:表示资源路径。
controls属性:表示向用户显示控件。
autoplay属性: 表示自动播放。
oop属性:表示重复播放。
muted属性:表示静音。
注:audio同样也有source标签表示媒介资源。
最后在这个特殊的时期,呼吁大家减少出门,逆战学习!
H5新特性之语义化标签的更多相关文章
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- HTML5之语义化标签
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML 5语义化标签
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML 5的革新之一:语义化标签一节元素标签。
摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...
- HTML 5的革新——语义化标签(一)
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML 5的革新——语义化标签
感谢原文作者:html5jscss 原文链接:http://www.html5jscss.com/html5-semantics-section.html 大佬的下一篇博文:http://www.ht ...
- H5的语义化标签(PS: 后续继续补充)
头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...
随机推荐
- 喜欢B站的用户为何认同感超强?
前几天视频弹幕网站哔哩哔哩(以下简称"B站"),正式登陆纳斯达克,股票代码"BILI".当日其CEOC兼董事长陈睿在B站的账号上传了上市视频. 打开视频,满眼& ...
- [BZOJ 3144][HNOI 2013] 切糕
题目大意 切糕是 (p times q times r) 的长方体,每个点有一个违和感 (v_{x, y, z}).先要水平切开切糕(即对于每个纵轴,切面与其有且只有一个交点),要求水平上相邻两点的切 ...
- A Knight's Journey (DFS)
题目: Background The knight is getting bored of seeing the same black and white squares again and agai ...
- Android App 测试工具及知识大集合
简介: 作者从事测试将近11年,有8年的团队管理经验,经历了上市公司,外包,日企,股份制公司的企业文化洗礼,擅长测试团队的组建,流程建立,改造,质量体系建建设,有三次经历在不同企业文化从"0 ...
- kafka&&kafka-manager部署安装
一.zk集群部署 二.kafka部署安装 1.创建kafka用户和日志路径,(直接执行) groupadd kafka useradd -g kafka kafka mkdir -p /web/kaf ...
- 一个异步访问redis的内存问题
| 分类 redis | 遇到一个redis实例突然内存飙高的案例, 具体症状如下: 客户端使用异步访问模式 单个请求的回包很大,hgetall一个8M的key 由于访问量比较大,已经登录不上red ...
- Oracle中的列转行实现字段拼接用例
文章目录 Oracle中的列转行实现字段拼接 场景 在SQL使用过程中经常有这种需求:将某列字段拼接成in('XX','XX','XX','XX','XX','XX' ...)做为查询条件. 实现 s ...
- springboot利用swagger构建api文档
前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...
- HTTP协议详解(深入理解)
版权声明:本文为CSDN博主「有抱负的小狮子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/weixin_ ...
- Java堆内存是线程共享的!面试官:你确定吗?
Java作为一种面向对象的,跨平台语言,其对象.内存等一直是比较难的知识点,所以,即使是一个Java的初学者,也一定或多或少的对JVM有一些了解.可以说,关于JVM的相关知识,基本是每个Java开发者 ...