新增标签

其他更详细的见jsfiddle实例：
http://jsfiddle.net/utLs39y7/10/

1、embed

embed标签是html5新增的标签，用来嵌入内容，比如插件等，常用于视频文件的播放（为外部应用程序定义容器）。

这篇文章介绍了embed的常用属性，基本都是定义播放器的一些设置的，自动播放loop、开始时间starttime等：
http://www.cnblogs.com/lgx5/p/5714494.html

注：一些视频文件swf的大小只有几KB，但是视频本身是比较大的，自己的理解是视频网站只是将视频的地址封装进了swf文件，然后链接到真正的视频地址进行播放。

2、artical section aside

都是block块级元素。

artical一般是指独立的一篇文章，一般不与页面上的其他内容有关联，一般用于新闻文章、论坛的帖子、用户评论等，可以独立被外部引用，里面包含自己的头、尾、内容。
section类似于div，但是更语义化，将内容分块，一般section都包含标题。
aside侧边栏，一般用于定义文章artical的引用、注解等部分。

3、progress

进度条
............................懒得写了，见jsfiddle实例....................................

其他新增内容

1、本地存储 localStorage sessionStorage

支持setItem getItem removeItem clear等方法，而且支持点操作符和[]访问某字段。clear清除所有的数据项。
与cookie的对比：

cookie是为http请求服务的，与服务器进行交互；
localStorage sessionStorage是为本地数据存储而服务的，localStorage是永久本地存储，sessionStorage是会话级别的，会话关闭即失效；
cookie有大小限制及跨域限制，且每次请求都会被携带；

2、web worker

参考：http://www.cnblogs.com/giggle/p/5350288.html

通过创建子线程，解决js单线程会阻塞的问题。
我的理解就是把一些耗费性能的计算等操作，分离出来到一个单独的js中，通过创建new Worker()对象，创建当前线程的一个子线程，不影响主线程上的DOM操作等，等计算结束，子线程通知到主线程，进行内容更新及子线程销毁等操作。
子线程的执行上下文不是window，所以无法获取window等对象，无法操作DOM，但可以通过postMessage方法与主进程进行互相通信，通过监听worker.onmessage方法获取传递的数据，主进程可以通过worker.terminate() 关闭子进程。worker对象一经销毁，则无法重新启动，需要重新新建Worker对象来启动。

3、geolocation支持用户地理位置的获取

经用户同意才被允许获取。用于导航，可以监控用户地理位置的移动等。

navigator.geolocation.getCurrentPosition(success(position), error());
//第一个函数正确返回地理位置：经纬度、海拔等,position.coords.latitude position.coords.longitude
//错误处理函数

//监控用户位置的变化
navigator.geolocation.watchPosition  clearWatch()

4、websocket

基于TCP协议，双向的全双工通信，服务端和客户端可以相互推送消息。除了IE外，其他浏览器基本支持了WebSocket()接口（不同于ajax，websocket允许跨域通信）。相关的API如下：
send + onopen + onmessage + onerror + onclose等。相关的库有socket.io，一般用于聊天应用等。

5、canvas

定义画布，一个矩形框，但是真正的图像绘制需要用js来完成。
相关的绘制方法有：fillRect() arc moveTo lineTo drawImage等。

6、postMessage

解决跨域、跨窗口消息传递问题。原理是：html5新增的API，不管同不同源，都可以向其他window对象发送消息。postMessage只管消息的发送，而不用等待消息处理完成，仅仅是将消息插入到对应窗口的消息队列中即可（不阻塞程序）。

// 调用postmessage的window对象为要接收消息的那个window对象
// origin指明要接收消息的window对象所在的域，不需指明时，可以设置 *
window.top.postMessage(data, origin);
//要接收消息的window对象注册message事件  
window.addEventListener('message', function(e){
      //e.data  e.source  e.origin
})

7、history API

实现无刷新跳转，减少网络请求、改进用户体验等。

history.pushState(data, title, url)
history.replaceState(data, title, url)
window.onPopState(event)

8、FileReader定义异步读取本地文件的API，详见：

//www.greatytc.com/p/75e84ddf9339

9、Mutation observer 监控DOM元素的变化，防止xss攻击。

用法：实例化一个观察者对象，传入监控对象以及监控设置。
参考：//www.greatytc.com/p/b5c9e4c7b1e1

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// 选择目标节点
var target = document.querySelector('#some-id'); 
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {  
      mutations.forEach(function(mutation) { 
          console.log(mutation.type); 
      }); 
}); 
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true } 
// 传入目标节点和观察选项
observer.observe(target, config); 
// 随后,你还可以停止观察
observer.disconnect();

html5新增标签+API介绍