HTML5網頁開發實例詳解
1 HTML 5引發的Web革命
1.1 你是不是真的了解HTML 5
1.1.1 通過W3C認識HTML 5的發展史
1.1.2 HTML 4、XHTML、HTML 5的區別
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 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 jQuery html5Validate HTML 5表單驗證插件
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 WebSocket API
2.9.4 Socket.IO通信框架介紹
2.10 Web Workers
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 5 History
2.13.1 History API介紹
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 Twitter Bootstrap理念
3.1.5 Twitter Bootstrap應用
3.2 移動JavaScript框架
3.2.1 Sencha Touch
3.2.2 jQuery Mobile介紹和例子
3.2.3 PhoneGap
3.2.4 JQ.Mobi
3.3 CSS 3 UI框架
3.3.1 HTML 5 Boilerplate
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 Sublime Text 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 本章小結
5 HTML 5元素與表單大演練
5.1 示例1 創建跨瀏覽器的HTML 5表單
5.1.1 示例效果
5.1.2 代碼設計
5.1.3 代碼分析
5.1.4 相關知識
5.2 示例2 搞定低版本瀏覽器的兼容性問題
5.2.1 示例效果
5.2.2 代碼設計
5.2.3 代碼分析
5.2.4 相關知識
5.3 示例3 創建HTML 5版的注冊頁面
5.3.1 示例效果
5.3.2 代碼設計
5.3.3 代碼分析
5.3.4 相關知識
5.4 示例4 用HTML 5的驗證方法驗證注冊頁面
5.4.1 示例效果
5.4.2 代碼設計
5.4.3 代碼分析
5.4.4 相關知識
5.5 示例5 搞定輸入框自動聚焦問題
5.5.1 示例效果
5.5.2 代碼設計
5.5.3 代碼分析
5.5.4 相關知識
5.6 示例6 搞定表單的自動完成
5.6.1 示例效果
5.6.2 代碼設計
5.6.3 代碼分析
5.7 示例7 使用數字微調控件
5.7.1 示例效果
5.7.2 代碼設計
5.7.3 代碼分析
5.7.4 相關知識
5.8 示例8 添加滑動控件
5.8.1 示例效果
5.8.2 代碼設計
5.8.3 代碼分析
5.8.4 相關知識
5.9 示例9 發送多個文件
5.9.1 示例效果
5.9.2 代碼設計
5.9.3 代碼分析
5.9.4 相關知識
5.10 示例10 利用正則表達式創建自定義輸入類型
5.10.1 示例效果
5.10.2 代碼設計
5.11 示例11 預覽上傳的圖片
5.11.1 示例效果
5.11.2 代碼設計
5.11.3 代碼分析
5.11.4 相關知識
5.12 示例12 無刷新異步上傳
5.12.1 示例效果
5.12.2 代碼設計
5.12.3 代碼分析
5.12.4 相關知識
5.13 示例13 拖曳上傳文件
5.13.1 示例效果
5.13.2 代碼設計
5.13.3 代碼分析
6 Canvas圖畫大演練
6.1 示例1 繪制圖形（矩形和圓形）
6.1.1 示例效果
6.1.2 代碼設計
6.1.3 代碼分析
6.2 示例2 在圖形中寫字
6.2.1 示例效果
6.2.2 代碼設計
6.2.3 代碼分析
6.3 示例3 在畫布中使用漸變色
6.3.1 示例效果
6.3.2 代碼分析
6.4 示例4 輸出圖片文件
6.4.1 示例效果
6.4.2 代碼分析
6.5 示例5 操作圖片像素
6.5.1 示例效果
6.5.2 代碼分析
6.6 示例6 制作動畫計時器
6.6.1 示例效果
6.6.2 代碼設計
6.6.3 代碼分析
6.7 示例7 在畫布中剪貼圖像
6.7.1 示例效果
6.7.2 代碼設計
6.7.3 代碼分析
6.8 示例8 實現相片的360°旋轉特效
6.8.1 示例效果
6.8.2 代碼分析
6.9 示例9 一個HTML 5版銷售數據圖表
6.9.1 示例效果
6.9.2 代碼設計
6.9.3 代碼分析
6.10 示例10 制作一個簡單動畫
6.10.1 示例效果
6.10.2 代碼設計
6.10.3 代碼分析
7 音頻和視頻大演練
7.1 示例1 在網頁中加入已有的視頻
7.1.1 示例效果
7.1.2 代碼分析
7.2 示例2 制做在線音頻播放器
7.2.1 示例效果
7.2.2 代碼設計
7.2.3 代碼分析
7.3 示例3 做一個自己的視頻播放器
7.3.1 示例效果
7.3.2 代碼設計
7.3.3 代碼分析
7.4 示例4 動態顯示媒體文件播放時間
7.4.1 示例效果
7.4.2 代碼分析
7.5 示例5 解決視頻自定義工具條全屏問題
7.5.1 示例效果
7.5.2 代碼分析
7.6 示例6 實現一個視頻的進度條
7.6.1 示例效果
7.6.2 代碼分析
7.7 示例7 給播放器添加快進慢進按鈕
7.7.1 示例效果
7.7.2 代碼分析
7.8 示例8 處理帶字幕的視頻
7.8.1 示例效果
7.8.2 代碼分析
7.9 示例9 用HTML 5拍照和攝像
7.9.1 示例效果
7.9.2 代碼設計
7.9.3 代碼分析
7.9.4 相關知識
8 地理位置大演練
8.1 示例1 通過IP地址獲取地理定位
8.1.1 示例效果
8.1.2 代碼設計
8.1.3 代碼分析
8.1.4 相關知識
8.2 示例2 通過Wi-Fi獲取地理定位
8.2.1 示例效果
8.2.2 代碼設計
8.2.3 代碼分析
8.2.4 相關知識
8.3 示例3 通過GPS獲取地理定位
8.3.1 示例效果
8.3.2 代碼設計
8.3.3 代碼分析
8.3.4 相關知識
8.4 示例4 手機地理定位
8.4.1 示例效果
8.4.2 代碼分析
8.4.3 相關知識
8.5 示例5 用戶自定義的地理定位
8.5.1 示例效果
8.5.2 代碼設計與分析
8.6 示例6 在Google Map顯示我在這里
8.6.1 示例效果
8.6.2 代碼設計
8.6.3 代碼分析
8.7 示例7 處理定位錯誤
8.7.1 示例效果
8.7.2 代碼設計
8.7.3 代碼分析
8.8 示例8 使用Google地圖追蹤用戶的位置
8.8.1 示例效果
8.8.2 代碼設計
8.8.3 代碼分析
8.9 示例9 使用Google地圖查找路線
8.9.1 示例效果
8.9.2 代碼設計與分析
9 拖放大演練
9.1 示例1 實現網頁元素的拖放
9.1.1 示例效果
9.1.2 代碼設計
9.1.3 代碼分析
9.2 示例2 拖放圖標
9.2.1 示例效果
9.2.2 代碼設計
9.2.3 代碼分析
9.3 示例3 設置拖放的效果
9.3.1 示例效果
9.3.2 代碼分析
9.4 示例4 對照片進行排序
9.4.1 示例效果
9.4.2 代碼設計
9.4.3 代碼分析
9.4.4 相關知識
9.5 示例5 拖放文件
9.5.1 示例效果
9.5.2 代碼設計
9.5.3 代碼分析
9.6 示例6 將商品拖入購物車
9.6.1 示例效果
9.6.2 代碼設計
9.6.3 代碼分析
9.7 示例7 拖放圖片保存服務器
9.7.1 示例效果
9.7.2 代碼設計和分析
9.8 示例8 拖動腳本文件進行壓縮
9.8.1 示例效果
9.8.2 代碼設計
9.8.3 代碼分析
9.9 示例9 可拖放文本閱讀器
9.9.1 示例效果
9.9.2 代碼設計
9.9.3 代碼分析
10 本地存儲大演練
10.1 示例1 保存與讀取登錄用戶名與密碼
10.1.1 示例效果
10.1.2 代碼設計
10.1.3 代碼分析
10.2 示例2 保存與讀取臨時數據
10.2.1 示例效果
10.2.2 代碼分析
10.3 示例3 使用本地數據庫
10.3.1 示例效果
10.3.2 代碼設計和分析
10.4 示例4 桌面提醒工具
10.4.1 示例效果
10.4.2 代碼設計和分析
10.5 示例5 存儲JSON對象
10.5.1 示例效果
10.5.2 代碼設計和分析
10.6 示例6 封堵數據泄漏
10.6.1 示例效果
10.6.2 代碼設計
10.6.3 代碼分析
10.7 示例7 存儲數據的共享
10.7.1 示例效果
10.7.2 代碼設計和分析
10.8 示例8 刪除本地緩存
10.8.1 示例效果
10.8.2 代碼設計和分析
11 HTML 5通信大演練
11.1 示例1 微博消息實時推送
11.1.1 示例效果
11.1.2 代碼設計與分析
11.2 示例2 在線代碼編輯器
11.2.1 示例效果
11.2.2 代碼設計與分析
11.3 示例3 在iFrame中嵌入可變的編輯器
11.3.1 示例效果
11.3.2 代碼設計與分析
11.4 示例4 預覽網站內容
11.4.1 示例效果
11.4.2 代碼設計與分析
11.5 示例5 定時給客戶發消息
11.5.1 示例效果
11.5.2 代碼設計與分析
11.6 示例6 通過WebSocket創建聊天室
11.6.1 示例效果
11.6.2 代碼設計與分析
12 離線Web應用大演練
12.1 示例1 使用定時器
12.1.1 示例效果
12.1.2 代碼設計和分析
12.2 示例2 排隊處理訂單
12.2.1 示例效果
12.2.2 代碼設計和分析
12.3 示例3 在后台運行JavaScript
12.3.1 示例效果
12.3.2 代碼設計和分析
12.4 示例4 開發簡單的離線應用
12.4.1 示例效果
12.4.2 代碼設計和分析
12.5 示例5 檢測網絡的當前狀態
12.5.1 示例效果
12.5.2 代碼設計和分析
12.6 示例6 開發離線留言網頁
12.6.1 示例效果
12.6.2 代碼設計
12.6.3 代碼分析
12.7 示例7 添加Geolocation跟蹤
12.7.1 示例效果
12.7.2 代碼設計和分析
12.8 示例8 設計離線事件處理程序
12.8.1 示例效果
12.8.2 代碼設計和分析
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標簽及說明
HTML 5 網頁開發實例詳解
思維導圖
防止博客圖床圖片失效，防止圖片源站外鏈：
http://www.processon.com/chart_image/5e5b2b60e4b02bc3ad6a0cf1.png)
思維導圖在線編輯鏈接：