新增API
语义： 能够让你更恰当地描述你的内容是什么。
连通性： 能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行（离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中使用文件[FileReader]）。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择(canvas、webGL)。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用（WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件）。
设备访问 Device Access：能够处理各种输入和输出设备（触控事件touch、使用地理位置定位、检测设备方向）。
语义元素
<section></section> 包含了一组内容及其标题。
<article></article> 定义独立的内容
<nav></nav> 定义导航链接部分区域
<aside></aside>标签定义页面主区域内容之外的内容,与主区域的内容相关;侧边栏
<header></header>
<footer></footer>
表引入外部内容
<blockquote>块引用</blockquote>
<details></details>
<fieldset>字段集</fieldset>
<cite>引例</cite>
<address></address>作者地址元素
<time></time>
<data value='433322'></data>将一个指定内容和机器可读的翻译联系在一起。value指定元素内容对应的机器可读的翻译
<figure>img<figcaption>元素代表一段独立的内容，经常与说明caption配合使用</figcaption></figure> figcaption定义figure的标题
<mark></mark>元素 突出显示的文本通常和当前用户活动具有某种关联性，而<strong></strong>用来表示文本在上下文中的重要性
<progress value='70' max='100'>70%</progess>进度条
对于不支持HTML5的浏览器，默认为inline;只需另为定义一下section,article,aside,footer,header,nav,hgroup{display:block;}；2还需要引入goole的html5shiv.js
如果禁用脚本：则加上noscript标签
嵌入媒体：<audio controls></audio>、<video></video>
属性：src=url
controls:显示标准的HTML5控制器
autoplay:是音频自动播放
loop：音频重复循环播放
preload='auto' 表缓冲文件的属性，其值有：none不缓冲；auto缓冲音频文件；metadata缓冲文件的元数据
<source src='' type=''>来指定多个文件，为不同浏览器提供可支持的编码格式<video><source src='' type='video/ogg'...><source type='video/mp4' ...></video>
js操作媒体var v=document.getElementByTagName('video')[0];
v.play(); v.pause(); v.volume+=0.1; v.volume-=0.1;
终止媒体下载：v.pause();v.src=''; or v.removeAttribute('src');
在媒体中查找：v.seekable.start();返回开始时间
v.seekable.end();返回结束时间
v.currentTime = 122;设定在122s
v.played.end(); 返回浏览器播放的秒数
v.muted;是否静音，默认为false，表示有声音
arc='..../...#20,50' 默认从20s 到50s；02:30:00
v.networkState 检测加载的媒体
<track>元素被当作媒体元素audio video 的子元素来使用，允许指定计时字幕，如自动处理字幕／
表单元素<input>type特性
search:会自动取掉换行符
tel:可加pattern maxlength限制输入的值
url
新增属性 <input list='brower'> <datalist id='brower'><option value='v1'><option value='v2'></datalist>
pattern 正则表达式
form 定义该input属于那个<form>元素的
formmethord:覆盖get post
formnovalidate 该input不验证
<form>元素新特性：novalidate:设置了该特性不会再表单提交之前进行验证
<datalist><output>
placeholder autofocus
web存储：
web存储的主要目的：提供一种在cookie之外存储会话数据的途径；提供一种存储大量可以跨会话存在的数据机制。
localStorage和sessionStorage对象都是以windows对象属性的形式存在的
localStorage 对象存储的数据没有时间限制 localStorage.lastname="Smith";localStorage.lastname；持久保存客户端文档或用户偏好设置。
sessionStorage 方法针对一个session进行数据存储，当用户关闭浏览器窗口时，数据会被删除,针对小段数据的存储。
setItem()直接设置新的属性来存储数据
／／无法解析sessionStorage.begin();//确保在这段代码执行的时候不会发生其他磁盘写入操作
//使用sessionStorage方法存储数据
sessionStorage.setItem('name','Nicholas');
//使用属性存储数据
sessionStorage.book = 'Profession JavaScript';
／／无法解析sessionStorage.commit(); 在所有设置完成后调用commit()方法
getItem()或者通过直接访问属性名来获取数据。
//使用方法读取数据
var name = sessionStorage.getItem('name');
//使用属性读取数据
var book = sessionStorage.book;
删除数据可以使用delete操作符删除对象属性，也可以调用removeItem()方法
delete sessionStorage.name;
sessionStorge.removeItem('book')
length属性、key()方法 迭代sessionStorage的值
for (var i = 0,len=sessionStorage.length;i<len;i++){ var key = sessionStorage.key(i); var value = sessionStorage.getItem(key); alert(key + "=" +value) }
清除所有数据：localStorage.clear()
localStorage规定：要访问同一个localStorage对象，页面必须来自于同一个域名，使用同一种协议，在同一个端口。
//使用方法存储数据 localStorage.setItem('name','Nichoalas'); //使用属性存储数据 localStorage.book = 'Professional JavaScript'; //使用方法读取数据 var name = localStorage.getItem('name') //使用属性读取数据 var book = localStorage.book;
开启离线缓存：<html manifest="demo.appcache">
File API
<input type='file' id='input' muliple>
获取文件：var selfile = document.getElementById('input').files[0];
属性：selfiles.length 选了几个文件
单独文件：
再选择一个或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件，每个File对象都有下列只读属性:
name:本地文件系统的文件名
size:文件的字节大小
type:字符串，文件的MIME类型。
lastModifiedDate:字符串，文件上一次被修改的事件（chrome）
拖拽 拖放drag drop
dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素。
drag:拖拽元素时触发，这个事件对象是被拖拽元素。
dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素。
dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素。
dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素。
drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素。
dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素。
<div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'> </div> <img id='drag1' src='' draggable='true' ondragstart='drag(event)' /> <script> function allowDrop(ev){ev.preventDefault();} function drag(ev){ev.dataTransfer.setData('Text',ev.target.id);} function drop(ev){ev.preventDefault(); //通过利用dataTransfer对象传递 var data=ev.dataTransfer.getData('Text'); ev.target.appendChild(document.getElementById(data));} </script>
读取文件FileReader:
使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件，可以使用Blob或File对象来指定所要处理的文件或数据
var reader = new FileReader();
var reader = new FileReader(); reader.onload = function(ofile){ document.getElementById('preview').src = ofile.target.result; }; function loadImageFile(){ var oFile = document.getElementById('uploadImage').files[0]; reader.readAsDataURL(oFile); }
方法： abort(); 终止读取文件
readAsArrayBuffer();
readAsBinaryString();
readAsDataURL();
readAsText();
状态常量： EMPTY 0; LOADING 1; DONE 2;
属性：error ; readyState ; result ;
Canvas：
是一个可以使用js在一个会版上（html元素）绘制图形。
<canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> //canvas中间的内容为替换内容 </canvas>
方法：getContext('2D');获得上下文和他的绘画功能
var canvas = document.getElementById('canvas'); if(canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200,0,0); ctx.fillRect(10,10,55,50); //绘制矩形 ctx.fillStyle = 'rgb(0,0,200,0.3); ctx.fillRect(30,30,55,50);
//绘制路径
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
绘制文字
ctx.font = '46px serif';
ctx.fillText('Hello world',10,50);
var img = new Image();
img.src = 'myImage.png'; 设置图片源地址
canvas提供三种方法绘制矩形：
ctx.fillRect(x,y,width,height): 绘制一个填充的矩形
.strokeRect(x,y,width,height): 绘制一个矩形的边框
.clearRect(x,y,width,height): 清除指定矩形区域，让清楚部分完全透明
绘制路径
.beginPath()
.closePath()
.stroke()通过线条绘制图形轮廓；
.fill()通过填充路径的内容区域生成实心的剧图形
绘制圆弧
.arc(x,y,radius,startAngle,endAngle,anticlockwise)画一个以x,y为圆心，radius为半径，从startAngle开始，endAngle结束，顺时针false
.arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，再以直线链接两个控制点
绘制文本
.fillText(text,x,y [,maxWidth])
.strokeText(text,x,y [,maxWidth])
绘制图片
drawImage(image, x, y)其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标
.moveTo(x,y)移动笔触
.lineTo(x,y)绘制直线
.fillStyle = color
.strokeStyle = color
worker接口会生成真正的操作系统级别的线程；可以向由他的创建者指定的时间监听函数传递消息，这样worker生成的所有的任务都会接受到这些消息。js属于单线程环境，无法同时运行多个脚本，web Worker可以一次生成多个线程用于长时间运行任务
var myWorker = new Worker('my_task.js');
myWorker.postMessage('ali'); html页面向worker发送消息
myWorker.onmessage = function(oEvent){oEvent.data}; html监听worker发来的数据
myWorker.terminate(); self.close(); work线程立即被杀死，不会留下任何机会让它完成自己的操作或清理工作。
//echo.js onmessage = function(e){ postMessage('echo:' + e.data); //向页面发送消息 } //html页面 <script> if (typeof (Worker) != 'undefined') { var worker = new Worker('echo.js'); worker.postMessage('text.value); worker.onmessage = function(e){e.data}; } </script>
webSocket
引入webSocket协议，因为http协议是单线程的，只允许Browser向webServer发送请求资源后才能返回相应的数据。。但要想开发一个基于web的应用程序去获取服务器的实时数据，例如股票的行情，需要客户端与服务器端反复通信，不断发送请求，浪费带宽和CPU利用率。而websocket是在Browser的新网络协议，能支持客户端的服务器端的双向通信。
webSocket协议是一种双向通信协议，建立在TCP之上，同http一样通过TCP来传输数据，但不同点是1 WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；2 webSocket需要通过握手连接，类似于TCP也需要客户端与服务器端进行三次握手连接，成功后才能进行相互通信。（在建立握手的过程，数据是通过http协议传输的）
webSocket API
var ws = new webSocket('ws://echo.websocket.org'); //实例化一个webSocket对象，连接到ws协议的服务器地址
ws.onopen = function(){ws.send('test');}; //建立连接成功后，触发onopen，发送消息，
ws.onmessage = function(evt){console.log(evt.data); ws.close();}; //客户端接收到服务器传来的数据data，然后请求关闭连接，触发onclose事件
ws.onclose = function(evt){console.log('webSocketClosed');};
ws.onerror = function(evt){console.log('webSocketError!);};
Geolocation API
地理定位通过 navigator.geolocation提供
方法1:获取当前位置 getCurrentPosition(); 接受三个参数，成功回调函数；可选失败回调函数；可选 选项对象。
成功回调函数，接受position对象参数，有coords和timestamp属性；coords对象又饱含的属性：
- latitude:以十进制度数表示的纬度。
- longitude:以十进制度数表示的经度。
- accuracy:经、纬度坐标的精度，以米为单位。有些浏览器还可能会在coords对象中提供如下属性。
- altitude:以米为单位的海拔高度，如果没有相关数据则值为null。
- altitudeAccuracy:海拔高度的精度，以米为单位，数值越大越不精确。
- heading：指南针的方向，0°表示正北，值为NaN表示没有检测到数据。
- speed：速度，每秒移动多少米，如果没有相关数据则为null。
navigator.geolocation.getCurrentPosition(function(position){ drawMapCenteredAt(position.coords.latitude, position.coords.longitude); }, function(error) { console.log("Error code: " + error.code); console.log("Error message: " + error.message); }, { enableHighAccuracy: true, //尽可能准确的位置信息 timeout: 5000, //等待信息的最长时间 maximumAge: 25000 //有效时间 });
方法2 跟踪用户的位置 watchPosition(),用法同上
var watchId = navigator.geolocation.watchPosition(function(position){ drawMapCenteredAt(position.coords.latitude, position.coords.longitude); }, function(error) { console.log("Error code: " + error.code); console.log("Error message: " + error.message); }); clearWatch(watchId); //取消监控操作
DOM节点操作QuerySelector
persent message
window.performance.timing 时间戳
可以跨域的请求AJAX
以前var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){}
xhr.open(url,'GET',false); //同域
xhr.send()
跨域：设置服务器的相应头：header('Access-Control-Allow-Origin:*或www.baidu.com,www.qq.com') //*允许所有雨都可以向此域发起请求
触摸事件：start mousedown mouseup mousemove click end
viewport固定整个页面宽度：<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
移动端 性能陷阱：
1 减少或避免 repaint页面重绘,reflow页面回流
2 缓存可缓存的数据 HTML5之前：用http的response Headers做缓存；之后 localStorage.getItem()
3 使用CSS3 transform代替DOM操作
4 不要给 非static定位元素 增加CSS3动画 (如absolute relative元素)
5 适当使用硬件加速 如1 经canvas绘制 2给position:relative的元素，开启transform:translate3d(0,0,0);硬件加速，调动GPU作处理
移动端开发原则：轻量级、维护简单、快速开发、高性能。
Application Cache :
Manifest：<html manifest = "xxx.manifest">
特点：Manifest 文件有变化才更新
一次必须更新Manifest 中的所有文件 下次才生效
缺点：延迟 更新失败
<audio src="audio.mp3" preload="auto" controls autoplay loop></audio> //autoplay是音频自动播放，loop使音频自动重复播放，controls显示自动播放器
2.接口中定义播放：var v = document.getElementsByTagName('audio')[0]; v.play();播放 v.pause();暂停 v.volume+=0.1;加音量 v.volume-=0.1;减音量
特殊元素：
移动端：1，使用css3动画，使用gpu渲染，效率高 ;
2‘使用Canvas代替Image标签，触发gpu渲染；drawImage API:drawImage(image,x,y);drawImage(img,x,y,width,height);
3、加载Image使用Image()对象方法，var img = new Image(); img.onload = function(){}; img.src = "http....";可以动态获取其height等，以适用不同屏幕自适应。代替<image>标签。
框架：zepto.js 轻量级框架，类似jquery
touch事件：引入touch module
touchsatrt 、 touchmove 、 touchend 、 touchcancel、
touch in zepto.js:tapsingleTapdoubleTaplongTapswipeswipeLeftswipeRightswipeUpswipeDown;
CSS3动画：框架：－－Animation.css
@keyframes XXX{0%:{}25%:{}...}
animation-name动画名称: XXX;
animation-duration持续时间:5s;
animation-delay执行延迟时间:2s;
animation-timing-function动画形变函数指定:linear;
animation-play-state播放状态指定:running;
animation-direcction:alternate;
动画事件：当动画之行结束时触发事件：webkitAnimationEnd()
window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);
window.history.length;
history.pushState(data,'',url)
history.onpopstate = function(){}