第一篇  從巨集觀上認識HTML 5

講述了HTML 5引發的Web革命、HTML 5的整體特性、HTML 5相關概念和框架和開發環境搭建。

第1章 HTML 5引發的Web革命

1.1  你是不是真的瞭解HTML 5

1.1.1  通過W3C認識HTML 5的發展史

1.1.2  HTML 5、HTML4、XHTML的區別

1.1.3  什麼人應該學HTML 5

1.1.4  一個圖告訴你如何學習HTML 5

1.2  瀏覽器之爭

1.2.1  說說這些常見的瀏覽器

1.2.2  瀏覽器的相容煩惱與策略

1.2.3  給你的瀏覽器打個分

1.3  學習製作一個簡單的HTML 5頁面

1.3.1  搭建開發HTML 5的瀏覽器環境

1.3.2  檢測瀏覽器是否支援HTML 5標籤

1.4  常見問題

1.4.1  學好HTML 5要學好Java嘛？

1.4.2  誰是HTML 5新規則下的犧牲品？

1.4.3  HTML 5是否有未來？

1.4.4  HTML 5在移動應用開發是否有前景？

1.5  本章小結

第2章 HTML 5的整體特性

2.1  HTML 5的元素們

2.1.1  最新的互動元素——內容互動、選單互動、狀態互動

2.1.2  HTML 5頁面結構

2.1.3  DOCTYPE和字符集

2.1.4  其他標籤元素

2.2 檢測HTML 5特性Modernizr庫

2.2.1  Modernizr庫是什麼

2.2.2  使用Modernizr庫提供的方法檢測瀏覽器的各項指標

2.3  表單和檔案

2.3.1  input元素的新增型別

2.3.2  input元素新增的公用屬性

2.3.3  新增表單元素

2.3.4  表單新增的驗證方法

2.3.5  File物件

2.3.6 FileSystem介面

2.3.7  jQueryhtml5Validate HTML5表單驗證外掛

2.4  圖形繪製

2.4.1  Canvas是什麼

2.4.2  什麼情況下用Canvas

2.4.3  檢測瀏覽器對Canvas的支援情況

2.4.4  在頁面中加入Canvas

2.4.5  SVG是什麼

2.4.6  SVG的使用

2.4.7  WebGL是什麼

2.4.8  WebGL的使用

2.4.9  Paper.js圖形庫

2.5  音訊視訊

2.5.1  音訊和視訊編碼解碼器

2.5.2  使用指令碼控制播放

2.5.3  audio元素和video元素的瀏覽器支援情況

2.5.4  音視訊的實時通訊

2.6  地理位置

2.6.1  緯度和經度座標

2.6.2  有哪些定位資料

2.6.3  怎麼保護自己的隱私

2.6.4  構建地理位置應用

2.7  拖放

2.7.1 Datatransfer物件

2.7.2  拖放的事件監聽

2.7.3  看看這些帶拖放功能的網站

2.7.4  構建網頁的拖放應用

2.8  Web儲存

2.8.1  設定和獲取資料

2.8.2 LocalStorage與SessionStorage

2.8.3  網站本地儲存相容性方案

2.8.4  如何在實際開發中使用本地儲存

2.9  HTML 5的通訊

2.9.1 PostMessage API

2.9.2 XMLHttpRequest Level 2

2.9.3  WebSocketAPI

2.9.4  Socket.IO通訊框架介紹

2.10  WebWorkers

2.10.1  與HTML5 Web Workers通訊

2.10.2  多個JavaScript檔案的載入與執行

2.10.3  子Web Workers和內嵌Web Workers

2.10.4  構建Web Workers應用

2.11  離線Web應用

2.11.1  離線Web應用相關API

2.11.2  Manifest使用介紹

2.11.3  使用ApplicationCache API

2.11.4  搭建簡單的離線應用程式

2.12  微資料

2.12.1  語義化概念

2.12.2 Microdata的前世今生

2.12.3  如何使用Microdata優化網頁

2.12.4  國內網站如何使用Microdata

2.13  HTML 5History

2.13.1  HistoryAPI介紹

2.13.2  History與Hash

2.13.3  什麼是MVC

2.13.4  主流MVC框架介紹

2.14  選擇器

2.14.1  選擇器分類

2.14.2  使用選擇器操作頁面中的元素

2.15  CSS 3特性

2.15.1  CSS 3帶來了什麼

2.15.2  開放字型格式（WOFF）

2.15.3  背景（Backgrounds）

2.15.4  文字效果（Text Effects）

2.15.5  邊框（Border）

2.15.6  使用者介面（User interface）

2.15.7  多列（Multiple Columns）

2.15.8  轉換（Transform）

2.15.9  過渡（Transition）

2.16  本章小結

第3章 HTML 5相關概念和框架

3.1  響應式Web設計

3.1.1  什麼是響應式Web設計

3.1.2  流式佈局

3.1.3  媒體查詢

3.1.4  TwitterBootstrap理念

3.1.5  TwitterBootstrap應用

3.2  移動JavaScript框架

3.2.1  SenchaTouch介紹和例子

3.2.2  jQueryMobile介紹和例子

3.2.3  PhoneGap介紹和例子

3.2.4  JQ.Mobi介紹和例子

3.3  CSS 3 UI框架

3.3.1  HTML 5Boilerplate介紹

3.3.2  Less Framework介紹

3.4  HTML 5圖表庫

3.4.1  Raphael介紹和例子

