| 文件API FileList对象上传文件信息、FileReader()文件读取对象、FormData()异步上传文件
| 拖放API
| 离线应用 manifest
| postMessage 跨文档消息传送
| webScoket
| 本地存储localStorage、sessionStorage
| 多线程 web workers
| 获取地理位置 geolocation
| video、audio
| canvas绘图
| History 历史管理
新增语义类标签
1、header: 用于头部
2、footer: 用于页尾
3、nav: 用于导航
4、aside: 侧边栏，放置导航性质的内容
5、section: 文档的区块
6、article: 文章的独立主体
7、hgroup: 标题元素进行组合
8、details: 展示和隐藏文档的细节
<details>
<summary>Copyright 2011.</summary> // 标题，默认【详细信息】
生成于比比1
</details>
9、abbr: 标签用来表示缩写
10、blockquote:
<blockquote>
Here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
11、time: 日期
12、figure, figcaption: 用于图表和标签的结合
<figure>
<img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
<figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
13、dfn:
14、s: 用于电商商品的打折 <s>¥5000000</s>
如果老浏览器对新增HTML5元素不使用JS来创建元素:
document.createElement('article')
公用属性
1、draggable: 可拖拽 <section draggable='true'></section>
2、contenteditable: 可以直接编辑页面的内容
表单类
一、input元素新增类型
1、search: 用于搜索关键词 <input type="search" vlaue="" >
2、email: 需要输入正确的电子邮件地址 <input type="email" vlaue="" >
3、number: 只能输入数字，配合min、max属性
4、range: 数值范围
<input type="range" name="points" min="-360" max="360" class="rang" id="lateZ" />
事件: onchange: 触发后执行,只触发一次 oninput: 最真实触发，拖动就触发
5、tel: 点击只提供数字键盘
6、url: 输入url
7、pattern: 正则表达式 <input type="email" pattern="[^ @]*@[^ @]*" value="">
二、input元素属性:
1、readonly 只读
2、disabled 不可用
3、autocomplete: 自动完成功能就是输入过的内容会被缓存，下次在触发这个文本框会有下拉菜单的提示之前的输入，值为on或off
4、placeholder: 内容为空时的提示 <input type="text" placeholder="请输入用户名">
5、autofocus: 指定控件自动获取焦点 <input type="text" autofocus >
6、require: 如果该元素为空，则无法提交表单 <input type="text" required />
邮件链接: <a href="mailto:cxz@126.com">发送邮件</a>
电话链接: <a href="tel:15012345678">打电话</a>
dataList数据列表
通过数据列表来实现自动补全的功能
<form action="/server" method="post">
<input list="jslib" name="jslib">
<datalist id="jslib">
<option value="jQuery">
<option value="Dojo">
<option value="Prototype">
<option value="Augular">
</datalist>
<input type="submit" value="完成" />
</form>
文件API
FileList、FileReader()、FormData() 对象
一、FileList对象、File对象: 读取本地文件
HTML4: <file>控件内只允许放置一个文件，HTML5: 加入multipe属性，允许file添加多个文件
Example:
<input type="file" id="fileLoad" />
<input type="file" id="fileLoad" multiple /> // mutiple 可以进行多个文件的选取
<script>
oUpFile.onclick = function(){
var oFileLoad = document.querySelector('#fileLoad').files[0]; // 返回的是FileList对象列表
for(var k in oFileLoad){
console.log(k, oFileLoad[k]);
}
}
</script>
FileList返回:
{
name: f82f4a858d04d0a68f52.jpg, // 文件名
lastModified: 1462944176000, // 最后修改日期
lastModifiedDate: Wed May 11 2016 13:22:56 GMT+0800 (CST),// 最后修改日期
webkitRelativePath,
size: 554902, // 文件大小
type: image/jpeg // 文件名型
}
https://segmentfault.com/a/1190000004084956
二、FileReader() 文件读取对象
FileReader() 将文件读入内存，并且转成不同类型（二进制、DataURL、文本）
方法:
1、readAsBinaryString: 将文件读取为二进制码
2、readAsDataURL: 将文件读取为DataURL，一段是以data:开头的 Base64位图片编码
3、readAsText: 将文件读取为文本，第2个参数为编码类型，默认为UTF-8
4、abort: 中断读取
Example:
let oFile = document.querySelector("oFile").files[0]; // 返回FileList对象
let reader = new FileReader(); // 创建FileReader()对象读取文件
reader.readAsDataURL(oFile); // 将文件以什么格式读入页面
reader.onload = function(e){
$("#oimg").attr('src', e.target.result); // e.target.result 来获取文件的格式
$("#fileText").text(e.target.result);
}
三、FormData() 对象
FormData()可以异步上传二进制文件, 只能传文件、图片的二进制等
<form>表单的enctype属性有三个值:
1、application/x-www-form-urlencoded: 用来设置表单传输，默认也是这个值，所以form中不写enctype属性也是按这个默认去传的
2、multipart/form-data: 用来传输图片或MP3等文件, 会以request payload提交数据
3、text/plain: 用于传输文本，邮件用此编码
API:
1、创建FormData , var formData = new FormData('表单名')
2、get(key): 获取存储的字段的值
3、append(key, value): 存储字段
4、set(key, value): 修改值
5、has(key): 判断是否存已经有了key
6、delete(key): 删除数据
7、formData.entries(): 遍历FormData
8、next(): 遍历时所用下一个节点数据，如果没有返回undefined
9、发送数据: 通过XHR
var xhr = new XMLHttpRequest();
xhr.open('post', 'login');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(formData);
Example:
<form id="upFileForm" method="post" enctype=”multipart/form-data”>
<input type="file" name="file" id="upFile">
<input type="button" id="upFile" value="上传">
</form>
<script>
let from = document.querySelector('#upFileForm')[0];
let uploadFile = document.querySelector("#upFile");
let formData = new FormData(from);
formData.append('file', uploadFile.files[0]);
console.log(formData)
$.ajax({
url: '/remittanceDetail/import',
type: "post",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(res) {
console.log('err', res)
},
error: function(res){
if(res == 0){
console.log('err', res)
}
console.log('err', res)
}
});
</script>
https://segmentfault.com/a/1190000002680797
https://segmentfault.com/a/1190000006716454
http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
ArrayBuffer
ArrayBuffer是一段连续的长度固定的字节序列，如：通过实例化ArrayBuffer对象在内存中创建一段二进制存储空间（或叫二进制缓冲区），
// 创建一段字节长度为8的内存空间
var buffer = new ArrayBuffer(8);
// 获取字节长度
console.log(buffer.byteLength); // 8
Blob对象
处理对二进制的方法，通过Blob来操作二进制数据
var abc = new ArrayBuffer(80); // ArrayBuffer ES6用来在内存中存一段二进制数据
var blob = new Blob([abc], {type: 'text/plain});
方法:
1、slice(): 将大文件分片，用于分片上传
https://www.cnblogs.com/hhhyaaon/p/5928152.html
https://github.com/eligrey/FileSaver.js
拖放API
拖放过程由两个部分构成:
被拖拽的元素，之后简称为子项（item）
放置被拖拽元素的元素，之后简称为容器（container）
1、draggable属性: 将想要拖放对象元素加入引属性设置为true
2、拖放事件:
子项事件:
1）dragstart - 拖拽开始
2）drag - 拖拽过程中不断触发
3）dragend - 拖拽结束，无论有没有拖进容器（ 鼠标松开就触发 ）
容器事件:
1）dragenter - 子项进入容器范围
2）dragover - 子项在容器范围内不断触发
3）dragleave - 子项离开容器范围
4）drop - 拖拽结束，且子项成功拖进容器
Example:
<script>
var oBox = document.querySelector('#box'); // 容器
var oDragBlcok = document.querySelector('#dragBlcok'); // 拖拽块
oDragBlcok.addEventListener('dragstart', function(e){
e.dataTransfer.setData('name', 'siguang');
})
oDragBlcok.addEventListener('dragend', function(e){
var name = e.dataTransfer.getData('name');
console.log(name);
})
</script>
3、拖拽事件对象
e.dataTransfer: 拖拽文件的信息
files: FileList对象，相当于input的type="file"的内容
astModified:1494234931000
lastModifiedDate:
Mon May 08 2017 17:15:31 GMT+0800 (CST)
name:"chongwutupianxiaotuxiaom.jpg"
size:20926type:"image/jpeg"
webkitRelativePath:""
4、DataTransfer对象: 拖拽时需要传递一些数据，DataTransfer就可以来对数据进行传输，绑定在拖放事件的Event中
1）dataTransfer.items: 一个数据集合
2）dataTransfer.setDragImage(element, x, y): 拖拽过程中定义一个元素替换原有的，可以看到拖拽元素跟随的效果。
3）dataTransfer.setData(key, val): 添加自定义数据
4）dataTransfer.getData(key): 获取自定义数据
5）dataTransfer.clearData(): 清除自定义数据
6）dataTransfer.getData(format): 播放文件列表
离线应用
在没有网络的情况下，可以使用本地缓存的离线数据也可以使web应用运行进来
1、离线与缓存的区别
两都都是为了更好的缓存各种文件以提高读取速度，两者对网络环境有要求:
1、网页缓存依赖有网络的情况，离线应用在离线下仍然可用
2、网页缓存主要缓存当前页面的内容，离线应用是缓存的指定文件，在离线状态下仍可以访问
2、manifest（[ˈmænəˌfɛst]显示）文件
通过manifest文件来管理哪些文件需要缓存
设置完后所有本地缓存的文件存储到Application Cache中，如果段网时在Network中查看缓存的文件为（from cache）
offline.manifest:
CACHE MANIFEST // 必要，把文件的作用告诉给浏览器，让文件支持text/cache-manifest
#Version 1.0
CACHE: // chche，指定需要被缓存的资源，浏览器会对这些设置的资源
index.html
style.css
images/2.jpg
default.js
NETWORK: // 指定不进行缓存的资源，如果为“*”通配符，表示所有资源都不被缓存
# 1.jpg
images/1.jpg
FALLBACK: // 每行指定两个资源，如果
/js/test/index.html /js/test/404.html
3、需要在html页面中的<html>标签加入manifest="offline.manifest"
<html lang="en" manifest="offline.manifest">
4、applicationCache对象
1）检测是否支持离线应用
if(window.applicationCache){
// 支持
}
2）属性:
applicationCache.status返回: 离线缓存状态
0: 无缓存
1: 闲置
2: 检查中
3: 下载中
4: 更新完成
5: 废弃
3）事件:
checking: 检查缓存更新时；
error: 检查更新或下载资源时发声错误
noupdate: 描述文件无变化
downloading: 开始下载应用缓存资源
progress: 下载缓存资源过程中
updateready: 下载完毕
cached: 应用缓存完整可用时
applicationCache.addEventListener('updateready', function(){ // 资源下载中 }, false)
4）applicationCache.update(): 让离线缓存检查更新上面的事件
5、检测是否有网络 online 和 offline
// navigator.onLine如果设置为true表示能上网
if (navigator.onLine) {
// statement if online
} else {
// statement if offline
}
// 侦听当网络变化的时候触发
window.addEventListener('online', function(){
console.log('在线');
}, false);
window.addEventListener('offline', function(){
console.log('离线');
}, false);
postMessage() 跨文档消息传输
HTML5来进行两个不同跨域的页面来消息传递（iframe不同域）
1、postMessage('发送数据', 要发送到的URL): 发送消息
2、message: 事件来接收消息，其中event对象
evt.origin: 发送消息所在的域
evt.data: 接收到的数据
evt.source: 向来源可以在回执信息
Example:
<iframe id="myframe" src="originPage.html"></iframe>
<button id="sendBtn">发送消息</button>
<script>
// 接收originPage.html页面消息
window.addEventListener('message', function(evt){
// ev.origin 获取消息的URL，如果不是taobao就不执行
if(ev.origin != "http://www.taobao.com"){
return false;
}
// ev.data 传输的数据
alert("那里传来的消息: " + ev.data)
}, false);
// 向originPage.html页面 发送消息
var oSendBtn = document.querySelector('#sendBtn');
oSendBtn.onclick = function(){
var iframWindow = document.querySelector('#myframe');
// postMessage()
iframWindow.postMessage("A secret", "http://www.w3cmm.com"); // window.parent.postMessage(data,'*');
}
</script>
iframe的父子窗口操作:
iframe获取父窗体的元素: window.parent.xxxx
如果iframe嵌套多层，直接获取最顶层的窗体 window.top.xxxx
父窗体获取iframe内的元素: oIfr.contentWindow.document.body.offsetHeight
webSocket
webScoket提供了浏览器和服务器之间的长链接通信，只有一方提出断开socket才会断开，否则使终链接状态
传统使用Ajax轮询来定时获取服务器的数据，缺点是每隔一断时间就需要请求一次服务器，都需要创建一次TCP和断开一次TCP连接，HTTP请求，会对服务器有压力，
使用webScoket就可以省去连接的步聚，客户端可以一直侦听服务器端推送的数据来进行处理就可以了.
创建WebSocket对象 var oWebSocket = new WebSocket('ws://192.168.1.1:8005/socket');
属性:
1、readyState: 获取socket的状态 ["正在连接", "已建立连接", "正在关闭连接", "已关闭连接"]
方法:
1、send(data): 向服务器发送数据
2、close(): 关闭socket连接
事件:
1、onmessage(): 接收服务器发送的消息
2、onopen(): 侦听打开socket
3、onclose(): 侦听关闭socket时
示例:
<script>
var statusArr = ["正在连接", "已建立连接", "正在关闭连接", "已关闭连接"];
var oSocket = new WebSocket("ws//www.baidu.com:8089"); // 必须使用ws或wss开头
// 侦听socket打开事件
oSocket.onopen = function(evt){
console.log(statusArr[oSocket.readyState]);
}
// 侦听socket关闭
oSocket.onclose = function(evt){
console.log(statusArr[oSocket.readyState]);
}
// 侦听接收服务器端传来的数据
oSocket.onmessage = function(evt){
var data = evt.data;
console.log(data);
}
// 向服务器发送数据
$("#box").click(function(){
oSocket.send("向服务器发送数据")
})
// 断开与服务器的socket连接
$("#close").click(function(){
oSocket.close();
})
</script>
本地存储 localStorage、sessionStorage
本地存储与cookie的区别
cookie: 存储量比较少（浏览器不同，大致4k），有个数限制，会随请求发送到服务器
localStorage: 永久存储，每个域存储（Chrome是2.6MB，IE是5MB），总体数量无限制
sessionStorage: 只在session内有限，存储没有限制
方法:
1、setItem(key, value): 保存数据
2、getItem(key): 获取数据
3、clear(): 清空存储中的所有数据
4、removeItem(key): 删除存储中的一项
5、key(n): 返回存储中的第n个键名
length: 返回存储数量
监听:
window.addEventListener('storage', showStorageEvent, false);
web Workers 多线程
js是单线程，页面有大量计算就很容易阻塞页面的执行，H5可以使用web workers来处理.
创建web workers对象: new Worker('work.js');
方法:
1、postMessage(data): 向web workers传送数据
事件:
1、onmessage(): 监听处理完发送的数据
2、onerror(): 错误时处理的事件
Example:
main.js:
var oWorker = new Worker('js/worker.js');
oWorker.postMessage(1000000); // 发送要处理的数据
oWorker.onmessage = function(ev){
var od = ev.data; // 接收处理完的值
}
worker.js
onmessage = function(ev){ // 侦听传来的数据
var od = ev.data;
var num = 20;
for(var i=0; i<od; i++){
num *= i;
}
postMessage(num); // 多处理处理完返回的数据
}
注意:
1、多线程必须要在服务环境下进行开发，否则会报错
2、处理线程的JS文件，没有window，document，DOM等对象。但是可以使用navigator，location，XMLHttpRequest等对象。
这些限制导致了Web Worker一般用于有耗时较长的业务中，比如有大量计算的页面
Geoloation 地理位置
处于安全考虑，地理位置信息属于用户隐私，当浏览器获取设备信息需要得到用户的确认
检测是否可以使用:
if(navigator.geoloation){
// 支持地址位置信息
}
一、Geoloation方法:
1、getCurrentPosition( // 首次取得当前地理位置
function(position){
// 返回坐标回调 position对象
pos.latitude
},
function(error){
// 错误显示
},
{对象用来处理如何获取位置}
}
2、watchPosition(): 监听不断变化的移动设备，原理与steInterval差不多，用法与getCurrentPosition一样也是三个参数
3、clearWatch(): 删除监听watchPosition()
Example:
navigator.geoloation.getCurrentPosition(function(pos){
// pos.coords.latitude; // 当前纬度
})
二、position对象: 获取地理位置成功后返回position对象
属性:
1、latitude: 纬度
2、longitude: 经度
3、altitude: 海拔
4、accuracy: 纬度或纬度的精度（以米为单位）
5、altitudeAccurancy: 获取到海拔高度的精度（以米为单位）
6、heading: 设备前进方向，以旋转角度来表示
7、speed: 设备前进的速度（以米/秒为单位）
8、timestamp: 获取地理位置信息的时间
错误返回三种值: 1 = 用户拒绝了位置服务、 2 = 获取不到位置信息、3 = 获取信息超时错误
timeout: 几秒后获取不到返回失败
maxmumAge: 对地理位置 进行缓存的有效时间（毫秒）
Example:
<script>
var oBox = getId("box");
var sHtml = [];
function getId(id){
return document.getElementById(id);
}
function successFun(position){
console.log("地理位置是: " +position.coords.latitude+"，"+position.coords.longitude);
}
function errorFun(err){
// console.log(err.message); // 错误信息
// console.log(err.code); // 错误码
switch(err.code){
case 1:
alert("用户拒绝了位置服务");
break;
case 2:
alert("获取不到位置信息");
break;
case 3:
alert("获取信息超时错误");
break;
}
}
// 创建geolocation对象
function createGeolocation(){
if(navigator.geolocation){ // 标准浏览器支持
// 获取坐标
navigator.geolocation.getCurrentPosition(successFun, errorFun, {
// 设置缓存有效时间为2分钟
maximumAge : 60*1000*2,
// 5秒内未获取到地理位置则返回错误
timeout : 10000
})
}
else{
alert("你使用的是非标准浏览器");
}
}
createGeolocation();
</script>
http://www.alloyteam.com/2015/08/mobile-phone-location-on-the-sensor/
Video 和 audio 多媒体
canvas绘图
History 历史管理
可以在添加一条记录到历史记录的列表中，或者在没有刷新时，可以更新地址栏的URL。单页面的的跳转就用到了这里
例Vue的路由有两种模式: hash和history, history就用到了历史管理，使url改变不会去请求http
一、JS对象
1、length: 浏览器历史列表url的数量
2、back(): 向后一个url
3、forward(): 向前一个url
4、go(-1): 指定跳转到哪个历史
二、HTML5提供两个新方法:
可以通过新增的方法做到页面跳转不重新请求页面
1、history.state: 当前url下对应状态信息，如果当前url不是通过pushState或replaceState添加的, state
2、history.pushState(state, title, url): 在不刷新页面的情况下，添加历史记录，可以前进和后退
state: 存储JSON字符串
title: 浏览器不支持设置null
url: 更新浏览器的地址
3、history.replaceState(): 与pushState基本上同，不同的是不可以前进和后退
4、popstate 事件: 侦听前进和后退
Example:
window.addEventListener('popstate', function(e){
getContent(location.pathname, false);
})
var getContent=(url, addEnter) => {
$.get(url, function(dat){
history.pushState(null, null, url)
})
}
https://segmentfault.com/a/1190000002468274
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html