論道HTML5

前言

　  在這樣一個(gè)飛速發(fā)展的時(shí)代，寫一本在這個(gè)時(shí)代中最為耀眼、更新最快的技術(shù)（即HTML5）的書，對(duì)于我們HTML5研究小組來(lái)說(shuō)，是一件讓人非常忐忑的事情，特別是在行業(yè)標(biāo)準(zhǔn)尚在草案階段，還在不斷地進(jìn)行吸收和優(yōu)化的情況下，我們懷著對(duì)HTML5的熱情和希望，戰(zhàn)戰(zhàn)兢兢地寫下此書?！? W3C官方說(shuō)，HTML5標(biāo)準(zhǔn)將于2014年正式發(fā)布，但是令人驚奇的是，大量的用戶和各大廠商已經(jīng)迫不及待地投入到HTML5的懷抱中，促進(jìn)了HTML5的廣泛應(yīng)用。連軟件界的巨人微軟公司，也被動(dòng)地對(duì)瀏覽器進(jìn)行改良和研發(fā)，推出了目前對(duì)HTML5提供支持但并不太友好的IE9。　  有很多人說(shuō)HTML5標(biāo)準(zhǔn)有著巨大的魅力和市場(chǎng)前景，這是一場(chǎng)技術(shù)革命，并且會(huì)在不遠(yuǎn)的將來(lái)改變和影響我們的生活、工作和學(xué)習(xí)等，也有人說(shuō)HTML5是業(yè)內(nèi)巨頭的標(biāo)準(zhǔn)之爭(zhēng)、利益之爭(zhēng)。據(jù)我們分析，每項(xiàng)行業(yè)標(biāo)準(zhǔn)都是業(yè)內(nèi)巨頭之爭(zhēng)，并不僅僅是HTML5。在我們看來(lái)，如果一項(xiàng)標(biāo)準(zhǔn)可以讓用戶最終獲益（降低成本，提高效率，安全有保障），那么這個(gè)標(biāo)準(zhǔn)就是好標(biāo)準(zhǔn)，就應(yīng)該被廣泛接受和推廣。正因?yàn)槿绱?，我們HTML5研究小組才決定：哪怕有風(fēng)險(xiǎn)，也要寫出一本關(guān)于HTML5的普及和推廣型的書，幫助廣大讀者了解和學(xué)習(xí)HTML5，探索和思考HTML5?！? 如果說(shuō)Web是計(jì)算機(jī)應(yīng)用的未來(lái)，那么以HTML5和JavaScript為代表的Web技術(shù)則是Web的未來(lái)?！? 本書的主要目標(biāo)讀者如下：　  網(wǎng)頁(yè)設(shè)計(jì)與制作的初學(xué)者與從業(yè)人員；　  高校計(jì)算機(jī)專業(yè)的學(xué)生；　  網(wǎng)絡(luò)培訓(xùn)學(xué)校的學(xué)員；　  各類從事桌面應(yīng)用程序開發(fā)的程序員；　  各類有興趣推動(dòng)并從事Web應(yīng)用開發(fā)的人?！? 本書提供了一些技術(shù)案例和方案的構(gòu)想，對(duì)HTML5標(biāo)準(zhǔn)的規(guī)劃、制定和應(yīng)用也提出了我們自己的一些思考和探索。讀者在閱讀這些內(nèi)容的時(shí)候，希望能夠注意到作者的良苦用心，并促進(jìn)讀者的思考?！? 本書共分7章?！? 第1章通過(guò)對(duì)HTML5新的語(yǔ)義和標(biāo)簽的變化，并通過(guò)制作一個(gè)小網(wǎng)站，來(lái)了解HTML5網(wǎng)站的初步架構(gòu)。同時(shí)，我們也引入了網(wǎng)站建設(shè)的制作規(guī)范、常規(guī)工業(yè)流程及我們習(xí)慣的調(diào)試環(huán)境、方法和常用工具等，這些資料對(duì)讀者在工作中有一定的幫助和指導(dǎo)意義?！? 第2章通過(guò)引入CSS3的各種特效，完善了一個(gè)HTML5網(wǎng)站的全部初級(jí)視覺表現(xiàn)。其實(shí)，這些效果在很多網(wǎng)站上都有一些教程和介紹，如www.xiuyetang.com（秀野堂主的個(gè)人網(wǎng)站）上就有比較全面的應(yīng)用?！? 第3章開始引入HTML5最精彩的API概念，即Web App的概念，將HTML5的應(yīng)用拓展至各個(gè)領(lǐng)域。作者寫本章的目的在于承上（Web頁(yè)面技術(shù)部分）啟下（Web應(yīng)用技術(shù)部分）地介紹和索引HTML5標(biāo)準(zhǔn)，并將Web API作為目前Web技術(shù)的一個(gè)分水嶺予以全面展示。我們認(rèn)為Web App是HTML 4時(shí)代的終結(jié)，也是HTML5時(shí)代的開端。HTML5在Drag&Drop（拖曳）、File API、Web Worker（進(jìn)程級(jí)的異步處理）、History API、WebSocket、WebGL、localStorage、Canvas、Geolocation延伸出的LBS（Location Based Service）、Web SQL（已被停用和廢棄）等上都有了前所未有的進(jìn)步?！? 第4章全面介紹了Canvas 2D?！? 第5章向讀者展示了在手機(jī)瀏覽器上開發(fā)HTML5相關(guān)應(yīng)用的案例?！? 第6章結(jié)合WebSocket API講解了3個(gè)案例，并引入了時(shí)下較為流行的Node.js環(huán)境?！? 第7章結(jié)合localStorage和Web Worker，介紹了瘦服務(wù)器戰(zhàn)略和云的概念，此外，還提及一個(gè)概念——計(jì)算能。　  附錄先對(duì)2011年6月20日之前新增和廢棄的標(biāo)簽、屬性和事件進(jìn)行了整理，接著介紹了如何審慎地對(duì)待各種框架，然后介紹了開發(fā)中常用的交流術(shù)語(yǔ)，最后介紹了WebGL和CSS模塊列表?！? 此外，書中所有源代碼均可從本書的配套網(wǎng)站（http：//html5book.xiuyetang.com）上下載?！? 我們?nèi)滩蛔∫跁袑懴挛覀儗?duì)各種標(biāo)準(zhǔn)、概念的思考。HTML5的各項(xiàng)標(biāo)準(zhǔn)早已放在那里，這本書的目的難道就是為了讓大家把標(biāo)準(zhǔn)再看一遍嗎？帶著這些思考，我們決定不再探討標(biāo)準(zhǔn)的官方翻譯和解釋，而是研究一些在應(yīng)用與實(shí)際工作中遇到的問(wèn)題，并將對(duì)這些應(yīng)用與技術(shù)的體會(huì)、心得和思考用一線工作者習(xí)慣的話語(yǔ)寫出來(lái)。我們深知自己的能力有限，但又絕不愿意再簡(jiǎn)單地重復(fù)一次標(biāo)準(zhǔn)，在講究節(jié)能減排的今天，浪費(fèi)筆墨也是可恥的，此處省去八百萬(wàn)字……　  我們認(rèn)為一定要寫下這樣的話，以示謙虛：由于時(shí)間倉(cāng)促，水平有限，錯(cuò)漏之處在所難免，若有不當(dāng)之處，歡迎指正。　  我們的能力是有限的，但是知識(shí)的海洋卻是無(wú)限的。可以斷言，在你見到這本書的時(shí)候，又有很多新的概念和技術(shù)誕生了。不要緊，只要有一顆不斷追求進(jìn)步和超越的心，我們就可以跟上時(shí)代的步伐，領(lǐng)跑自己的人生?！? 這是一個(gè)追求超越的時(shí)代，讓我們一起行動(dòng)起來(lái)！　  2011年8月5日初稿　  2012年1月29日修正

