以下不是HTML5新增的API是,html5新增api-1

1、online && offline(在线状态检测)

获取当前网络状态

window.navigator.onLine //true为在线，false为离线

当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body，document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。)。

监测网络状态的变化

window.addEventListener("offline", function () { console.log("offline")});

window.addEventListener("online", function () {console.log("online")});

2、webStorage(客户端轻量级存储方案)

localStorage ： 没有时间限制的数据存储 (持久化本地)(存储的内容会被JSON.stringify处理，如果不是字符串，需要先变为字符串的形式再存储，以防类型转换产生问题)

sessionStorage： 针对一个 session 的数据存储 (内存方式存储),当用户关闭浏览器窗口后，数据会被删除。

3、应用缓存

构建一个离线应用，创建一个cache manifest文件

优势

1、可配置需要缓存的资源

2、网络无连接应用仍可以使用

3、本地读取缓存资源，提升访问速度

4、减少请求，缓解服务器负担

缓存清单

缓存的文件以.appcache为后缀。在设置缓存以后，第一次加载页面时会根据manifest文件中列出的缓存文件路径，将文件进行缓存到浏览器，再次打开的时候，不会再次从服务器请求，而是加载缓存数据。但是如果manifest文件没有发生改变，那么服务器上的相关页面发生改动，加载时也是只会加载缓存的数据，不会进行更新；如果需要更新，必须改动manifest文件，哪怕只是一个空格或者换行。

开启缓存机制

在每个需要缓存的html页面增加manifest属性，设置AppCache文件，进行缓存。

创建manifest文件

study.appcache

CACHE MENTIFEST

# 上面必须是第一行，#表示注释的意思

CACHE：

# 所需要缓存文件的路径可以是绝对路径或者相对路径，一般相对路径比较好

./images/img1.png

NETWORK:*

# *代表所有

*如果不想要所有的话，可直接像这样写

./images/img2/jpg

# 是需要即时从服务器请求的文件，一般默认*号，表示除CACHE所列所见以外的文件都是需要即时请求更新的。

# 替代方案 ，当请求失败时需要跳转的页面

FALLBACK:../error.html

VERSION：版本号

# 这是一个附加属性，可有可无，加这个是为了在页面改动时，可以进行改动此版本号。

# manifest文件发生改动，第一次不会检验，还是会显示原有缓存内容

# 浏览器再次请求html页面时，发现页面manifest文件进行改动，浏览器会从服务器重新拉取更新的内容。

使用

缺点及解决方案

4、全屏显示

Document

/* 全屏显示以后改变背景色，也有兼容性问题 */

#full:-webkit-full-screen{

background:red;

}

全屏

取消全屏

是否全屏

// 全屏显示 requestFullScreen 有兼容性问题，需要兼容处理

let full = document.querySelector('#full')

document.querySelector('#openfull').onclick = function () {

if (full.requestFullscreen) {//正常浏览器

full.requestFullscreen()

} else if (full.webkitRequestFullScreen) {//WEBKIT

full.webkitRequestFullScreen()

} else if (full.mozRequestFullscreen) {//moz

full.mozRequestFullscreen()

} else if (full.msRequestFullScreen) {//微软 screen小写

full.msRequestFullScreen()

} else if (full.oRequestFullScreen) {//欧朋

full.oRequestFullScreen()

}

}

//取消全屏 cancelFullScreen 和具体元素没有关系，是文档全屏退出

document.querySelector('#cancelfull').onclick = function () {

if (document.cancelFullscreen) {//正常浏览器

document.cancelFullscreen()

} else if (document.webkitCancelFullScreen) {//WEBKIT内核 chorme

document.webkitCancelFullScreen()

} else if (document.mozCancelFullscreen) {//moz

document.mozCancelFullscreen()

} else if (document.msCancelFullScreen) {//微软

document.msCancelFullScreen()

} else if (document.oCancelFullScreen) {//欧朋

document.oCancelFullScreen()

}

}

//是否全屏显示(兼容性写法和上面一样)

document.querySelector('#isfull').onclick = function () {

console.log( document.webkitIsFullScreen)

}

5、拖放

Document

#div1, #div2 {

height: 400px;

}

#img {

height: 300px;

width: auto;

}

src="https://ibes.e-hqins.com/api-file/data/downloadImage?url=7337565631200620048.png" alt="">

function drop(e) {

console.log('drop', e)

//调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

// 通过 dataTransfer.getData("imgDrag") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

// 被拖数据是被拖元素的 id ("img")

// 把被拖元素追加到放置元素(目标元素)中

e.preventDefault();

var data = e.dataTransfer.getData("imgDrag");

e.target.appendChild(document.getElementById(data));

}

function dragstart(e) { //它规定了被拖动的数据

console.log('dragstart', e)

e.dataTransfer.setData('imgDrag', e.target.id) //设置被拖数据的数据类型和值

}

function dragover(e) {

console.log('dragover', e)

// 规定在何处放置被拖动的数据。

// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

e.preventDefault();

}

6、webworker见文章：