一、 HTML5新增的標(biāo)簽
（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何讓新標(biāo)簽兼容低版本瀏覽器： html5shiv.js
二、 HTML5新增的表單控件
一、表單控件的新屬性
<input type="text" placeholder="" required autofocus pattern="abc" >
二、新增的表單控件
（1）<input type="email">
（2）<input type="url">
（3）數(shù)字控件： type="number"
（4）滑動(dòng)組件： type="range"
（5）拾色器： type="color"
（6）日期控件： type="date"
三、本地存儲(chǔ)
1、 三種本地存儲(chǔ) ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)寫入： localStorage.setItem(鍵，值); //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）讀取 var user = localStorage.getItem("user")
var user = localStorage.user;
(3)刪除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(鍵，值);
sessionStorage.getItem(鍵);
sessionStorage.removeItem(鍵);
sessionStorage.clear();
**********重點(diǎn)**********
4、cookie webStorage(localStorage sessionStorage)三者的區(qū)別
四、離線存儲(chǔ)
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解離線存儲(chǔ)的更新方式
五、移動(dòng)端的布局思路：
1、設(shè)備像素比（倍率） 邏輯像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">
3、使用rem單位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
});
function success(pos){
緯度: pos.coords.latitute
經(jīng)度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success);
七、地理定位和百度地圖API的結(jié)合
八、視頻，音頻 <video autoplay="autoplay" controls="controls" loop="loop" poster="" preload="preload"> <audio>
九、移動(dòng)端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判斷是否為移動(dòng)端： if ("ontouchstart" in document){}
(3) 移動(dòng)端事件的事件對(duì)象及常用屬性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移動(dòng)端常見問題及解決方案：
a、 click事件 300ms的延遲： <1>zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有點(diǎn)透問題 ： （1） fastclick.js
(5) zepto的touch模塊： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （參考官網(wǎng)）
十一、 canvas
(1) <canvas width="600" id="can"></canvas> 300*150
(2) var can = document.getElementById("can");
var cxt = can.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,200);
cxt.lineTo(200,400);
cxt.strokeStyle = '#f00';
cxt.stroke();
cxt.clearRect(0,0,200,300);
context.globalCompositeOperation="destination-out"; (了解)
