1.1 認識HTML5
HTML5並不僅僅只是做為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標准，成為第一個將Web做為應用開發平台的HTML語言。
HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用，甚至結合Canvas我們可開發網頁版游戲。
我們日常討論的H5其實指的是一個范稱，它是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平台。
1.2 語法規范
隨着Web技術的更新，HTML也先后經歷了HTML 4.01、XHTML 1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時對語法規范也做了一些調整，為了能夠保證瀏覽器可以兼容不同版本語法規范的，我們可以使用<!DOCTYPE>指示瀏覽器應該如何處理。
HTML5在語法規范上也做了比較大的調整，去除了許多冗余的內容，書寫規則更加簡潔、清晰。
見代碼實例
特點：
1、更簡潔
2、更寬松
實際開發中應規范書寫，不建議太隨意 ！
現在基本所有網站都采用了HTML5的<!DOCTYPE>
W3C驗證地址
https://validator.w3.org/
第2章語義標簽
語義標簽對於我們並不陌生，如<p>表示一個段落、<ul>表示一個無序列表<h1> ~ <h6>表示一系列標題等，在此基礎上HTML5增加了大量更有意義的語義標簽，更有利於搜索引擎或輔助設備來理解HTML頁面內容。
傳統的做法我們或許通過增加類名如class="header"、class="footer"，使HTML頁面具有語義性，但是不具有通用性。
HTML5則是通過新增語義標簽的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就可以使其具有通用性。
此章節學習目的為了解增加語義標簽的目的，以及各語義標簽所表達的意義，在網頁布局中能夠合理使用標簽。
2.1 常用新語義標簽
<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章 如文章、評論、帖子、博客
<aside> 表示側邊欄 如文章的側欄
<figure> 表示媒介內容分組 與 ul > li 做個比較
<mark> 表示標記 (帶用“UI”，不怎么用，可以重寫樣式)
<progress> 表示進度 (帶用“UI”，不怎么用，不可重寫樣式)
<time> 表示日期
<hgroup> 標題列表 (據說已廢棄)
<details>
<bdi>
<command>
<summary>
<rp>
<rt>
<ruby>
本質上新語義標簽與<div>、<span>沒有區別，只是其具有表意性，使用時除了在HTML結構上需要注意外，其它和普通標簽的使用無任何差別，可以理解成<div class="nav"> 相當於 <nav>。不要好奇，它只是一個標簽！
盡量避免全局使用header、footer、aside等語義標簽。
2.2 兼容處理
在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內元素(inline)對待，所以我們只需要將其轉換成塊元素(block)即可使用，但是在IE9版本以下，並不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創建的自定義標簽，於是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創建一遍，這樣IE低版本也能正常解析HTML5新標簽了，在實際開發中我們更多采用的是通過檢測IE瀏覽器的版本來加載第三方的一個JS庫來解決兼容問題。
第3章表單
伴隨着互聯網富應用以及移動開發的興起，傳統的Web表單已經越來越不能滿足開發的需求，所以HTML5在Web表單方向也做了很大的改進，如拾色器、日期/時間組件等，使表單處理更加高效。
此章節學習目的，了解HTML5表單的新增的特性，以及PC和移動設備間的差異，其兼容性較差。
3.1 輸入類型
email 輸入email格式
tel 手機號碼
url 只能輸入url格式
number 只能輸入數字
search 搜索框
range 范圍
color 拾色器
time 時間
date 日期 不是絕對的
datetime 時間日期
month 月份
week 星期
部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用。
3.2 表單元素（標簽）
<datalist> 下拉選項，使用中文時要注意
<keygen> 生成加密字符串
<output> 不可當做數據提交？
<meter> 表示度量器，不建議用作進度條
3.3 表單屬性
placeholder 占位符
autofocus 獲取焦點
multiple 文件上傳多選或多個郵箱地址
autocomplete 自動完成，用於form元素，也可用於部分input，默認值on
form 指定表單項屬於哪個form，處理復雜表單時會需要
novalidate 關閉驗證，可用於<form>標簽，（只適應用form）
required 驗證條件，必填項
pattern 正則表達式 自定義驗證規則
表單重寫沒有提及，自行驗證，共包含
formaction、formenctype、formtarget、formmethod、formnovalidate
應用於提交按鈕上，如：<input type="submit" formaction="xxx.php">
3.4 表單事件
oninput 用戶輸入內容時觸發，可用於移動端輸入字數統計
oninvalid 驗證不通過時觸發
第4章多媒體
在HTML5之前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放，但是大多情況下，並非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的非常復雜，並且移動設備的瀏覽器並不支持Flash插件。
此章節學習目的，了解如何通過HTML5播放音頻/視頻，以及針對不同瀏覽器所支持的格式，做多瀏覽器兼容處理。
4.1 音頻
HTML5通過<audio>標簽來解決音頻播放的問題。
使用相當簡單，如下圖所示
並且可以通過附加屬性可以更友好控制音頻的播放，如：
autoplay 自動播放
controls 是否顯不默認播放控件
loop 循環播放
preload 預加載 同時設置autoplay時些屬性失效
由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的
多瀏覽器支持的方案，如下圖
4.2 視頻
HTML5通過<video>標簽來解決音頻播放的問題。
同音頻播放一樣，<video>使用也相當簡單，如下圖
同樣，通過附加屬性可以更友好的控制視頻的播放
autoplay 自動播放
controls 是否顯示默認播放控件
loop 循環播放
preload 預加載，同時設置了autoplay，此屬性將失效
width 設置播放窗口寬度
height 設置播放窗口的高度
由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的
第5章微數據
1、微數據
http://kayosite.com/html5-microdata.html
可以理解成新語義標簽的一種補充
2、ARIA
http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaRole
第6章DOM擴展
6.1 獲取元素
1、document.getElementsByClassName ('class') 通過類名獲取元素，以類數組形式存在。
2、document.querySelector('selector') 通過CSS選擇器獲取元素，符合匹配條件的第1個元素。
3、document.querySelectorAll('selector') 通過CSS選擇器獲取元素，以類數組形式存在。
6.2 類名操作
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切換class，有則移除，無則添加
4、Node.classList.contains('class') 檢測是否存在class
Node指一個有效的DOM節點，是一個通稱。
6.3 自定義屬性
在HTML5中我們可以自定義屬性，其格式如下data-*=""，例如
data-info="我是自定義屬性"，通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
Node.dataset是以對象形式存在的
當我們如下格式設置時，則需要以駝峰格式才能正確獲取
data-my-name="itcast"，獲取Node.dataset['myName']
6.4 案例練習
Tab切換
第7章新增API
7.1 拖拽
在HTML5的規范中，我們可以通過為元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啟的。
7.1.1 拖拽元素
頁面中設置了draggable="true"屬性的元素
7.1.2 目標元素
頁面中任何一個元素都可以成為目標元素
7.1.3 事件監聽
拖拽元素
ondrag 應用於拖拽元素，整個拖拽過程都會調用
ondragstart 應用於拖拽元素，當拖拽開始時調用
ondragleave 應用於拖拽元素，當鼠標離開拖拽元素時調用
ondragend 應用於拖拽元素，當拖拽結束時調用
目標元素
ondragenter 應用於目標元素，當拖拽元素進入時調用
ondragover 應用於目標元素，當停留在目標元素上時調用
ondrop 應用於目標元素，當在目標元素上松開鼠標時調用
ondragleave 應用於目標元素，當鼠標離開目標元素時調用
數據傳遞
ev.dataTransfer.setData() 設置數據
ev.dataTransfer.getData() 讀取數據
7.2 歷史管理
提供window.history，對象我們可以管理歷史記錄，可用於單頁面應用，Single Page Application，可以無刷新改變網頁內容。
7.2.1 舊版本
history.back() 回退
history.forward() 前進
history.go(n) 前進/后退n步，正值前進，負值后退
history.length歷史記錄條數
7.2.2 新增方法
1、pushState(data, title, url) 追加一條歷史記錄
data用於存儲自定義數據，通常設為null
title網頁標題，基本上沒有被支持，一般設為空
url 以當前域為基礎增加一條歷史記錄，不可跨域設置
2、replaceState(data, title, url) 與pushState()基本相同，不同之處在於replaceState()，只是替換當前url，不會增加/減少歷史記錄。
Single Page Application單頁面應用
7.2.3 事件監聽
onpopstate事件，當前進或后退時則觸發，通過事件對象ev.state可以讀取到存儲的數據，監聽是要給window。
7.3 地理定位
在HTML規范中，增加了獲取用戶地理信息的API，這樣使得我們可以基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)
7.3.1 獲取地理信息方式
1、IP地址
2、三維坐標
GPS（Global Positioning System，全球定位系統）
Wi-Fi
手機信號
3、用戶自定義數據
如下圖對不同獲取方式的優缺點進行了比較，瀏覽器會自動以最優方式去獲取用戶地理信息。
7.3.2 隱私
HTML5 Geolocation 規范提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。
7.3.3 API詳解
navigator.getCurrentPosition(successCallback, errorCallback, options) 獲取當前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重復獲取當前地理信息
1、當成功獲取地理信息后，會調用succssCallback，並返回一個包含位置信息的對象position。
position.coords.latitude緯度
position.coords.longitude經度
position.coords.accuracy精度
position.coords.altitude海拔高度
2、當獲取地理信息失敗后，會調用errorCallback，並返回錯誤信息error
3、可選參數 options 對象可以調整位置信息數據收集方式
a) enableHighAccuracy 高精度模式
b) timeout 超時設置，單位為ms
c) maximumAge表示瀏覽器重新獲取位置信息的時間間隔，單位為ms
7.4 Web存儲
隨着互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小只有4k左右，並且解析也相當的復雜，給開發帶來諸多不便，HTML5規范則提出解決方案。
7.4.1 特性
1、設置、讀取方便
2、容量較大，sessionStorage約5M、localStorage約20M
4、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲
7.4.2 window.sessionStorage
1、生命周期為關閉瀏覽器窗口
2、在同一個窗口下數據可以共享
7.4.3 window.localStorage
1、永久生效，除非手動刪除
2、可以多窗口共享
7.4.4 方法詳解
setItem(key, value) 設置存儲內容
getItem(key) 讀取存儲內容
removeItem(key) 刪除鍵值為key的存儲內容
clear() 清空所有存儲內容
key(n) 以索引值來獲取存儲內容
7.4.5 其它
WebSQL、IndexDB
7.5 全屏
HTML5規范允許用戶自定義網頁上任一元素全屏顯示。
requestFullScreen() 開啟全屏顯示
cancelFullScreen() 關閉全屏顯示
不同瀏覽器需要添加前綴如：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancelFullScreen、mozCancelFullScreen
規范允許所有元素可以取全屏，但實際測試結果關閉全屏只能添加到document元素上
通過document.fullScreen檢測當前是否處於全屏狀態
不同瀏覽器需要添加前綴
document.webkitIsFullScreen、document.mozFullScreen
全屏偽類
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
7.6 網絡狀態
我們可以通過window. navigator.onLine來檢測，用戶當前的網絡狀況，返回一個布爾值
addEventListener 進行綁定online用戶網絡連接時被調用
addEventListener 進行綁定.offline用戶網絡斷開時被調用
事件是給window綁訂的
7.7 應用緩存
HTML5中我們可以輕松的構建一個離線（無網絡狀態）應用，只需要創建一個cache manifest文件。
7.7.1 優勢
1、可配置需要緩存的資源
2、網絡無連接應用仍可用
3、本地讀取緩存資源，提升訪問速度，增強用戶體驗
4、減少請求，緩解服務器負擔
7.7.2 緩存清單
一個普通文本文件，其中列出了瀏覽器應緩存以供離線訪問的資源，推薦使用.appcache為后綴名，添加MIME類型
AddType text/cache-manifest .appcache
例如我們創建了一個名為demo.appcache的文件，然后在需要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"，路徑要保證正確。
7.7.3 manifest文件格式
1、頂行寫CACHE MANIFEST
2、CACHE: 換行 指定我們需要緩存的靜態資源，如.css、image、js等
3、NETWORK: 換行 指定需要在線訪問的資源，可使用通配符
4、FALLBACK: 換行 當被緩存的文件找不到時的備用資源
7.7.4 事件監聽
可自行查閱資料
7.7.5 其它
1、CACHE: 可以省略，這種情況下將需要緩存的資源寫在CACHE MANIFEST
2、可以指定多個CACHE: NETWORK: FALLBACK:，無順序限制
3、#表示注釋，只有當demo.appcache文件內容發生改變時或者手動清除緩存后，才會重新緩存。
4、chrome 可以通過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存
7.8 文件讀取
通過FileReader對象我們可以讀取本地存儲的文件，可以使用 File 對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個 <input> 元素上選擇文件后返回的FileList 對象，也可以來自由拖放操作生成的 DataTransfer
7.8.1 FileList對象
由於HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過<input>上傳文件后得到的是一個FileList對象（偽數組形式）。
7.8.2 FileReader對象
HTML5新增內建對象，可以讀取本地文件內容。
var reader = new FileReader; 可以實例化一個對象
實例方法
1、readAsDataURL() 以DataURL形式讀取文件
事件監聽
onload 當文讀取完成時調用
屬性
result 文件讀取結果
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
7.9 多媒體
方法：load()、play()、pause()
屬性：currentSrc、currentTime、duration
事件：
參考文檔
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp