《HTML 5網頁開發實例具體解釋》文件夾

第一篇  從宏觀上認識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 五、HTML四、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  給播放器加入快進慢進button

演示樣例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  拖放圖片保存server

演示樣例008  拖動腳本文件進行壓縮

演示樣例009  可拖放文本閱讀器

第10章  本地存儲大演練

演示樣例001  保存與讀取登陸username與password

演示樣例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  啓動server

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自適應各類屏幕分辨率client

14.3  執行效果

14.4  本章小結

 

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

附錄B  傳統HTML標籤及說明