內容簡介
論道HTML5《論道html5》主要供業內的前端開發人員使用，也可供大專院校相關師生、行業技能培訓學校作為相關教材和參考書。
目錄
《論道html5》
第1章 利用html5製作網站 1
1.1 大多數人不了解html5時代的網頁設計 1
1.2 html5帶來的網頁結構、設計風格及理念的變化 3
1.2.1 html 4時代的幾個特徵 4
1.2.2 一個典型的html5頁面 4
1.2.3 小結 6
1.3 html5帶來的標籤變化 6
1.3.1 什麼是標籤 6
1.3.2 標籤的分類 7
1.3.3 近十幾年來的html 9
1.3.4 web的變化趨勢 9
1.4 html5帶來的表單數據內容進化 9
1.4.1 數據提交格式的變化 10
1.4.2 數據提交範圍的變化 11
1.4.3 表單數據類型的增加 12
1.4.4 表單屬性和驗證方式的進化 13
1.4.5 檔案上傳控制項和重複模型的套用 14
1.4.6 小結 14
1.5 html5與seo 15
.1.5.1 技術趨勢 15
1.5.2 搜尋引擎服務商面臨的問題 16
1.5.3 seo從業人員面臨的問題 17
1.5.4 seo面臨的幾個社會問題 18
1.6 html5的開發環境與調試環境 18
1.6.1 html5編寫工具 18
1.6.2 javascript開發 19
1.6.3 http監控 19
1.6.4 調試環境 20
1.7 案例：HTML5網站建設 22
1.7.1 需求的提出 22
1.7.2 需求分析 22
1.7.3 系統分析 22
1.7.4 工程實現 23
1.7.5 小結 27
第2章 用css3完善網站 28
2.1 文字模組 29
2.1.1 文字陰影：text-shadow 29
2.1.2 文字溢出：text-overflow 30
2.1.3 文字換行：word-wrap 30
2.2 顏色模組 31
2.2.1 透明度：opacity31
2.2.2HSL33
2.2.3 hsla和RGBA33
2.3 框線模組 34
2.3.1 框線圓角：border-radius 34
2.3.2 框線顏色：border-color 36
2.3.3 框線圖像：border-image 37
2.3.4 盒陰影：box-shadow 40
2.4 用戶界面模組 41
2.4.1 盒倒影：box-reflect 41
2.4.2 盒大小：box-sizing 41
2.5 背景模組 42
2.5.1 背景漸變 42
2.5.2 background-origin 45
2.5.3 background-clip 46
2.5.4 background-size 47
2.5.5 多背景 48
2.5.6 遮罩 49
2.6 動畫模組 51
2.6.1 transform 51
2.6.2 transition 53
2.6.3 animation 55
2.7 區域模組 57
2.7.1 故事線 58
2.7.2 區域樣式 60
2.7.3 內容形狀和環繞 60
2.7.4 小結 62
2.8 選擇器 62
2.8.1 結構偽類63
2.8.2 否定偽類 65
2.8.3 狀態偽類 65
2.8.4 目標偽類 66
2.8.5 其他選擇器 66
2.9 其他模組 68
2.9.1 多欄布局 68
2.9.2 彈性盒子布局 68
2.9.3 網路字型 69
2.9.4 媒介查詢 70
2.9.5 濾鏡效果 70
2.9.6 著色器 70
2.10 使用css3美化網站 72
2.10.1 右上角文字 73
2.10.2 下載盒子 74
2.10.3 圖片格子 74
2.10.4 中間盒子 74
2.10.5 左右盒子 75
2.10.6 居中背景 76
2.10.7 載入效果 76
2.10.8 頁腳 77
2.11 小結 77
第3章 劃時代的web api 79
3.1 傳統web模型與web os架構模型 79
3.2 web api的概要介紹 81
3.3 drag & drop api 82
3.3.1 以前的解決方案 82
3.3.2 drag & drop api的優點 83
3.3.3 如何檢測瀏覽器是否支持
drag & drop api 83
3.3.4 drag & drop api的主要操作 84
3.3.5 檔案拖放上傳實例 86
3.4 history api 87
3.4.1 以前的解決方案 87
3.4.2 現在的history api 87
3.5 communication api 89
3.5.1 以前解決跨源通信的方案 89
3.5.2 xmlhttprequest level 2 90
3.5.3 iframe和sandbox 91
3.5.4 跨文檔訊息通信 92
3.6 notification api 97
3.6.1 如何檢測瀏覽器是否支持notification api 97
3.6.2 web的notification的狀態 97
3.6.3 讓你的web app帶著notification跑 97
3.7 audio標籤和video標籤 99
3.7.1 audio標籤 100
3.7.2 video標籤 102
3.8 canvas api 108
3.8.1 以前的同類解決方案 109
3.8.2 canvas的優點 109
3.8.3 檢測瀏覽器是否支持canvas 109
3.8.4 canvas主要操作 109
3.9 websocket api 110
3.10 web worker api 111
3.11 web storage api 111
3.12microdata和語義網路 111
3.12.1 microdata的常見屬性 112
3.12.2 microdata的例子 112
3.12.3 microdata與seo——人類需要有序的信息 113
3.12.4 語義網路的基本概念 113
3.12.5 語義測試工具 114
3.13 通用base64方法 114
3.13.1 編碼 114
3.13.2 解碼 115
3.13.3 套用 115
3.14 web database api 117
3.14.1 web sql api 117
3.14.2 indexed db api 121
3.15 webgl 124
3.16 device api 系列 125
3.16.1Geolocationapi 125
3.16.2 file api 128
3.16.3 filewriter api 132
3.16.4 media capture api 132
3.16.5 contact api 133
3.16.6 system information api 134
3.16.7 calendar api 137
3.16.8 messaging api 137
3.17 小結 138
第4章 canvas 2d 139
4.1 什麼是canvas 139
4.2 canvas 2d原理 140
4.2.1 坐標系統說明 141
4.2.2 屬性說明 142
4.3 繪製 143
4.3.1 各類線條 143
4.3.2 矩形 151
4.3.3 三角形 152
4.3.4 圓與扇形 153
4.3.5 圖片 155
4.3.6 文字 158
4.4 特效 160
4.4.1 漸變 160
4.4.2 陰影與透明 162
4.5 基礎操作中比較複雜的部分 162
4.5.1 保存和恢復 163
4.5.2 坐標轉換 163
4.5.3 旋轉 164
4.5.4 縮放 164
4.5.5 變形 164
4.5.6 組合 166
4.5.7 裁剪 167
4.5.8 像素操作 170
4.6 動畫 172
4.6.1 左右運動 172
4.6.2 上下運動 173
4.6.3 圓心旋轉運動 174
4.6.4 拋物線運動 175
4.6.5 漸變運動 175
4.7 事件感應 176
4.8 關於canvas的一些經驗 177
4.8.1 回答兩個問題 177
4.8.2 避開浮點運算 178
4.8.3 資源載入與雙緩衝問題 178
4.8.4 圖片抗鋸齒的原理及辦法 179
4.8.5 粒子系統的使用 181
4.9 web開發復古流 181
4.10 小結 182
第5章 html5和移動網際網路開發 183
5.1 移動網際網路的現狀與需求 183
5.1.1 市場容量 184
5.1.2 移動設備的特點 184
5.1.3 移動設備的現狀 185
5.1.4 開發者生態圈 185
5.1.5 可供選擇的移動網際網路開發平台 185
5.2 html5在移動網際網路上的開發示例 187
5.2.1 一個html5開發者的基本配置 187
5.2.2歐朋瀏覽器h5版介紹 188
5.2.3 重力感測設備 191
5.2.4 電子羅盤開發 199
5.2.5 geolocation與lbs套用開發 203
5.2.6 網頁攝像與網路相冊 207
5.2.7 移動設備中的離線存儲214
5.3 小結 215
第6章 websocket開發套用 216
6.1 websocket的那些事兒 216
6.1.1 websocket的技術背景 217
6.1.2 websocket的定義 218
6.1.3 websocket通信模式解析 219
6.1.4 websocket檢測瀏覽器支持代碼 220
6.2 websocket api的內容 220
6.2.1 屬性 220
6.2.2 url 221
6.2.3 事件 221
6.3 客戶端樣例程式 222
6.4 伺服器端樣例程式 222
6.5 ajax、長輪詢、comet之間的那些事兒 223
6.5.1 ajax 223
6.5.2 長輪詢 225
6.5.3 comet 226
6.5.4 ajax與websocket的多角度對比 227
6.6 與websocket相關的幾個概念 227
6.6.1 ssjs 228
6.6.2 node.js 228
6.7 開發基於websocket的通信示例 235
6.7.1 聊天室 235
6.7.2 伺服器監控 239
6.7.3 在線上作圖 243
6.8 免費的websocket資源 247
6.9 小結 248
第7章 瘦伺服器戰略與雲 249
7.1 戰略觀察與未來10年的思考 249
7.1.1 web瘦伺服器戰略 249
7.1.2 雲 253
7.1.3 計算能的思考 254
7.2 web storage 255
7.2.1 web storage的概念 255
7.2.2 localstorage介紹與示例 255
7.2.3 sessionstorage的介紹與示例 258
7.2.4 瀏覽器端存儲的方案和局限性 260
7.3 離線套用 265
7.3.1 判斷瀏覽器是否線上 266
7.3.2 離線套用的屬性與方法 266
7.3.3 manifest檔案 267
7.4 web worker 269
7.4.1 worker 270
7.4.2 shared worker 273
7.4.3 web worker小結 275
7.5 一個雲記事本的案例 276
7.5.1 客戶端邏輯分析 276
7.5.2 客戶端的實現 277
7.5.3 工程實現的聯想 279
7.6 小結 279
附錄a html5標籤、事件屬性及其
相關網站 281
附錄b 審慎對待各種框架 287
附錄c 統一開發常用交流術語 289
附錄d webgl 294
附錄e css3模組列表 299
前言
在這樣一個飛速發展的時代，寫一本在這個時代中最為耀眼、更新最快的技術（即HTML5）的書，對於我們HTML5研究小組來說，是一件讓人非常忐忑的事情，特別是在行業標準尚在草案階段，還在不斷地進行吸收和最佳化的情況下，我們懷著對HTML5的熱情和希望，戰戰兢兢地寫下此書。
W3C官方說，HTML5標準將於2014年正式發布，但是令人驚奇的是，大量的用戶和各大廠商已經迫不及待地投入到HTML5的懷抱中，促進了HTML5的廣泛套用。連軟體界的巨人微軟公司，也被動地對瀏覽器進行改良和研發，推出了目前對HTML5提供支持但並不太友好的IE9。
有很多人說HTML5標準有著巨大的魅力和市場前景，這是一場技術革命，並且會在不遠的將來改變和影響我們的生活、工作和學習等，也有人說HTML5是業內巨頭的標準之爭、利益之爭。據我們分析，每項行業標準都是業內巨頭之爭，並不僅僅是HTML5。在我們看來，如果一項標準可以讓用戶最終獲益（降低成本，提高效率，安全有保障），那么這個標準就是好標準，就應該被廣泛接受和推廣。正因為如此，我們HTML5研究小組才決定：哪怕有風險，也要寫出一本關於HTML5的普及和推廣型的書，幫助廣大讀者了解和學習HTML5，探索和思考HTML5。
如果說Web是計算機套用的未來，那么以HTML5和JavaScript為代表的Web技術則是Web的未來。
本書的主要目標讀者如下：
網頁設計與製作的初學者與從業人員；
高校計算機專業的學生；
網路培訓學校的學員；
各類從事桌面應用程式開發的程式設計師；
各類有興趣推動並從事Web套用開發的人。
本書提供了一些技術案例和方案的構想，對HTML5標準的規劃、制定和套用也提出了我們自己的一些思考和探索。讀者在閱讀這些內容的時候，希望能夠注意到作者的良苦用心，並促進讀者的思考。
本書共分7章。
第1章通過對HTML5新的語義和標籤的變化，並通過製作一個小網站，來了解HTML5網站的初步架構。同時，我們也引入了網站建設的製作規範、常規工業流程及我們習慣的調試環境、方法和常用工具等，這些資料對讀者在工作中有一定的幫助和指導意義。
第2章通過引入CSS3的各種特效，完善了一個HTML5網站的全部初級視覺表現。其實，這些效果在很多網站上都有一些教程和介紹，上就有比較全面的套用。
第3章開始引入HTML5最精彩的API概念，即Web App的概念，將HTML5的套用拓展至各個領域。作者寫本章的目的在於承上（Web頁面技術部分）啟下（Web套用技術部分）地介紹和索引HTML5標準，並將Web API作為目前Web技術的一個分水嶺予以全面展示。我們認為Web App是HTML 4時代的終結，也是HTML5時代的開端。HTML5在Drag&Drop（拖曳）、File API、Web Worker（進程級的異步處理）、History API、WebSocket、WebGL、localStorage、Canvas、Geolocation延伸出的LBS（Location Based Service）、Web SQL（已被停用和廢棄）等上都有了前所未有的進步。
第4章全面介紹了Canvas 2D。
第5章向讀者展示了在手機瀏覽器上開發HTML5相關套用的案例。
第6章結合WebSocket API講解了3個案例，並引入了時下較為流行的Node.js環境。
第7章結合localStorage和Web Worker，介紹了瘦伺服器戰略和雲的概念，此外，還提及一個概念——計算能。
附錄先對2011年6月20日之前新增和廢棄的標籤、屬性和事件進行了整理，接著介紹了如何審慎地對待各種框架，然後介紹了開發中常用的交流術語，最後介紹了WebGL和CSS模組列表。
