说语义标签前先来理解下什么叫语义化,当下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. schtasks在win7下提示错误:无法加载列资源

    转自: http://blog.chinaunix.net/uid-24946452-id-2887851.html 查看cmd 编码 chcp 如使用 936中文GBK编码的话 schtasks.e ...

  2. c#创建、安装、卸载、调试windows服务的简单事例

    最近工作中用到了windows服务,对其有深刻理解和丰富经验谈不上,本篇文章只是简单陈诉用c#创建.安装.卸载.调试windows服务的步骤. 一.创建windows服务 1.用VS创建windows ...

  3. PythonDay02

    >三目运算符 简单的if---else---语句 result = 1234 if 1 > 2 else 4321 print(result) >集合 set集合,是一个无序且不重复 ...

  4. Java基础之在窗口中绘图——填充星型(StarApplet 2 filled stars)

    Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.GeneralPath; @SuppressWarnin ...

  5. Java:并行编程及同步使用方法

    知道java可以使用java.util.concurrent包下的 CountDownLatch ExecutorService Future Callable 实现并行编程,并在并行线程同步时,用起 ...

  6. Leetcode: Pacific Atlantic Water Flow

    Given an m x n matrix of non-negative integers representing the height of each unit cell in a contin ...

  7. oauth协议

    微博 : 新浪 腾讯 OAuth 新浪微博   APP开发 步骤:1.注册新浪开发者账号 获取以下信息 client_id  123456  标示应用身份的  唯一的  有的也叫App Key sec ...

  8. 如何关闭windows电脑的开机自启程序

    很多时候我们打开电脑会发现,莫名其妙的出现一些已经在运行的程序了,这都是一些开机自启的软件之类的.可能你的电脑配置本来就不怎么高,开机还这样,那估计会很卡顿,那有什么方法可以关闭这些开机自动启动的程序 ...

  9. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数003·contour,轮廓处理

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数003·contour,轮廓处理 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替 ...

  10. 智能家居常用WiFi模块

    WiFi模块 WiFi模块就是整个系统的控制中心,控制很简单,就是输出一个开关信号控制继电器,而这个模块的核心是WiFi的连接,手机连接WiFi时需要扫描,输入密码,而这类本身没有屏幕和键盘的硬件设备 ...