3.4.2 Highcharts介紹和例子

3.5  遊戲庫——Three.js的使用

3.6  本章小結

第4章  環境搭建

4.1 選擇一款編輯器

4.1.1  Notepad++編輯器

4.1.2  UltraEdit編輯器

4.1.3  SublimeText 2編輯器

4.2  Node.js

4.2.1  Node.js介紹

4.2.2  Node.js安裝

4.2.3  使用Node.js的NPM.

4.2.4  如何在Node.js中除錯

4.2.5  用Node.js搭建一個Web Server

4.3  jQuery框架

4.3.1  jQuery框架簡介

4.3.2  jQuery常用API

4.4  其他實戰開發技巧

4.4.1  如何在Chrome瀏覽器除錯指令碼

4.4.2  如何通過Fiddler加速開發

4.5  本章小結

第二篇  從微觀上應用HTML 5

講述了HTML 5的元素與表單大演練、Canvas圖畫大演練、音訊和視訊大演練、地理位置大演練、拖放大演練、本地儲存大演練、通訊大演練和離線Web應用大演練，並提供了大量的實際開發案例。

第5章 HTML 5元素與表單大演練

示例001  建立跨瀏覽器的HTML5表單

示例002  搞定低版本瀏覽器的相容性

示例003  建立一個HTML 5版的註冊頁面

示例004  用HTML 5的驗證方法驗證註冊頁面

示例005  搞定輸入框自動聚焦

示例006  搞定表單的自動完成

示例007  使用數字微調控制元件

示例008  新增滑動控制元件

示例009  傳送多個檔案

示例010  利用正則表示式建立自定義輸入型別

示例011  預覽上傳的圖片

示例012  無重新整理非同步上傳

示例013  拖拽上傳檔案

第6章  Canvas圖畫大演練

示例001  繪製圖形（矩形和圓形）

示例002  在圖形中寫字

示例003  畫布中使用漸變色

示例004  輸出圖片檔案

示例005  操作圖片畫素

示例006  製作一個動畫計時器

示例007  在畫布中剪貼影象

示例008  實現相片的360度旋轉特效

示例009  一個HTML 5版銷售資料圖表

示例010  製作一個簡單動畫

第7章  音訊和視訊大演練

示例001  在網頁中加入已有的視訊

示例002  做一個自己的線上音訊播放器

示例003  做一個自己的視訊播放器

示例004  動態顯示媒體檔案播放時間

示例005  解決視訊自定義工具條全屏問題

示例006  實現一個視訊的進度條

示例007  給播放器新增快進慢進按鈕

示例008  處理帶字幕的視訊

示例009  用HTML5拍照和攝像

第8章  地理位置大演練

示例001  通過IP地址獲取地理定位

示例002  通過WI-FI獲取地理定位

示例003  通過GPS獲取地理定位

示例004  手機地理定位

示例005  使用者自定義的地理定位

示例006  在Google Map顯示我在這裡

示例007  處理定位錯誤

示例008  使用Google地圖追蹤使用者的位置

示例009  使用Google地圖查詢路線

第9章  拖放大演練

示例001  實現網頁元素的拖放

示例002  拖放圖示

示例003  設定拖放的效果

示例004  對照片進行排序

示例005  拖放檔案

示例006  將商品拖入購物車

示例007  拖放圖片儲存伺服器

示例008  拖動指令碼檔案進行壓縮

示例009  可拖放文字閱讀器

第10章  本地儲存大演練

示例001  儲存與讀取登入使用者名稱與密碼

示例002  儲存與讀取臨時資料

示例003  使用本地資料庫

示例004  一個桌面提醒工具

示例005  儲存JSON物件

示例006  封堵資料洩漏

示例007  儲存資料的共享

示例008  刪除本地快取

第11章 HTML 5通訊大演練

示例001  微博訊息實時推送

示例002  線上程式碼編輯器

示例003  在iFrame中嵌入一個可變大小的編輯器

示例004  預覽網站內容

示例005  定時給客戶發訊息

示例006  通過WebSocket建立聊天室

第12章  離線Web應用大演練

示例001  使用定時器

示例002  排隊處理訂單

示例003  後臺執行一段JavaScript吧

示例004  開發一個簡單的離線應用

示例005  檢測網路的當前狀態

示例006  開發一個離線留言網頁

示例007  新增Geolocation跟蹤

示例008  設計離線事件處理程式

第三篇  HTML 5完美實戰案例

講述了兩個完整的案例分析，分別為HTML 5手機遙控PPT和響應式之新聞閱讀列表設計，將前面所學的HTML 5特性應用在現實的場景中。

第13章 HTML 5手機遙控PPT

13.1  控制器頁面預覽

13.2  使用移動裝置訪問控制器頁面

13.3  程式碼設計和分析

13.3.1  啟動伺服器

13.3.2  index路由的邏輯規則和對應模板內容

13.3.3  handle路由的邏輯規則和對應模板內容

13.4  整個例項的流程圖

13.5  相關知識點

13.5.1  Swig模板

13.5.2 Consolidate.js庫

13.6  本章小結

第14章  響應式之新聞閱讀列表設計

14.1  原型設計

14.2  模組設計

14.2.1  視覺模組設計

14.2.2  前端模組設計

14.2.3  使用Media Queries自適應各種螢幕解析度客戶端

14.3  執行效果

14.4  本章小結

附錄A  主流瀏覽器對HTML 5新特性的支援情況

附錄B  傳統HTML標籤及說明