H5的出現(xiàn)，引進了一些新標簽和新功能，新標簽中比較常用的就是video（視頻）和audio（音頻）以及表單的幾個屬性，其中video的一些屬性還是值得學習一下的，例如：
video屬性：
pc-flash
video width="600"
controls 播放條
autoplay 自動播放
loot 循環(huán)
poster 封面圖片
好了，說完了新標簽，下面我們重點還是來聊一聊H5的一些新功能吧。
H5新功能大概有如下：
1.geoLocation
地理定位
應用：微信，陌陌等聊天軟件 地圖 團購 外賣 等
原理：PC——IP
手機 gps 基站定位
navigator.userAgent
navigator.geolocation ——> chrome google api
longitude 經(jīng)度
latitude 緯度
altitude 海拔
heading 朝向
speed 速度
ev.code 錯誤狀態(tài)碼
ev.message 錯誤信息
2.localStorage
localStorage： 大小：5M 直接用 沒有過期時間
兼容： IE7+
在測試IE 必須在服務器環(huán)境下
標準方法:
存：
localStorage.setItem('userName','aaa');
取：
localStorage.getItem('userName');
刪：
localStorage.clear();
全刪：
for(var name in localStorage){
delete localStorage[name]
}
事件： onstorage
window.onstorage=function(){};
3.重力感應
DeviceMotionEvent
devicemotion 加速度信息
ev.accelerationIncludingGravity 加速度
例：
document.addEventListener('DOMContentLoaded',function(){
var oDiv = document.querySelector('#div1');
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',function(ev){
var acc = ev.accelerationIncludingGravity;
var x = acc.x;
var y = acc.y;
var z = acc.z;
oDiv.innerHTML = 'x=>'+x+',y=>'+y+',z=>'+z; },false);
}
},false);
4.webwoker 多線程
單線程 一件事沒有執(zhí)行完 不能做后面的事
多線程 做一個事的同時 能同時干別的事
js是單線程
5.canvas 繪圖
canvas 繪圖 性能極高 兼容：IE9+
畫圖的步驟
1.獲取畫布
var oC = document.querySelector('#c');
2.創(chuàng)建畫筆
var gd = oC.getContext('2d');
3.起始點 連接點 -> 路徑 //moveTo lineTo
4.closePath
5.描邊/填充 stroke/fill
矩形：strokeRect(x,y,w,h)
6.優(yōu)雅降級和漸進增強
漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 ：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
二者區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。
7.移動應用，移動端布局等
1.calc
width:calc(100% - 2px);
2.box-sizing:border-box;
3.彈性盒模型
父級 display:-webkit-box;
子級 -webkit-box-flex:1
垂直水平居中
-webkit-box-align:center;
-webkit-box-pack:center;
移動端常見布局
1.流體布局
width 100% +float
2.定寬
a)width:320px 缺點：留白
b)min-width max-width;
3.相對單位布局
rem 切圖 先想象一個完美的布局，然后再算比例 文字 px
iphone5 320 ->視網(wǎng)膜屏幕retina 2x 640
iphone6 375
iphone6p 414
——End
