说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发。

  HTML5为我们提供了一系列的语义标签。

  1、<section></section>

    定义文档中的主体部分的节、段。

  2、<article></article>

    一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。

  3、<aside></aside>

    用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。

  4、<header></header>

    定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

  5、<footer></footer>

    定义了文档、页面的页脚,和header类似。

  6、<nav></nav>

    定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

  7、<hgroup></hgroup>

    用于对网页或区段(section)的标题元素(h1~h6)进行组合。

  8、<figure></figure>

    用于对元素进行组合。

  9、<figcaption></figcaption>

    为figure元素加标题。一般放在figure第一个子元素或者最后一个。

  10、<details></details>

    定义元素的细节,用户可以点击查看或者隐藏。

  11、<summary></summary>

    和details连用,用来包含details的标题。

  12、<canvas></canvas>

    用来进行canvas绘图。

  13、<video></video>

    定义视频。

  14、<audio></audio>

    定义音频。

  15、<embed></embed>

    定义嵌入网页的内容。比如插件。

  16、<source></source>

    该标签为媒介元素(比如video、audio)定义媒介元素。

  17、<datalist id='dl'></datalist>

    定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

  18、<mark></mark>

    在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

  19、<meter [min/max/low/high/optimum/value]></meter>

    度量衡,用红黄绿表示出一个数值所在范围。

  20、<output></output>

    定义不同类型的输出,样式与span无异。

  21、<progress></progress>

    进度条,运行中的进度。

  22、<time></time>

    定义日期或者时间。

  23、<keygen></keygen>

    定义加密内容。

  24、<command></command>

    定义命令行为。

HTML5 十大新特性(一)——语义标签的更多相关文章

  1. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  2. HTML5 十大新特性(三)——视频和音频

    一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...

  3. HTML5 十大新特性(十)——Web Socket

    webSocket是H5新加的一个协议,为了解决http协议的request.response一一对应和它自身的被动性,以及ajax轮询等问题.一方可以发送多条信息,连接不中断,永久连接,但也导致了服 ...

  4. HTML5 十大新特性(七)——拖放API

    拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲. 一.拖动的源对象(source)可以触发的事件 dragstart:拖动开始 drag:拖动进行中 dragend:拖动结束 ...

  5. HTML5 十大新特性(五)——SVG绘图

    相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...

  6. HTML5 十大新特性(四)——Canvas绘图

    H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

  7. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

  8. HTML5 十大新特性(八)——Web Worker

    由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作. 那么如何创建一个子线程呢?通过这 ...

  9. HTML5 十大新特性(六)——地理定位

    简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...

随机推荐

  1. HTML5实现下载文件且指定下载文件名

    <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载</a> ...

  2. 使用Xcode6和IOS8SDK以后遇到的问题

    定位.苹果在IOS8里面修改了定位授权协议,也就意味着你原来的app在ios8上很可能无法定位.目前最好的办法就是在app启动的时候调用IOS8的定位授权API来获取用户的授权,这样就不要在其他地方做 ...

  3. Windows平台配置免安装的MySQL

    1.下载 官网下载免安装文件(本文使用的是mysql-5.6.33-win32.zip)解压到E:\MySQL\mysql-5.6.33打开E:\MySQL\mysql-5.6.33\my-defau ...

  4. The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....

    遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....,查找的 ...

  5. JS按回车键实现登录的方法

    本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ...

  6. 15. 星际争霸之php设计模式--策略模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  7. RobotFrameWork WebService Soap接口测试 (一)

    在做完基于http协议的接口测试之后,开始弄soap协议了,之前有过开发java webservice自动化框架的经验,所以我想着应该并不会很难.对于webservice的简介,服务器端和客户端的开发 ...

  8. 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本

    <zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本      人脸识别.车牌识别是opencv当中 ...

  9. [3] 智能指针std::auto_ptr

    [1]std::auto_ptr 对于编译器来说,智能指针实质是一个栈对象,而并非指针类型. 智能指针通过构造函数获取堆内存的管理所有权,而在其生命期结束时,再通过析构函数释放由它所管理的堆内存. 所 ...

  10. [attribute=value] 匹配给定的属性是某个特定值的元素

    描述: 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: <input type="checkbox" name="news ...