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配合使用()可制作输入值的下拉列表。

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>

定义命令行为。

（二）、表单新特性

   10个input的type值

1、email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口。

2、url：地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。

3、number：数字输入域。(可设置min、max、step)

4、tel：电话号码输入域，在手机浏览器中弹出数字输入域。

5、search：搜索输入域，在手机浏览器右下角呈现搜索按键。

6、range：范围选择控件。

7、color：颜色选择控件。

8、date/month/week：时间选择控件。

11个表单元素新属性

1、autocomplete：自动补全，是否自动记录之前提交的数据，以用于下一次输入建议。

2、placeholder：占位符，用于在输入框中显示提示性文字，与value不同，不能被提交。

3、autofocus：自动获得输入焦点。

4、multiple：是否允许多个输入值，若声明该属性，那么输入框中允许输入多个用逗号隔开的值。

5、form：值为某个表单的id，若设置，则该输入域可放在该表单外面。

6、：在表单提交时会验证是否有输入，没有则弹出提示消息。

7、maxlength：限制最大长度，只有在有输入的情况下才有用，不区分中英文。

7.5、minlength：限制最小长度，但它不是H5标准属性，仅部分浏览器支持。

8、min：限定输入数字的最小值。

9、max：限定输入数字的最大值。

10、step：限定输入数字的步长，与min连用。

11、pattern：指定一个正则表达式，对输入进行验证。(正则默认首尾加^$)

（三）、视频和音频

   1、视频(video)

H5新加了video标签，用来播放视频，默认为一个300*150的inline-block。

2、音频(audio)

H5新加了audio标签，用来播放音频，默认为一个300*30并且display为none的inline-block(除非有controls属性)。但手机ios系统中的safari浏览器不支持这个标签，其余的都支持。

3、下面列举一些video、audio对象共有的一些成员：

src：指定要播放的资源路径。

autoplay：是否自动播放。

controls：是否显示播放控件。

currentTime：当前播放的时间点。

duration：总时长(s)。

ended：是否结束。

loop：是否循环播放。

muted：是否静音。

volume：音量设置(0~1)。

paused：是否在播放。

preload：指定视频预加载方案。

play()：播放。

pause()：暂停。

onplay：开始播放事件。

onpause：开始暂停事件。

onplaying：正在播放中事件。

（四）、Canvas绘图

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

一、获得‘画笔’对象，canvas所有的任务都需要它来执行

var ctx=canvas.getContext(‘2d’);

二、一些canvas常用的属性

fillStyle：填充样式

strokeStyle：描边样式

lineWidth：描边宽度

font：绘制文本所用的字体大小和类型

textBaseline：文本对其的基线

shadowOffsetX、shadowOffsetY：阴影偏移量

三、使用canvas绘制图形

1、绘制矩形

ctx.fillRect(x,y,w,h)：填充一个矩形

ctx.strokeRect(x,y,w,h)：描边一个矩形

ctx.clearRect(x,y,w,h)：清除一个矩形范围内的内容

2、绘制文本

ctx.fillText(txt,x,y)填充文本

ctx.strokeText(txt,x,y)描边文本

ctx.measureText(txt)测量

*要注意的是文本的定位点默认在文本基线(alphabetic)的起始点！

3、为图形文字添加阴影

例：ctx.shadowColor=’#000’;//颜色

ctx.shadowOffsetX=8;//水平偏移量

ctx.shadowOffsetY=8;//垂直偏移量

ctx.shadowBlur=10;//模糊半径

4、在绘图时使用渐变色

ctx.createLinearGradient(x1,y1,x2,y2)：创建线性渐变对象

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：创建径向渐变对象

ctx.addColorStop：添加颜色点

5、绘制路径

ctx.beginPath()：开始路径

ctx.closePath()：结束路径

ctx.moveTo(x,y)：移动到指定点

ctx.lineTo(x,y)：绘制直线路径到指定点

ctx.arc()：绘制拱形路径

ctx.ellipse()：绘制椭圆路径

ctx.bezierCurveTo()：绘制贝塞尔曲线路径

ctx.linJoin()：修改折线拐点处样式

6、绘制图像

ctx.drawImage()

7、对于绘制上下文状态的改变和修改

ctx.translate(x,y)：坐标轴原点移动到指定点

ctx.rotate()：旋转画笔

ctx.scale()：画笔缩放

ctx.save()：保存绘图上下文当前的变形数据

ctx.restore()：恢复最近一次的保存的变形相关的状态

***Canvas是个纯js实现的绘制位图的技术。

（五）、SVG绘图
相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用document.createElementNS(‘http://www.w3.org/2000/svg’,‘标签名’)；SVG元素的nodeName都是纯小写形式。

一、使用方法

在HTML文件中直接使用SVG相关标签(<svg></svg>)即可，默认是一个300*150的inline-block。

二、绘制不同图形(部分)

1、绘制矩形

<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]>

