HTML5 十大新特性(一)——语义标签
说语义标签前先来理解下什么叫语义化,当下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 十大新特性(一)——语义标签的更多相关文章
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- HTML5 十大新特性(三)——视频和音频
一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...
- HTML5 十大新特性(十)——Web Socket
webSocket是H5新加的一个协议,为了解决http协议的request.response一一对应和它自身的被动性,以及ajax轮询等问题.一方可以发送多条信息,连接不中断,永久连接,但也导致了服 ...
- HTML5 十大新特性(七)——拖放API
拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲. 一.拖动的源对象(source)可以触发的事件 dragstart:拖动开始 drag:拖动进行中 dragend:拖动结束 ...
- HTML5 十大新特性(五)——SVG绘图
相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...
- HTML5 十大新特性(四)——Canvas绘图
H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...
- HTML5 十大新特性(九)——Web Storage
H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...
- HTML5 十大新特性(八)——Web Worker
由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作. 那么如何创建一个子线程呢?通过这 ...
- HTML5 十大新特性(六)——地理定位
简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...
随机推荐
- HTML5实现下载文件且指定下载文件名
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载</a> ...
- 使用Xcode6和IOS8SDK以后遇到的问题
定位.苹果在IOS8里面修改了定位授权协议,也就意味着你原来的app在ios8上很可能无法定位.目前最好的办法就是在app启动的时候调用IOS8的定位授权API来获取用户的授权,这样就不要在其他地方做 ...
- Windows平台配置免安装的MySQL
1.下载 官网下载免安装文件(本文使用的是mysql-5.6.33-win32.zip)解压到E:\MySQL\mysql-5.6.33打开E:\MySQL\mysql-5.6.33\my-defau ...
- 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错误.....,查找的 ...
- JS按回车键实现登录的方法
本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ...
- 15. 星际争霸之php设计模式--策略模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- RobotFrameWork WebService Soap接口测试 (一)
在做完基于http协议的接口测试之后,开始弄soap协议了,之前有过开发java webservice自动化框架的经验,所以我想着应该并不会很难.对于webservice的简介,服务器端和客户端的开发 ...
- 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本
<zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本 人脸识别.车牌识别是opencv当中 ...
- [3] 智能指针std::auto_ptr
[1]std::auto_ptr 对于编译器来说,智能指针实质是一个栈对象,而并非指针类型. 智能指针通过构造函数获取堆内存的管理所有权,而在其生命期结束时,再通过析构函数释放由它所管理的堆内存. 所 ...
- [attribute=value] 匹配给定的属性是某个特定值的元素
描述: 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: <input type="checkbox" name="news ...