H5新增特性之语义化标签

2020-02-29 16:00:48来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浏览器中常见的html语义化标签

下一篇:less使用小结