一瘩蚪、HTML5新增標簽
header nav main footer section article hgroup figure figcaption aside video audio canvas
如何讓低版本瀏覽器兼容新標簽：html5shiv.js
二、html5新增的表單控件
1片部、表單控件的新屬性
<input type="text" placeholder="默認輸入的內(nèi)容" required autofocus>
required:此選項必填，不能空
autofocus:指定表單獲取輸入焦點
Pattern：正則驗證 - pattern=“\d{1,5}”
2霜定、新增的輸入性表單控件
email：電子郵箱文本框,跟普通的沒什么區(qū)別
- 當輸入不是郵箱的時候,驗證不通過
- 移動端的鍵盤會發(fā)生變化
tel：電話號碼
url：網(wǎng)頁的URL
search：搜索引擎
- chrome下輸入文字后档悠，會多出一個關閉的X
range：特定范圍內(nèi)的數(shù)值選擇器
min、max望浩、step(步數(shù))
例子： 用js來顯示當前數(shù)值
number：只能包含數(shù)字的輸入框
輸入框末尾有兩個箭頭 上為加 下為減
color：顏色選擇器
點擊顯示顏色版
datetime：顯示完整日期
類似select選擇樣式
datetime-local：顯示完整日期辖所， 不包含時區(qū)
time：顯示時間，不含時區(qū)
date：顯示日期{年月日}
week：顯示周{年月日周}
mouth：顯示月{年月}
<input type="text"
placeholder="請輸入4-16個字符" // 輸入框內(nèi)顯示
autocomplete="off" // 是否記錄輸入的值
autofocus // 聚焦
required // 輸入框不能為空
pattern="\d{1,5}" // 必須輸入1到5個數(shù)字
/>
// required 和 pattern 具有安全隱患 如果在控制臺修改input的pattern和required 那么就可以破除校驗
// 如果用戶在某個頁面輸入相當多的數(shù)據(jù)磨德，臨時有事需要離開一段時間缘回，此時數(shù)據(jù)應該保存至草稿箱，那么同一個form表單下典挑，將會有兩個不同地址的sumbit提交 ope瀏覽器已支持 其余瀏覽器可能不支持
<form action="https://www.baidu.com">
<input type="text">
<input type="submit" value="提交" />
<input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>
三酥宴、本地存儲
1、三中本地存儲
cookie localStorage sessionStorage
2您觉、localStorage的API
(1)寫入：
localStorage.setItem(鍵拙寡，值); //值只能是字符串
localStorage.user = "123"
localStorage["user"] = "123"
(2)讀取：
var user = localStorage.getItem("user")//'user'為存入的自定義的健名
var user = localStorage.user;
(3)修改：
localStorage.setItem("user","890")//修改其實就是從新賦值
(4)刪除：
localStorage.remove('user');//刪除單個key為user的
localStorage.clear();//刪除全部
3琳水、sessionStorage的API
跟localStorage一樣的用法
sessionStorage.setItem(鍵肆糕，值);
sessionStorage.getItem(鍵);
sessionStorage.removeItem(鍵);
sessionStorage.clear();
4、cookie webStorage(localStorage sessionStorage)三者的區(qū)別-重點-
1在孝、cookie數(shù)據(jù)始終在同源的http請求中攜帶诚啃，即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器私沮，僅在本地保存始赎。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
2极阅、存儲大小限制也不同胃碾，cookie數(shù)據(jù)不能超過4kb，同時因為每次http請求都會攜帶cookie筋搏，所以cookie只適合保存很小的數(shù)據(jù)仆百，如會話標識。其安全性也很差奔脐，如果cookie被人攔截了俄周，那人就可以取得所有的session信息。即使加密也與事無補髓迎，因為攔截者并不需要知道cookie的意義峦朗，他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了。sessionStorage和localStorage 雖然也有存儲大小的限制排龄，但比cookie大得多波势，可以達到5M或更大。
3橄维、數(shù)據(jù)有效期不同尺铣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持争舞；localStorage：始終有效凛忿，窗口或瀏覽器關閉也一直保存，因此用作持久數(shù)據(jù)竞川；cookie只在設置的cookie過期時間之前一直有效店溢，即使窗口或瀏覽器關閉。
4委乌、作用域不同床牧，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面福澡；localStorage 在所有同源窗口中都是共享的叠赦；cookie也是在所有同源窗口中都是共享的驹马。
5革砸、Web Storage 支持事件通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者糯累。
6算利、Web Storage 的 api 接口使用更方便。
ps:Web Storage帶來的好處：1泳姐、減少網(wǎng)絡流量：一旦數(shù)據(jù)保存在本地之后效拭，就可以避免再向服務器請求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請求，減少數(shù)據(jù)在瀏覽器和服務器間不必要的來回傳遞缎患；
2慕的、快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過網(wǎng)絡從服務器上獲得數(shù)據(jù)快得多挤渔，本地數(shù)據(jù)可以及時獲得肮街，再加上網(wǎng)頁本身也可以有緩存，因此整個頁面和數(shù)據(jù)都在本地的話判导，可以立即顯示
3嫉父、臨時存儲：很多時候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用，關閉窗口后數(shù)據(jù)就可以丟棄了眼刃，這種情況使用sessionStorage非常方便
localStorage和sessionStorage都是h5新增的本地存儲方法绕辖，也是通過”鍵：值”對的形式存儲數(shù)據(jù)，區(qū)別在于兩者的生存時間不同：
localStorage是持久性的擂红，即使關閉窗口或者關閉瀏覽器仪际，都不會被刪除，除非進行手動刪除昵骤；
sessionStorage是臨時的弟头，當窗口或者瀏覽器關閉，則其也會隨之清除涉茧；
4赴恨、Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的伴栓。Cookie的大小是受限的伦连，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬钳垮，另外cookie還需要指定作用域惑淳，不可以跨域調(diào)用。
除此之外饺窿，Web Storage擁有setItem,getItem,removeItem,clear等方法歧焦，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie肚医。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互绢馍，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生肠套。
四舰涌、離線存儲
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解離線存儲的更新方式
五、移動端的布局思路
1你稚、設備像素比（倍率） 邏輯像素尺寸 （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單位
4、設置不同設備中html根元素字號大小的方式有兩種
750設計稿搁痛， w = 300px ----> w = 3rem
（1）媒體查詢
html {
font-size: 100px;
}
@media (max-width: 375px){
html {
font-size: 50px;
}
}
(2) js （由base.js引申出了３げ蟆！＜Φ洹Ｓ巍！＝文啤３驳觥！-------js防抖和節(jié)流概念）
六疗垛、地理定位
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);
七症汹、視頻，音頻
<video autoplay="autoplay" controls="controls" loop="loop" poster="" preload="preload"> <audio>
八贷腕、移動端事件：
(1) 觸屏事件： ontouchstart ontouchmove ontouchend
(2) 如何判斷是否為移動端： if ("ontouchstart" in document){}
(3) 移動端事件的事件對象及常用屬性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移動端常見問題及解決方案：
a背镇、 click事件 300ms的延遲： <1>zepto的tap事件
解決辦法： fastclick.js
b、 zepto的tap事件有點透問題
解決辦法fastclick.js
(5) zepto的touch模塊： tap singleTap doubleTap longTap swipeLeft swipeRight swipeUp swipeDown
九泽裳、canvas
<canvas width="600" id="can"></canvas> 300*150
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";