內(nèi)容概要

本書先簡(jiǎn)要介紹了如何用HTML5 和CSS3 制作網(wǎng)站，然后全面介紹了API 和Canvas
2D，接著介紹了如何在手機(jī)瀏覽器上開發(fā)HTML5 相關(guān)的應(yīng)用、WebSocket API
相關(guān)的三個(gè)案例和時(shí)下較為流行的Node.js環(huán)境，最后介紹了瘦服務(wù)器戰(zhàn)略和云的概念。
本書主要供業(yè)內(nèi)的前端開發(fā)人員使用，也可供大專院校相關(guān)師生、行業(yè)技能培訓(xùn)學(xué)校作為相關(guān)教材和參考書。

作者簡(jiǎn)介

秀野堂主
HTML5視頻教程《秀野堂主講HTML5》的作者，中國(guó)傳媒大學(xué)兼職講師，專注于移動(dòng)互聯(lián)網(wǎng)研究，來(lái)自江南的普通老程序員。
蔣宇捷
百度技術(shù)經(jīng)理，西安交通大學(xué)碩士。曾任創(chuàng)新工場(chǎng)魔圖精靈項(xiàng)目技術(shù)總監(jiān)、騰訊研究院瀏覽器前端負(fù)責(zé)人、傲游Web后臺(tái)主管。CSDN博客專家，關(guān)注Web前后端及移動(dòng)互聯(lián)網(wǎng)技術(shù)。愛好網(wǎng)球、旅游、足球、滑雪。
羅睿
熱衷于電子游戲與創(chuàng)造世界，高中時(shí)期游戲作品《新烈火戰(zhàn)機(jī)》和《TankII》在全國(guó)和全省高中組電腦制作比賽中獲獎(jiǎng)。大學(xué)期間游戲作品《黑白顛倒棋》和《飛行特訓(xùn)》獲得武漢市奮進(jìn)杯程序開發(fā)大賽一、二等獎(jiǎng)。畢業(yè)后曾在新浪、百度等互聯(lián)網(wǎng)公司擔(dān)任前端工程師職位。工作之余發(fā)布的游戲作品《HTML5圓桌騎士復(fù)刻版》在微軟IE9開發(fā)大賽中獲優(yōu)勝獎(jiǎng)。目前在完美世界擔(dān)任游戲項(xiàng)目經(jīng)理職位。

