H5新增特性之语义化标签

H5新增特性之语义化标签

 

　　语义化标签顾名思义标签有自己的含义，浏览器或者程序员一看就知道是什么。在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

 

一、根据页面的结构。

　　section元素 表示页面中的一个区块

　　article元素 表示一块与上下文无关的独立的内容

　　aside元素 在article之外的，与article内容相关的辅助信息 

　　header元素 表示页面中一个内容区块或整个页面的标题

　　footer元素 表示页面中一个内容区块或整个页面的脚注

　　nav元素 表示页面中导航链接部分

　　hgroup标题的一个分组

 

 

 

 

 

 

 

 

 

 

二、媒体元素组合

      

　　figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

　　　　<figure>和 <figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。

　　embed 标记定义外部的可交互的内容或插件 比如flash 

 

 

三、time时间

　　<time>标签，专门用来表示时间

 

四、文档内容

　　mark定义高亮显示的文本(span)

　　　　<mark> 标签，定义带有记号的文本。在需要突出显示文本时使用 该 标签，默认加黄色背景。

　　main元素 表示页面中的主要的内容(ie不兼容)

　　dialog标记定义一个对话框(会话框)类似微信 

 

 

 

 

 

注意：语义化标签只是标签的语义化，和div使用地方法并没有多大区别，只是在使用的过程中省去了一些命名的麻烦。在家逆战学习努力成就更好的自己！！！

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

 

原文链接:https://www.cnblogs.com/moluxi/p/12382732.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有