网络状态检测
我们可以通过window.onLine 来检测，用户当前的网络状况，返回一个布尔值。
1 window.online用户网络连接时被调用
例：window.addEventListener('online',function(){
alert('已经建立了网络链接')
})
2 window.offline用户网络断开时被调用
例： window.addEventListener('offline',function(){
alert('已经失去了网络链接')
})
文件读取
通过FileReader对象我们可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer
1 FileList 对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。
2 FileReader 对象
HTML5新增内建对象(内置对象，内嵌对象)，可以读取本地文件内容。
DataUrl
1 readAsDataURL()
以DataURL形式读取文件
2 事件监听
onload 当文件读取完成时调用
3 属性
result 文件读取结果
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
视频常用api
方法：load() 加载， play() 播放， pause() 暂停
属性： currentTime 视频播放的当前进度
duraton 视频的总时间
事件： oncanplay 事件在用户可以开始播放视频/音频（audio/video)时触发
ontimeupdate : 通过该事件来报告当前播放进度
onended: 播放完时触发
video.webkitRequestFullScreen() 全屏
全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀如
webkitRequestFullscreen, mozrequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullscreen 检测当前是否处于全屏
全屏伪类
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
拖拽 draggable
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
1 拖拽元素
页面设置了draggable='true'属性的元素
2 目标元素
页面中任何一个元素都可以成为目标元素
3 事件监听
拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
onderagover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
WEB 存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
storage 存储
window.sessionStorage
session 会话声明周期和localstorage 不一样，存储时间比较短
window.localStorage local本地
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)
storage特性
1 设置，读取方便
2 容量大 sessionStorage约5M、localStorage约20M
3 只能存储字符串，可以讲对象JSON.stringify()编码厚存储
window.sessionStorage和window.localStorage区别
window.sessionStorage
1 声明周期为关闭浏览器窗口
2 在同一个窗口下数据可以共享
window.localStorage
1 拥挤生效。除非手动删除
2 可以多窗口共享
方法详解
setltem(key,value) 设置存储内容
getltem(key) 读取存储内容
removeltem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
应用缓存 离线存储
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
1 优势
- 可以配置 需要缓存的资源
- 网络无链接应用仍课用
- 本地读取缓存资源，提升访问熟读，增强用户体验
- 减少请求，环节服务器负担
缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。
manifest 文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料