書籍目錄

第1章 利用HTML5制作網(wǎng)站 1
1.1 大多數(shù)人不了解HTML5時(shí)代的網(wǎng)頁(yè)設(shè)計(jì) 1
1.2 HTML5帶來(lái)的網(wǎng)頁(yè)結(jié)構(gòu)、設(shè)計(jì)風(fēng)格及理念的變化 3
1.2.1 HTML 4時(shí)代的幾個(gè)特征 4
1.2.2 一個(gè)典型的HTML5頁(yè)面 4
1.2.3 小結(jié) 6
1.3 HTML5帶來(lái)的標(biāo)簽變化 6
1.3.1 什么是標(biāo)簽 6
1.3.2 標(biāo)簽的分類 7
1.3.3 近十幾年來(lái)的HTML 9
1.3.4 Web的變化趨勢(shì) 9
1.4 HTML5帶來(lái)的表單數(shù)據(jù)內(nèi)容進(jìn)化 9
1.4.1 數(shù)據(jù)提交格式的變化 10
1.4.2 數(shù)據(jù)提交范圍的變化 11
1.4.3 表單數(shù)據(jù)類型的增加 12
1.4.4 表單屬性和驗(yàn)證方式的進(jìn)化 13
1.4.5 文件上傳控件和重復(fù)模型的應(yīng)用 14
1.4.6 小結(jié) 14
1.5 HTML5與SEO 15
1.5.1 技術(shù)趨勢(shì) 15
1.5.2 搜索引擎服務(wù)商面臨的問(wèn)題 16
1.5.3 SEO從業(yè)人員面臨的問(wèn)題 17
1.5.4 SEO面臨的幾個(gè)社會(huì)問(wèn)題 18
1.6 HTML5的開發(fā)環(huán)境與調(diào)試環(huán)境 18
1.6.1 HTML5編寫工具 18
1.6.2 JavaScript開發(fā) 19
1.6.3 HTTP監(jiān)控 19
1.6.4 調(diào)試環(huán)境 20
1.7 案例：HTML5網(wǎng)站建設(shè) 22
1.7.1 需求的提出 22
1.7.2 需求分析 22
1.7.3 系統(tǒng)分析 22
1.7.4 工程實(shí)現(xiàn) 23
1.7.5 小結(jié) 27
第2章 用CSS3完善網(wǎng)站 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 透明度：opacity 31
2.2.2 HSL 33
2.2.3 HSLA和RGBA 33
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 盒大?。篵ox-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 動(dòng)畫模塊 51
2.6.1 transform 51
2.6.2 transition 53
2.6.3 animation 55
2.7 區(qū)域模塊 57
2.7.1 故事線 58
2.7.2 區(qū)域樣式 60
2.7.3 內(nèi)容形狀和環(huán)繞 60
2.7.4 小結(jié) 62
2.8 選擇器 62
2.8.1 結(jié)構(gòu)偽類 63
2.8.2 否定偽類 65
2.8.3 狀態(tài)偽類 65
2.8.4 目標(biāo)偽類 66
2.8.5 其他選擇器 66
2.9 其他模塊 68
2.9.1 多欄布局 68
2.9.2 彈性盒子布局 68
2.9.3 網(wǎng)絡(luò)字體 69
2.9.4 媒介查詢 70
2.9.5 濾鏡效果 70
2.9.6 著色器 70
2.10 使用CSS3美化網(wǎng)站 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 頁(yè)腳 77
2.11 小結(jié) 77
第3章 劃時(shí)代的Web API 79
3.1 傳統(tǒng)Web模型與Web OS架構(gòu)模型 79
3.2 Web API的概要介紹 81
3.3 Drag & Drop API 82
3.3.1 以前的解決方案 82
3.3.2 Drag & Drop API的優(yōu)點(diǎn) 83
3.3.3 如何檢測(cè)瀏覽器是否支持
Drag & Drop API 83
3.3.4 Drag & Drop API的主要操作
84
3.3.5 文件拖放上傳實(shí)例 86
3.4 History API 87
3.4.1 以前的解決方案 87
3.4.2 現(xiàn)在的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 如何檢測(cè)瀏覽器是否支持Notification API
97
3.6.2 Web的Notification的狀態(tài) 97
3.6.3 讓你的Web App帶著Notification跑
97
3.7 audio標(biāo)簽和video標(biāo)簽 99
3.7.1 audio標(biāo)簽 100
3.7.2 video標(biāo)簽 102
3.8 Canvas API 108
3.8.1 以前的同類解決方案 109
3.8.2 Canvas的優(yōu)點(diǎn) 109
3.8.3 檢測(cè)瀏覽器是否支持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.12 MicroData和語(yǔ)義網(wǎng)絡(luò) 111
3.12.1 MicroData的常見屬性 112
3.12.2 MicroData的例子 112
3.12.3 MicroData與SEO——人類需要有序的信息
113
3.12.4 語(yǔ)義網(wǎng)絡(luò)的基本概念 113
3.12.5 語(yǔ)義測(cè)試工具 114
3.13 通用Base64方法 114
3.13.1 編碼 114
3.13.2 解碼 115
3.13.3 應(yīng)用 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.1 Geolocation API 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 小結(jié) 138
第4章 Canvas 2D 139
4.1 什么是Canvas 139
4.2 Canvas 2D原理 140
4.2.1 坐標(biāo)系統(tǒng)說(shuō)明 141
4.2.2 屬性說(shuō)明 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 基礎(chǔ)操作中比較復(fù)雜的部分 162
4.5.1 保存和恢復(fù) 163
4.5.2 坐標(biāo)轉(zhuǎn)換 163
4.5.3 旋轉(zhuǎn) 164
4.5.4 縮放 164
4.5.5 變形 164
4.5.6 組合 166
4.5.7 裁剪 167
4.5.8 像素操作 170
4.6 動(dòng)畫 172
4.6.1 左右運(yùn)動(dòng) 172
4.6.2 上下運(yùn)動(dòng) 173
4.6.3 圓心旋轉(zhuǎn)運(yùn)動(dòng) 174
4.6.4 拋物線運(yùn)動(dòng) 175
4.6.5 漸變運(yùn)動(dòng) 175
4.7 事件感應(yīng) 176
4.8 關(guān)于Canvas的一些經(jīng)驗(yàn) 177
4.8.1 回答兩個(gè)問(wèn)題 177
4.8.2 避開浮點(diǎn)運(yùn)算 178
4.8.3 資源載入與雙緩沖問(wèn)題 178
4.8.4 圖片抗鋸齒的原理及辦法 179
4.8.5 粒子系統(tǒng)的使用 181
4.9 Web開發(fā)復(fù)古流 181
4.10 小結(jié) 182
第5章 HTML5和移動(dòng)互聯(lián)網(wǎng)開發(fā) 183
5.1 移動(dòng)互聯(lián)網(wǎng)的現(xiàn)狀與需求 183
5.1.1 市場(chǎng)容量 184
5.1.2 移動(dòng)設(shè)備的特點(diǎn) 184
5.1.3 移動(dòng)設(shè)備的現(xiàn)狀 185
5.1.4 開發(fā)者生態(tài)圈 185
5.1.5 可供選擇的移動(dòng)互聯(lián)網(wǎng)開發(fā)平臺(tái) 185
5.2 HTML5在移動(dòng)互聯(lián)網(wǎng)上的開發(fā)示例 187
5.2.1 一個(gè)HTML5開發(fā)者的基本配置 187
5.2.2 歐朋瀏覽器H5版介紹 188
5.2.3 重力傳感設(shè)備 191
5.2.4 電子羅盤開發(fā) 199
5.2.5 Geolocation與LBS應(yīng)用開發(fā) 203
5.2.6 網(wǎng)頁(yè)攝像與網(wǎng)絡(luò)相冊(cè) 207
5.2.7 移動(dòng)設(shè)備中的離線存儲(chǔ) 214
5.3 小結(jié) 215
第6章 WebSocket開發(fā)應(yīng)用 216
6.1 WebSocket的那些事兒 216
6.1.1 WebSocket的技術(shù)背景 217
6.1.2 WebSocket的定義 218
6.1.3 WebSocket通信模式解析 219
6.1.4 WebSocket檢測(cè)瀏覽器支持代碼 220
6.2 WebSocket API的內(nèi)容 220
6.2.1 屬性 220
6.2.2 URL 221
6.2.3 事件 221
6.3 客戶端樣例程序 222
6.4 服務(wù)器端樣例程序 222
6.5 Ajax、長(zhǎng)輪詢、Comet之間的那些事兒 223
6.5.1 Ajax 223
6.5.2 長(zhǎng)輪詢 225
6.5.3 Comet 226
6.5.4 Ajax與WebSocket的多角度對(duì)比 227
6.6 與WebSocket相關(guān)的幾個(gè)概念 227
6.6.1 SSJS 228
6.6.2 Node.js 228
6.7 開發(fā)基于WebSocket的通信示例 235
6.7.1 聊天室 235
6.7.2 服務(wù)器監(jiān)控 239
6.7.3 聯(lián)機(jī)作圖 243
6.8 免費(fèi)的WebSocket資源 247
6.9 小結(jié) 248
第7章 瘦服務(wù)器戰(zhàn)略與云 249
7.1 戰(zhàn)略觀察與未來(lái)10年的思考 249
7.1.1 Web瘦服務(wù)器戰(zhàn)略 249
7.1.2 云 253
7.1.3 計(jì)算能的思考 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 瀏覽器端存儲(chǔ)的方案和局限性 260
7.3 離線應(yīng)用 265
7.3.1 判斷瀏覽器是否在線 266
7.3.2 離線應(yīng)用的屬性與方法 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小結(jié) 275
7.5 一個(gè)云記事本的案例 276
7.5.1 客戶端邏輯分析 276
7.5.2 客戶端的實(shí)現(xiàn) 277
7.5.3 工程實(shí)現(xiàn)的聯(lián)想 279
7.6 小結(jié) 279
附錄A HTML5標(biāo)簽、事件屬性及其
相關(guān)網(wǎng)站 281
附錄B 審慎對(duì)待各種框架 287
附錄C 統(tǒng)一開發(fā)常用交流術(shù)語(yǔ) 289
附錄D WebGL 294
附錄E CSS3模塊列表 299

圖書封面

圖書標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    論道HTML5 PDF格式下載

---