html5新增标签+API介绍

新增标签

其他更详细的见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,详见:

http://www.jianshu.com/p/75e84ddf9339

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

用法:实例化一个观察者对象,传入监控对象以及监控设置。
参考:http://www.jianshu.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介绍)