HTML5 新增API
1.网络检测状态
以前兼容性差window.navigator.onLine布尔值
现在 widnow.online用户网络连接时被调用
window.offline用户网络断开时被调用
都是window的监听对象
window.addEventListener("online",function(){
$("对象").text("网络已经链接")
})
2.全屏显示 兼容性问题ie9+ webkit(chrome)内核需要+webkit Gecko内(火狐)需要+moz
开启全屏显示 requstFullScreen()；
关闭全屏显示 cancelFullScreen()；
3.文件读取
可以把上传的文件，内 容显示到页面上，上传图片文件显示缩略图
1.file选择文件
2.对象file.files属性(上传文件集合)
3.var reader = new FileReader()； FileReader对象允许Web应用程序异步读取储存在用户计算机上的文件，
或原始数据的缓冲区
4.通过readAsText(读取文件文本方法)方法读取上传的文件
reader.readAsText(file.files[0]);
当这个文件的内容读取完毕之后，会把内容存放到 result属性里面
5. 已经读取完毕，而且读取的内容存放到了result
reader.onload = function(){
console.log(reader.result)
}
4.地理定位
获得当前地理位置navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
举例
var x=document.getElementById("demo");
function getLocation(){
判断我们当前的设备是否支持地理定位
if (navigator.geolocation){
如果支持就获得当前的地理位置 调用getCurrentPosition(showPosition，errorPosition)方法
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
如果设备不制裁 就返回这句话 当前浏览器不支持地理定位
x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML=
获得当前纬度
"Latitude: " + position.coords.latitude + "
获得当前经度
Longitude: " + position.coords.longitude;
}
5.拖拽
5.1拖拽和释放
1.拖拽：Drag
2.释放：Drop
5.2设置元素为可拖放
draggable属性:就是标签元素要设置 draggable="true",否则不会有效果
注意：连接和图片默认是和拖动的，不需要draggable属性
5.3拖拽API的相关事件
1.源对象.ondragstart = function(){} 源对象开始被拖动
2.源对象.ondrag = function(){} 源对象被拖动过程中
3.源对象.ondragend = function(){} 源对象被拖动结束
5.4找到目标文件设置 释放效果
1.目标对象.ondragenter 目标对象被源对象拖动着进入
2.目标对象.ondragover = function(e){} 目标对象被源对象拖动着悬停在上方
如果想要触发 ondrop 事件 则需要在 over 里面，阻止默认行为执行
return false
或者
e.preventDefault();
3.目标对象.ondragleave 源对象被拖动着离开了目标对象
4.目标对象.ondrop 源对象拖动着在目标对象上方释放/松手
在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。它可以保存一项或多项数据、一种或多数数据类型。通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。
在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。
在项目拖动结束的时候，可以获取dataTransfer对象里的值(getData)。
在其它的事件(如ondragover、ondragleave等），是无法获取dataTransfer里面的值了。这是由于W3C要求对dataTransfer里的值进行保护[参考]。因此，如果需要在这些事件里获取数据，只能通过一个全局变量等其它方式来实现了。
6.Web本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性的在本地储存大量数据HTML5规范提出了相关解决方案
6.1 特性
1.设置，读取方便。
2.容量较大，sessionStorage约5M，localStorage约20M。
3.只能储存字符串，可以将对象JSON.stringify()编码后储存。
6.2 window.sessionStorage
1.声明周期为关闭浏览器窗口。
2.在同一个窗口（页面下）数据可以共享。
6.3 window.localStorage
1.永久生命，除非手动删除（服务器方式访问然后清除缓存）。
2.可以多窗口（页面）共享。
6.4 方法详解
1.setItem(key,value)设置储存内容
2.getItem(key)读取储存内容
3.removeItem(key)删除指定内容
4.clear()删除所有内容
7 应用缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。