html5新特性总结

新增元素

语义化更好的标签元素

结构元素：article、aside、header、hgroup、footer、figure、section、nav
其他元素：video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog、

废除的元素

纯表现元素、部分浏览器支持的元素和对可用性产生负面影响的元素

纯表现元素：basefont、big、center、font、s、strike、tt、u 用css代替
部分浏览器支持的元素：applet、bgsound、blink、marquee
对可用性产生负面影响的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架

新增的API

Canvas：首先获取canvas元素的上下文对象，然后使用该上下文对象中的绘图功能进行绘制。

<canvas id="canvas"></canvas>
<script>
	var canvas = document.getElementById("canvas");
  	var context = canvas.getContext("2d");
	//设置颜色，默认为black
  	context.fillStyle = "red";
  	context.fillRect(0,0,100,100);
  	//默认为black
    context.strokeStyle = "blue";
  	context.strokeRect(120,0,100,100);
</script>

SVG：SVG是html5的另一项图形功能，是一种标准的矢量图形，是一种文件格式，有自己的API。
```
<svg height=100 width=100>
	<circle cx=50 cy=50 r=50/>
</svg>
```

音频和视频：2大好处,一是作为浏览器原生支持的功能，新的audio和video元素无需安装；二是媒体元素向web页面提供了通用、集成和可脚本化控制的API。

<video src="video.webm" controls>
	<object data="videoplayer.swf" type="application/x-shockwave-flash">
      <param name="movie" value="video.swf" />
      Your browser does not support HTML5 video.
  </object>
</video>

浏览器支持性检测：用js动态创建，检测特定函数是否存在。

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation：可以请求用户共享他们的位置。位置信息来源IP地址、三维坐标、GPS、从RFID、Wifi和蓝牙到Wifi的MAC地址、GSM或CDMA手机的ID、用户自定义数据

navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);
//更新位置信息
function updateLocation(position){
  //纬度
  var latitude = position.coords.latitude.
  //经度
  var longitude = position.coords.longitude.
  //准确度
  var accuracy = position.coords.accuracy.
  //时间戳
  var timestamp = position.coords.timestamp.
  }
//处理错误信息
function handleLocationError(error){
  console.log(error);
}
//监听位置更新
var watchId=navigator.geolocation.watchPostion(updateLocation,handleLocationError);
//不再接收位置更新
navigator.geolocation.clearWatch(watchId);

Communication：跨文档消息通信，可以确保iframe、标签页、窗口间安全地进行跨源通信。

//发送消息
window.postMessage('hello,world','http://www.example.com');
//接收消息
window.addEventListener('message',messageHandler,true);
function messageHandler(e){
  switch(e.origin){
    case 'friend.example.com':
      //处理消息
      processMessage(e.data);
    break;
    default:
    break;
  }
}

XMLHttpRequest Level2：改进了跨源XMLHttpRequest和进度事件，XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部，它为服务器提供HTTP请求的源信息。
WebSockets：要连接远程主机，只需新建一个WebSocket实例，提供希望连接的对端URL。
Forms：新表单元素tel、email、url、search、range、number 未来的表单元素color、datetime、datetime-local、time、date、week、month
新表单特性和函数：placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required
拖放API：draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象

<div id="draggable" draggable="true">Draggable Div</div>
<script>
  var draggableElement = document.getElementById("draggable");
  draggableElement.addEventListener('dragstart',function(event){
    console.log("拖动开始！");
    event.dataTransfer.setData('text','hello world!');
  })
</script>

Web Workers API：Web Workers可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

Web Storage API：sessionStorage(保存在session中，浏览器关闭，数据消失)、localStorage(保存在客户端本地，除非手动删除，否则一直保存)

//sessionStorage和localStorage方法一致
//保存数据
localStorage.setItem(key,value);
//读取数据
localStorage.getItem(key);
//删除单个数据
localStorage.removeItem(key);
//删除所有数据
localStorage.clear();
//得到某个索引的key
localStorage.key(index);