HTML5新特性

html5新增了一些语义化更好的标签元素。

一、新增的元素

结构元素：

1、article标签：表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。

2、aside标签：表示article内容之外的内容，辅助信息。

3、header标签：表示页面顶部。

4、footer标签：表示页面底部

5、section：表示页面中一个内容区块，比如章节。

6、nav：表示页面中的导航链接。

其他元素

video（视频）、audio（音频）、canvas（画布）、mark（高亮字体）、progress（任务进度）、time（日期或时间）、keygen（生成秘钥）、dialog（对话框或窗口）

废除的元素

basefont、font、center、frameset........

 

二、新增的API

Canvas API

canvas标签可以为页面提供一块画布来展示图形。结合Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像及动画了。

SVG

SVG是H5的另一项图形功能，他是一种标准的矢量图形，是一种文件格式，有自己的API。html5引入了内联SVG，使得SVG元素可以直接出现在html标记中。

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

 

音频和视频

html5为audio和video规范提供了通用、完整、可脚本化控制的API。

1、作为浏览器原生支持的功能，新的audio和video元素无需安装。

2、媒体元素向web页面提供了通用、集成和可脚本化控制的API。

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

 

浏览器支持检测

浏览器检测是否支持video或audio元素最简单的方式使用脚本动态创建它，然后检测特定函数是否存在。

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

 

Geolocation API

Geoocation API（地理定位API），可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。

位置信息从何而来

Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是用于检索位置信息的API，而且通过该API检索到的数据只具有某种程度的准确性，并不能保证设备返回的位置是精确的。设备可以使用下列数据源：

1. IP地址
2. 三维坐标
   1. GPS
   2. 从RFID、WiFi和蓝牙到WiFi的MAC地址
   3. GSM或CDMA手机的ID
3. 用户自定义数据

   // 一次更新
   navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
   function updateLocation(position) {
   var latitude = position.coords.latitude; // 纬度
   var longitude = position.coords.longitude; // 经度
   var accuracy = position.coords.accuracy; // 准确度
   var timestamp = position.coords.timestamp; // 时间戳
   }
   // 错误处理函数
   function handleLocationEror(error) {
   ....
   }
   // 重复更新
   navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
   // 不再接受位置更新
   navigator.geolocation.clearWatch(watchId);

 

Communication API（跨文档消息传递）

html5引入了一种新功能，跨文档消息通信，可以确保iframe、标签页、窗口间安全的跨源通信。postMessage API为发送消息的标准方式：

window.postMessage('Hello, world', 'http://www.example.com/');

 

 

WebSockets API

WebSockets是html5中最强大的通信功能，它定义了一个全双工通信，仅通过Web上的一个Socket即可进行通信。

 

拖放 API

如果网页元素的draggable属性为true，则这个元素是可以拖动的。

<div draggable="true">Draggable Div</div>

 

Web Workers API

JS是单线程的，因此，持续时间较长的计算，会阻塞UI线程，进而导致无法在文本框中填入文本、单肩按钮等，并且在大多数浏览器中，除非版本权返回，否则无法打开新的标签页。该问题的解决方案是Web Workers，可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

 

Web Storage API

Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但其实现的功能要比cookie强大的多。

sessionStorage：将数据保存在session中，浏览器关闭数据就丢失。

localStorage：将数据一直保存在客户端本地，除非手动删除，否则一直保存。不管是sessionStroge还是localStrage，可使用相同的API，常用的有如下几个（以localStorage为例）：

1. 保存数据：localStorage.setItem(key,value);
2. 读取数据：localStorage.getItem(key);
3. 删除单个数据：localStorage.removeItem(key);
4. 删除所有数据：localStorage.clear();
5. 得到某个索引的key：localStorage.key(index);