一，HTML5簡介1.1 HTML5應用簡介
誕生于2004,2007年被w3c采納，增加了多媒體，畫布的标記，并且新增了很多非常有用的js api（如離線存儲，地理位置），
可以讓前端程式員開發出使用者體驗良好的用戶端效果，随着移動端浏覽器對Html5的強力支援，html5的發展勢頭越來越好！
html5的目标：
減少外部插件支援（flash）
用功能标簽取代腳本
不基于某款裝置
html5優勢：開發效率高，成本低；移動端也支援，且風格基本統一，幾乎所有現代浏覽器都支援，并且可以通過phonegap等工具轉成移動版本
html5劣勢：不是所有native功能，硬體裝置都支援，也難以實作複雜的UI
1.2 html5與html4,css3與css2對比
html5相比較html4新增了很多标簽和api，css3是新一代樣式語言，比css2更加動态。
1.3 開發前準備（浏覽器與開發工具）
目前IE9+ google chrome等浏覽器都支援html5，但是不可避免的存在相容性問題，最好采用最新版
開發工具：記事本，editplus，WebStorm（前端開發神器）
webstorm7.0下載下傳位址：
http://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases
二，HTML5常用元素
2.1 根元素
<!DOCTYPE html>
在這個标簽前面不要留白白字元，否則可能導緻有的浏覽器不能正确解析html5元素
2.2 節點元素(section,article,header,footer,nav,address)
html5新增了很多節點元素，用于區分頁面内容，這些節點元素都是語義性質的，沒有特别的效果
2.2.1 <section>:标記文檔中的區域段落，比如文章的章節，頁眉頁腳等
<section draggable="true">
<h1>張三</h1>
</section>
這個元素的作用和div類似
2.2.2 <article>:獨立完整的内容區域，可以有更細分的内容
2.2.3 <header>:文檔或區域的頭部
2.2.4 <nav>:表示頁面的導航元素
2.2.5 <address>:定義文檔作者的相關聯系方式或位址
<address>by 張三</address>
會有斜體效果
最好不要在<address>,<footer>,<header>元素内嵌套<header>,否則可能無法正确解析
2.3 清單元素(ul,ol,dl)
dt後面可以有多個dd
2.4 其他元素（mark,cite）
mark元素的功能是在文本中高亮顯示某些文字，比如
<div> 根據中央統一安排，中央政治局常委在第二批教育實踐活動中分别聯系一個縣，<mark>×××</mark>聯系蘭考縣。
17日至18日，×××在河南省委書記郭庚茂、省長<mark>謝伏瞻</mark>陪同下，深入農村和視窗服務機關，同幹部群衆交流座談、聽取意見和建議，
實地指導蘭考縣教育實踐活動。
</div>
cite元素是一個引用标記，比如參考文獻或者報紙的引用說明。
比如：
<cite>摘自人民日報</cite>，此時會出現斜體樣式
2.5 元素屬性（draggable,hidden,contenteditable）
draggable:支援拖拽
hidden:隐藏屬性(hidden="hidden")
contenteditable:可以使内容可編輯
三，HTML5表單
3.1 input表單及其重要屬性
<input type="email" />：email輸入框
<input type="url" />：url輸入框
<input type="number" min="2" max="30" step="2.5" value="5"/>：數字輸入框,最小值是2，每步可增減2.5，預設值是5,最大值是30
<input type="range" min="0" max="255" value="150"/>:數字滑動條
<input type="date"/>：日期選擇器
<input type="search"/>：搜尋輸入框，與普通輸入框并無不同，隻是在輸入框後面加一個“叉”，用于删除搜尋關鍵字
重要屬性
placeholder：輸入提醒
required：非空驗證
autofocus：自動得到焦點
3.2 新支援的表單之datalist
目前google最新浏覽器支援
四，檔案接口及拖放
4.1 檔案選擇
multiple屬性支援多選,當把滑鼠移上去後，會出現檔案名的清單
accept屬性可以控制所選的檔案類型，比如：accept="p_w_picpath/png"，但是也可以選擇其他檔案
4.2 Blob接口
Blob表示二進制資料。
4.2.1 擷取檔案類型與大小
html5代碼：
4.3 使用FileReader接口讀取檔案
該接口既可以讀取文本檔案，還可以讀取二進制檔案
4.3.1 使用readAsDataURL方法預覽圖檔
4.3.2 使用readAsText方法讀取文本檔案
<pre>标簽會原樣輸出空格或回車
4.4 使用DataTransfer對象拖拽上傳檔案
html代碼：
4.5 html5上傳功能伺服器接收實作
可以采用common-fileupload接收上傳檔案
其中，拖拽上傳由于不是form表單送出資料，是以目前隻能采用ajax方式上傳，在html5中，我們可以通過FormData對象封裝資料
html5核心代碼如下：
五，HTML5多媒體播放
5.1 音頻播放
<audio src="莫文蔚 - 電台情歌.mp3" autoplay="autoplay" controls="controls" >浏覽器不支援音頻播放</audio>
pc端：IE9+可以支援的不錯，chrome不能拖拽進度，手機端支援良好
autoplay：自動播放
controls：生成控制條
loop:循環播放
5.2 視訊播放
<video src="Hadoop體系介紹.mp4" autoplay="autoplay" controls="controls">浏覽器不支援視訊</video>
IE9不支援mp4，chrome支援，移動端支援良好
5.2.1 poster屬性
該屬性可以在視訊播放前（時）顯示指定的圖檔（完全是為廣告做準備的啊有木有）
比如： <video src="Hadoop體系介紹.mp4" poster="MEINV.jpg" autoplay="autoplay" controls="controls">浏覽器不支援視訊</video>
我們也可以在視訊暫停(onpause事件)的時候播放圖檔：
_this.setAttribute("poster","xiaoqingxin.jpg");
5.2.2 networkState屬性
通過這個屬性可以在onprogress事件中得到視訊加載狀态
首先給标簽加上 onprogress="videoProgress(this)"
js函數如下：
5.2.3 播放開始和結束事件
onplaying：暫停後開始會重新觸發此事件
onended：視訊結束時觸發
5.2.4 播放進行時事件 ontimeupdate
視訊對象有兩個與播放時間相關的屬性：currentTime和duration，前者表示目前播放時間（機關：秒），後者表示時間總量（機關：秒）
我們可以讓ontimeupdate事件與這兩個屬性配合起來使用，動态的得到目前播放時間
5.2.5 canPlayType函數
通過這個函數可以判斷支援的媒體類型
傳回結果說明：
""空字元串表示不支援
maybe表示可能支援
probably表示最可能支援
六，Html5 Canvas
6.1 畫布簡介
canvas可以幫助我們建立一個畫布，使用js的api可以建構出任意的圖形（或導入圖檔）
6.1.1 矩形示例
6.1.2 設定邊框
//設定邊框背景色
ctx.strokeStyle="blue";
//邊框參數(x,y,width,height)
ctx.strokeRect(10,50,150,140);
其中y和height不能大于canvas的height
6.1.3 繪制路徑
html：
6.1.4 繪制圓形
繪制實心圓
繪制邊框圓時隻需把api換成：
ctx.strokeStyle="red";
ctx.stroke();就可以了
七，資料存儲
7.1 web Storage
在html5之前通常使用cookie來做用戶端存儲，但是cookie限制了資料空間大小（web storage資料大小限制在5M），保密性較差，代碼操作比較複雜，是以html5中提供了兩種資料存儲方式：
web storage和web sql，其中web storage包括sessionStorage和localStorage
7.1.1 sessionStorage對象
這個對象儲存了一次會話中的資料
儲存資料：setItem([key],[value]);比如 sessionStorage.setItem("myname","aking");
得到資料：getItem([key])，比如var myname=sessionStorage.getItem("myname"); 資料隻能在自己視窗或儲存資料頁面新開的視窗通路到
清除某個資料：sessionStorage.removeItem("myname");
清除所有資料：sessionStorage.clear();
得到資料項的個數：sessionStorage.length
通過下标得到key：sessionStorage.key([index])
循環所有資料項示例：
for(var i=0;i<sessionStorage.length;i++){
var k=sessionStorage.key(i);
alert(k+" "+sessionStorage.getItem(k));
}
7.1.2 localStorage對象
localStorage可以在用戶端長期儲存資料，它的API和sessionStorage一樣
7.2 web sql資料庫
webDB即用戶端本地提供的關系型資料庫，用于實作本地存儲，它支援javascript操作sql，非常友善
7.2.1 webDB核心API
openDatabase：這個方法使用現有資料庫或建立新資料庫建立資料庫對象。
transaction：這個方法允許我們根據情況控制事務送出或復原。
executeSql：這個方法用于執行真實的SQL語句。
7.2.2 建立（打開）資料庫
openDatabase(name,version,displayName,estimatedSize,creationCallback)
參數釋意：
name:資料庫名稱
version:版本号
displayName：描述資訊
estimatedSize：資料庫大小（以位元組為機關，比如5M=5*1024*1024）
creationCallback：建立成功之後的回調函數(可以省略不寫)
7.2.2 資料庫操作
在webDB中，執行資料的crud需要事務的支援，事務的api如下：
transaction(callback,errorCallback,successCallback)
參數釋意：
callback：事務回調函數（執行sql的地方）
errorCallback：sql執行失敗的回調函數
successCallback：sql執行成功的回調函數
7.2.2.1 建表：
其中executeSql函數的api如下：
executeSql(sqlStatement,arguments,callback,errorCallback)
參數釋意：
sqlStatement：sql語句
arguments：參數清單，數組類型
callback：成功後回調函數
errorCallback：失敗後回調函數
7.2.2.2 新增資料
八，重要的API
8.1 地理位置API（Geolocation API）
要得到地理位置需要使用window.navigator.geolocation的api：
getCurrentPosition(successCallback,errorCallback,options)
參數釋意：
successCallback:成功回調函數，此方法可以接受一個Position類型的參數，該對象可以用來描述
地理位置的詳細資訊。Position對象包含兩個屬性timestamp和coords，timestamp屬性表示擷取地理位置
時的時間，coords包含以下值：
errorCallback:失敗回調函數，此方法可以接受一個error類型的參數，該對象有兩個屬性code,message
options:可選的對象，可選項包含timeout,maximumAge，enableHighAccuracy三個屬性
timeout：逾時限制（毫秒）
maximumAge:設定地理位置緩存時間（毫秒），超過設定時間，則擷取最新時間
下面是示例代碼：
監控地理位置api：watchPosition
使用google map定位
在實際項目中，使用google map首先需要去官網申請key，但是它也支援免key測試。
google map的使用步驟如下：
1，導入
2，使用google map api
3，把geolocation得到的經緯度傳入到center和marker中
8.2 postMessage實作跨域通信
使用postMessage可以實作不同域名和端口下的文檔之間進行資料互動，postMessageAPI如下：
postMessage([message],[targetOrigin]),message表示發送的資料，targetOrigin表示發送資料的url來源
下面建立兩個html文檔，A文檔嵌入一個iframe，該iframe引用B文檔，看看怎樣實作這兩個文檔之間進行資料互動
A網頁：
A網頁javascript：
代碼解釋：首先添加接收資訊的監聽事件，用于從B頁面接收資訊。event.origin會傳回B頁面發送過來的域名端口資訊，為了安全起見，這裡
需要判斷資訊來源，event.data可以傳回對方發送過來的資訊
document.getElementById("idFrm").contentWindow得到iframe中window的句柄,postMessage函數發送資料和域名端口資訊
B網頁javascript：
代碼解釋：event.source傳回發送方的window句柄，通過句柄的postMessage将資訊發送回去
8.3 Web Socket API
web Socket可以使網頁成為一個socket用戶端，使網頁與用戶端建立長時間的socket連接配接，下面是一個簡單示例
javascript代碼：
完整socket應用需要服務端的支援，目前javaee6支援
![【web素材】01-10款大氣的購物商城網站模闆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)