2、绘制圆形

<circle [r/cx/cy]>

3、绘制椭圆

<ellipse [rx/ry/cx/cy]>

4、绘制直线

<line [x1/y1/x2/y2/stroke]>

5、绘制折线

<polyline [points/stroke]>

6、绘制多边形

<polygen [points]>

7、绘制文本

<text [x/y/font-size/alignment-baseline/fill]>

8、绘制图像

<image [width/height/xlink:href]>

9、特效对象——渐变特效

<linearGradient [x1/y1/x2/y2]>

<stop [offset/stop-color]>

10、特效对象——高斯模糊滤镜

<feGaussionBlur [stdDeviation]>

（六）、地理定位

简单地用一句话概括就是，使用js获取浏览器当前所在的地理坐标，实现LBS(Location Based Service，基于定位的服务)。

下面写一下它的基本调用：

if(navigator.geolocation){

　　　　navigator.geolocation.getCurrentPosition(successFn,errorFn,{

　　　　　　enableHighAccuracy:true,//获得高精度位置，默认为false

　　　　　　timeout:5000,//获取地理位置的超时时间，默认不限时

　　　　　　maximumAge:3000//最长有效期

　　　　});

　　}

*errorFn就是获取地理位置信息失败后的回调函数，输出一些错误信息

*successFn是成功获取后的回调函数，可以结合一些框架实现地理定位，比如百度地图、Google Map API等

（七）、拖放API

拖放API是H5专门为了鼠标拖放而新提供了7个事件，可以分成三个部分来讲。

一、拖动的源对象(source)可以触发的事件

dragstart：拖动开始

drag：拖动进行中

dragend：拖动结束

二、拖动的目标对象(target)可以触发的事件

dragenter：拖动进入时

dragover：源对象在目标对象上方时

dragleave：拖动离开时

drop：鼠标释放时

*特别注意的一点是，如果想触发drop事件，必须阻止dragover的默认行为

三、源对象和目标对象间的数据传递

当然可以使用全局变量，这里要讲的是一种更好的方法——使用拖放事件的dataTransfer属性

例：源对象保存数据：

source.onxxx=function(e){

e.dataTransfer.setData(‘key’,‘value’);

};

目标对象接收数据：

target.onxxx=function(e){

e.dataTransfer.getData(‘key’);

}

（八）、Web Worker

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

那么如何创建一个子线程呢？通过这么一个构造函数var worker = new Worker(‘worker.js’);

*常用的一些API：

1、postMessage()：用来在主线程和子线程间传递数据。

2、terminate()：终止子线程，无法再调用，除非另外重创。(worker.terminate()?

3、message：消息发送时触发，通过事件的data属性获得传递的数据。

4、error：当出错时触发，通过事件的message属性获得错误信息。

下面给出一个Demo：

先是主线程界面：
　　　　

接着是worker.js界面：
　　　　

我们再来看下输出结果：

上面的这个demo其实已经能大致把一个webWorker的使用表达清楚了，额外补充下：

1、可以在worker中可以通过importScripts(url)加载另外的脚本文件

2、可以使用定时器的方法，但其余的DOM操作不支持

3、可以使用AJAX发起请求

4、可以访问navigator的部分属性

5、不能跨域加载js文件

6、各个浏览器的差异性，例：Firefox中支持worker中再建worker，Chrome不支持

(九)、Web Storage

H5的webStorage技术一共提供了两个对象：window.sessionStorage和window.localStorage。

一、window.sessionStorage——会话级存储

存储一个数据：sessionStorage[‘key’]=value;

/sessionStorage.setItem(‘key’,value);

读取一个数据：var data = sessionStorage[‘key’];

/var data = sessionStorage.getItem(‘key’);

获取数据的个数：sessionStorage.length

清除所有的数据：sessionStorage.clear();

清除一个数据：sessionStorage.removeItem(‘key’);

二、window.localStorage——本地存储

存储一个数据：localStorage[‘key’]=value;

/localStorage.setItem(‘key’,value);

读取一个数据：var data = localStorage[‘key’];

/var data = localStorage.getItem(‘key’);

获取数据的个数：localStorage.length

清除所有的数据：localStorage.clear();

清除一个数据：localStorage.removeItem(‘key’);

(十)Web Socket

webSocket是H5新加的一个协议，为了解决http协议的request、response一一对应和它自身的被动性，以及ajax轮询等问题。一方可以发送多条信息，连接不中断，永久连接，但也导致了服务器连接的客户端数量有限。

简单的介绍下客户端的使用：

var ws = new WebSocket(‘ws://地址:端口号’);//创建ws客户端

ws.onopen=function(){//连接成功时触发

ws.send();//发送信息

ws.onmessage=function(e){//获得信息时触发

e.data;//接收的信息

}

}