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