HTML5 提供了很多新的功能，主要有：
新的 HTML 元素，例如 section, nav, header, footer, article 等用于繪畫(huà)的 Canvas 元素用于多媒體播放的 video 和 audio 元素用于定位的 Geolocation API本地存儲以及離線(xiàn)應用Web Workers、Web WebSocket API移動(dòng)前端開(kāi)發(fā)可分為：
手機網(wǎng)頁(yè)開(kāi)發(fā)。這部分跟web前端開(kāi)發(fā)差別不大，使用的技術(shù)都是html+css+js。區別為手機瀏覽器是webkit的天下，pc端是IE的天下。
app前端開(kāi)發(fā)。使用的技術(shù)也是html+css+js，但它需要基于PhoneGap，React Native等開(kāi)發(fā)平臺調用手機核心功能接口（包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等）模擬native app，這部分跟web前端開(kāi)發(fā)完全不同。最終代碼發(fā)布要分別編譯成各系統平臺的app。
canvas
canvas部分請參考：
http://segmentfault.com/a/1190000000661407drag and drop(拖拽)
拖拽元素事件 : 事件對象為被拖拽元素
dragstart : 拖拽前觸發(fā) drag :拖拽前、拖拽結束之間，連續觸發(fā)dragend : 拖拽結束觸發(fā)目標元素事件 : 事件對象為目標元素
dragenter : 進(jìn)入目標元素觸發(fā)，相當于mouseoverdragover : 進(jìn)入目標、離開(kāi)目標之間，連續觸發(fā)dragleave : 離開(kāi)目標元素觸發(fā)，相當于mouseoutdrop : 在目標元素上釋放鼠標觸發(fā)事件的執行順序 ：drop不觸發(fā)的時(shí)候
dragstart > drag > dragenter > dragover > dragleave > dragend 事件的執行順序 ：drop觸發(fā)的時(shí)候(dragover的時(shí)候阻止默認事件)
dragstart > drag > dragenter > dragover > drop > dragend解決火狐下的問(wèn)題
火狐瀏覽器下必須設置dataTransfer對象的setData方法才可以拖拽除圖片外的其他標簽。
dataTransfer屬性和方法
屬性 描述 dropEffect 設置或獲取拖曳操作的類(lèi)型和要顯示的光標類(lèi)型。 effectAllowed 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized) setDragImage 三個(gè)參數：指定的元素，坐標X，坐標Y files 獲取外部拖拽的文件，返回一個(gè)filesList列表。filesList下有個(gè)type屬性，返回文件的類(lèi)型 方法 描述 clearData 通過(guò) dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數據格式。 setData() : 設置數據 key和value(必須是字符串) getData() : 獲取數據，根據key值，獲取對應的value只有加阻止默認事件才可以觸發(fā)drop
oDiv.ondragover = function(ev){ //只有加阻止默認事件才可以觸發(fā)drop ev.preventDefault(); }; drag and drop的瀏覽器支持情況：
HTML5實(shí)現拖拽上傳預覽圖片：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標題文檔</title> <style type="text/css"> #div1{ margin: 0 auto; width:200px; height:200px; background:#ccc; color: white;} #div1 p{ position: relative; top: 90px; left: 50px; } li{ width:200px; height:200px; margin:5px; float:left; list-style:none;} li img{ width:500px;height: auto} </style> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('ul1'); var oDiv = document.getElementById('div1'); oDiv.ondragenter = function(){ this.innerHTML = '可以釋放'; }; oDiv.ondragover = function(ev){ ev.preventDefault(); }; oDiv.ondragleave = function(){ this.innerHTML = '請拖拽到此區域'; }; oDiv.ondrop = function(ev){ ev.preventDefault(); var fs = ev.dataTransfer.files; for(var i=0;i<fs.length;i++){ var fr = new FileReader(); if( fs[i].type.indexOf('image')!=-1 ){ fr.readAsDataURL( fs[i] ); fr.onload = function(){ var oLi = document.createElement('li'); var oImg = document.createElement('img'); oImg.src = this.result; oLi.appendChild( oImg ); oUl.appendChild( oLi ); }; } else{ alert('親,請拖拽圖片格式'); } } }; }; </script></head><body><div id="div1"><p>請拖拽到此區域</p></div><ul id="ul1"></ul></body>FileReader(讀取文件信息)
屬性名描述
error在讀取文件時(shí)發(fā)生的錯誤. 只讀.
readyState表明FileReader對象的當前狀態(tài).
result讀取到的文件內容。這個(gè)屬性只在讀取操作完成之后才有效
方法名描述
abort中止該讀取操作.在返回時(shí),readyState屬性的值為DONE.
readAsArrayBuffer將File對象F讀取為一個(gè) ArrayBuffer 對象。
readAsBinaryString將File對象F讀取為一個(gè)二進(jìn)制字符串。
readAsDataURL將File對象F讀取為編碼過(guò)的數據URL。
readAsText(File f, [encoding])讀取 File對象F并賦予一個(gè)字符串。
創(chuàng )建一個(gè)FileReader對象：
var reader = new FileReader();Web Worker和緩存
Web Worker的基本原理就是在當前js的主線(xiàn)程中，使用Worker類(lèi)加載一個(gè)js文件來(lái)開(kāi)辟一個(gè)新的線(xiàn)程，起到互不阻塞執行的效果，并且提供主線(xiàn)程和新線(xiàn)程之間數據交換的接口：postMessage，onmessage。
主機 worker 和 worker 腳本可以通過(guò) postMessage 發(fā)送消息并使用 onmessage 事件偵聽(tīng)響應。消息的內容作為事件的數據屬性進(jìn)行發(fā)送。
var worker = new Worker('worker.js');worker.onmessage = function(e) { alert(e.data);};worker主線(xiàn)程:
1.通過(guò) worker = new Worker( url ) 加載一個(gè)JS文件來(lái)創(chuàng )建一個(gè)worker，同時(shí)返回一個(gè)worker實(shí)例。2.通過(guò)worker.postMessage( data ) 方法來(lái)向worker發(fā)送數據。3.綁定worker.onmessage方法來(lái)接收worker發(fā)送過(guò)來(lái)的數據。4.可以使用 worker.terminate() 來(lái)終止一個(gè)worker的執行。worker新線(xiàn)程：
1.通過(guò)postMessage( data ) 方法來(lái)向主線(xiàn)程發(fā)送數據。2.綁定onmessage方法來(lái)接收主線(xiàn)程發(fā)送過(guò)來(lái)的數據。例子：計數功能
首先創(chuàng )建一個(gè)index.html文件
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="index.js"></script></head><body><div id="numDiv">0</div><button type="button" id="start">start</button><button type="button" id="stop">stop</button></body></html>其次，創(chuàng )建一個(gè)count.js文件：
var countNum = 0;function count(){ postMessage(countNum); countNum++; setTimeout(count,1000);}count();再創(chuàng )建一個(gè)index.js文件
var numDiv;var work = null;window.onload = function () { numDiv = document.getElementById('numDiv'); document.getElementById('start').onclick = startWorker; document.getElementById('stop').onclick = function () { if(work){ work.terminate();//停止，釋放掉資源 work = null;//work重新初始化 } };};function startWorker(){ if(work){ return; } work = new Worker('count.js'); work.onmessage = function (e) { numDiv.innerHTML = e.data; };}
Web SQL
三個(gè)核心方法：
1、openDatabase：這個(gè)方法使用現有數據庫或創(chuàng )建新數據庫創(chuàng )建數據庫對象。2、transaction：這個(gè)方法允許我們根據情況控制事務(wù)提交或回滾。3、executeSql：這個(gè)方法用于執行真實(shí)的SQL查詢(xún)。 瀏覽器的本地數據庫占用資源少，處理速度快。
openDatabase方法打開(kāi)一個(gè)已經(jīng)存在的數據庫，如果數據庫不存在，它還可以創(chuàng )建數據庫，創(chuàng )建并打開(kāi)數據庫的語(yǔ)法如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);參數為：數據庫名（mydb）、版本號（1.0）、描述（Test DB）和數據庫大?。?*1024*1024）以及創(chuàng )建回調函數
WebSockets
TCP是因特網(wǎng)的基礎傳輸協(xié)議，而WebSocket是Web應用程序的傳輸協(xié)議，它提供了雙向的，按序到達的數據流。WebSocket連接的是URL，而非因特網(wǎng)上的主機和端口。
// 創(chuàng )建一個(gè)Socket實(shí)例var socket = new WebSocket('ws://localhost:8080');// 打開(kāi)Socketsocket.onopen = function(ev) { // 發(fā)送一個(gè)初始化消息 socket.send('hello HTML5'); // 監聽(tīng)消息 socket.onmessage = function(ev) { console.log('Client received a message',ev); }; // 監聽(tīng)Socket的關(guān)閉 socket.onclose = function(ev) { console.log('Client notified socket has closed',ev); }; // 關(guān)閉Socket.... socket.close()};同http協(xié)議使用http://開(kāi)頭一樣，WebSocket協(xié)議的URL使用ws://開(kāi)頭，而安全的WebSocket協(xié)議使用wss://開(kāi)頭。
HTTP協(xié)議通常承載于TCP協(xié)議之上，有時(shí)也承載于TLS或SSL協(xié)議層之上，這個(gè)時(shí)候，就成了我們常說(shuō)的HTTPS。
默認HTTP的端口號為80，HTTPS的端口號為443。
getUserMedia API
navigator.getUserMedia可以提示用戶(hù)需要權限去使用像攝像頭或麥克風(fēng)之類(lèi)的媒體設備.
下面是一個(gè)獲取用戶(hù)攝像頭并提供拍照功能的例子：
<body><video id="video" width="640" height="480" autoplay></video><button id="snap">Snap Photo</button><canvas id="canvas" width="640" height="480"></canvas><script type="text/javascript"> // 添加事件監聽(tīng)器 window.addEventListener("DOMContentLoaded", function() { // 獲取元素，創(chuàng )建設置等等 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // 添加video 監聽(tīng)器 if(navigator.getUserMedia) { // 標準 navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit 前綴 navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox 前綴 navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false);</script></body>下面是瀏覽器兼容性的寫(xiě)法：
<script type = 'text/javascript'> navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);</script>瀏覽器對象
audio和video
下圖是audio和video的屬性及其瀏覽器的兼容性：
Fullscreen API
進(jìn)入全屏模式
// 找到正確的方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // 啟動(dòng)全屏模式 launchFullScreen(document.documentElement); // 整個(gè)頁(yè)面 launchFullScreen(document.getElementById("videoElement")); // 單獨元素 退出全屏模式
function cancelFullscreen() { if(document.cancelFullScreen) { document.cancelFullScreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } // 取消全屏 cancelFullscreen(); 全屏屬性和事件
document.fullScreenElement：當前全屏顯示的元素。document.fullScreenEnabled：判斷瀏覽器是否支持全屏。fullscreenchange事件：全屏狀態(tài)改變事件。History API
HTML5 更新了兩個(gè)API，無(wú)刷新更新地址 history.pushState方法和history.replaceState 方法
Geolocation API
Geolocation API 是通過(guò)window.navigator.geolocation 獲得對地理定位的訪(fǎng)問(wèn)的。該對象有如下三個(gè)方法：
getCurrentPosition()watchPosition()clearWatch()
表單元素
HTML5 新增了很多表單元素讓開(kāi)發(fā)者構建更優(yōu)秀的 Web 應用程序。以下是HTML5新增的表單元素
datalistdatetimeoutputkeygen date month weektimecolornumber range email url
html5移動(dòng)端優(yōu)化
PC端的優(yōu)化對于移動(dòng)端同樣適用，Android同時(shí)支持4個(gè)并發(fā)請求，iOS 5后可支持6個(gè)，所以，應盡量減少http請求數
1. PC優(yōu)化手段在Mobile側同樣適用2. 在Mobile側我們提出三秒種渲染完成首屏指標3. 基于第二點(diǎn)，首屏加載3秒完成或使用Loading4. 基于聯(lián)通3G網(wǎng)絡(luò )平均338KB/s(2.71Mb/s)，所以首屏資源不應超過(guò)1014KB5. Mobile側因手機配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)6. 基于第五點(diǎn)，要合理處理代碼減少渲染損耗7. 基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應在處理邏輯中后置8. 加載完成后用戶(hù)交互使用時(shí)也需注意性能
不濫用Float
Float在渲染時(shí)計算量比較大，盡量減少使用不濫用Web字體
Web字體需要下載，解析，重繪當前頁(yè)面，盡量減少使用不聲明過(guò)多的Font-size
過(guò)多的Font-size引發(fā)CSS樹(shù)的效率減少重繪和回流
a) 避免不必要的Dom操作b) 盡量改變Class而不是Style，使用classList代替classNamec) 避免使用document.writed) 減少drawImageViewport可以加速頁(yè)面的渲染，請使用以下代碼
< meta name=”viewport” content=”width=device-width, initial-scale=1″>動(dòng)畫(huà)優(yōu)化
a) 盡量使用CSS3動(dòng)畫(huà)b) 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeoutc) 適當使用Canvas動(dòng)畫(huà) 5個(gè)元素以?xún)仁褂胏ss動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來(lái)觸發(fā)GPU渲染，請合理使用PS：過(guò)渡使用會(huì )引發(fā)手機過(guò)耗電增加資料參考：
如何做到一秒渲染一個(gè)移動(dòng)頁(yè)面HTML5與CSS3語(yǔ)法提供瀏覽器兼容性測試及使用建議：
http://html5please.com/meta相關(guān)總結
HTML5頁(yè)面窗口自動(dòng)調整到設備寬度，并禁止用戶(hù)縮放頁(yè)面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略將頁(yè)面中的數字識別為電話(huà)號碼
<meta name="format-detection" content="telephone=no" />忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" />當網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 -->將網(wǎng)站添加到主屏幕快速啟動(dòng)方式，僅針對ios的safari頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->移動(dòng)端touch事件(區分webkit 和 winphone)
當用戶(hù)手指放在移動(dòng)設備在屏幕上滑動(dòng)會(huì )觸發(fā)的touch事件
以下支持webkit：
touchstart——當手指觸碰屏幕時(shí)候發(fā)生。不管當前有多少只手指touchmove——當手指在屏幕上滑動(dòng)時(shí)連續觸發(fā)。通常我們再滑屏頁(yè)面，會(huì )調用event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁(yè)面滾動(dòng)touchend——當手指離開(kāi)屏幕時(shí)觸發(fā)touchcancel——系統停止跟蹤觸摸時(shí)候會(huì )觸發(fā)。例如在觸摸過(guò)程中突然頁(yè)面alert()一個(gè)提示框，此時(shí)會(huì )觸發(fā)該事件，這個(gè)事件比較少用以下支持windows phone 8：
MSPointerDown——當手指觸碰屏幕時(shí)候發(fā)生。不管當前有多少只手指MSPointerMove——當手指在屏幕上滑動(dòng)時(shí)連續觸發(fā)。通常我們再滑屏頁(yè)面，會(huì )調用css的html{-ms-touch-action: none;}可以阻止默認情況的發(fā)生：阻止頁(yè)面滾動(dòng)MSPointerUp——當手指離開(kāi)屏幕時(shí)觸發(fā)手機拍照和上傳圖片
<input type="file">的accept 屬性
<!-- 選擇照片 --><input type=file accept="image/*"><!-- 選擇視頻 --><input type=file accept="video/*">使用總結：
ios 有拍照、錄像、選取本地圖片功能部分android只有選取本地圖片功能winphone不支持input控件默認外觀(guān)丑陋移動(dòng)端手勢總結
主要用戶(hù)操作
手勢的具體操作
觸摸屏手勢
手勢的具體操作
to be continued。。。
html5移動(dòng)web開(kāi)發(fā)移動(dòng)app鏈接
