一、为什么要增加新的语义化标签

在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新特性之语义化标签的更多相关文章

  1. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  2. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  3. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  4. HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  5. HTML 5语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  6. HTML 5的革新之一:语义化标签一节元素标签。

    摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...

  7. HTML 5的革新——语义化标签(一)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  8. HTML 5的革新——语义化标签

    感谢原文作者:html5jscss 原文链接:http://www.html5jscss.com/html5-semantics-section.html 大佬的下一篇博文:http://www.ht ...

  9. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

随机推荐

  1. 喜欢B站的用户为何认同感超强?

    前几天视频弹幕网站哔哩哔哩(以下简称"B站"),正式登陆纳斯达克,股票代码"BILI".当日其CEOC兼董事长陈睿在B站的账号上传了上市视频. 打开视频,满眼& ...

  2. [BZOJ 3144][HNOI 2013] 切糕

    题目大意 切糕是 (p times q times r) 的长方体,每个点有一个违和感 (v_{x, y, z}).先要水平切开切糕(即对于每个纵轴,切面与其有且只有一个交点),要求水平上相邻两点的切 ...

  3. A Knight's Journey (DFS)

    题目: Background The knight is getting bored of seeing the same black and white squares again and agai ...

  4. Android App 测试工具及知识大集合

    简介: 作者从事测试将近11年,有8年的团队管理经验,经历了上市公司,外包,日企,股份制公司的企业文化洗礼,擅长测试团队的组建,流程建立,改造,质量体系建建设,有三次经历在不同企业文化从"0 ...

  5. kafka&&kafka-manager部署安装

    一.zk集群部署 二.kafka部署安装 1.创建kafka用户和日志路径,(直接执行) groupadd kafka useradd -g kafka kafka mkdir -p /web/kaf ...

  6. 一个异步访问redis的内存问题

    | 分类 redis  | 遇到一个redis实例突然内存飙高的案例, 具体症状如下: 客户端使用异步访问模式 单个请求的回包很大,hgetall一个8M的key 由于访问量比较大,已经登录不上red ...

  7. Oracle中的列转行实现字段拼接用例

    文章目录 Oracle中的列转行实现字段拼接 场景 在SQL使用过程中经常有这种需求:将某列字段拼接成in('XX','XX','XX','XX','XX','XX' ...)做为查询条件. 实现 s ...

  8. springboot利用swagger构建api文档

    前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...

  9. HTTP协议详解(深入理解)

    版权声明:本文为CSDN博主「有抱负的小狮子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/weixin_ ...

  10. Java堆内存是线程共享的!面试官:你确定吗?

    Java作为一种面向对象的,跨平台语言,其对象.内存等一直是比较难的知识点,所以,即使是一个Java的初学者,也一定或多或少的对JVM有一些了解.可以说,关于JVM的相关知识,基本是每个Java开发者 ...