基本信息
書名：《HTML5+CSS3從入門到精通》叢書名：清華社“視頻大講堂”大系網路開發視頻大講堂
作者：李東博
出版社：清華大學出版社
字數：983千字
版次：2013年6月第1版
出版日期：2013年6月
印刷時間：2013年6月
編輯推薦
“網路開發視頻大講堂”叢書系清華社“視頻大講堂”重點大系之一。該大系包括多個子系列，每個子系列的圖書在其同品種的圖書中銷售名列前茅，其中：- 4個品種榮獲“全行業優秀暢銷品種”
- 1個品種榮獲2012年清華大學出版社“專業暢銷書”一等獎
- 絕大多數品種在“全國計算機零售圖書排行榜”同品種排行中名列前茅
- 截至目前該大繫纍計銷售超過55萬冊
- 該大系已成為近年來清華社計算機專業基礎類零售圖書最暢銷的品牌之一
“網路開發視頻大講堂”系列作為清華社“視頻大講堂”大系的子系列之一，繼承和創新了清華社“視頻大講堂”大系的編寫模式、寫作風格和優良品質。本書突出了以下內容：
- 227節大型高清同步視頻演示講解，可反覆觀摩，讓學習更為快捷、高效
- 225箇中小典型實例，通過實例學習更深入，更有趣，更有動力
- 31個綜合實戰案例，展現工作過程，積累工作經驗
- 11部網頁開發參考手冊，CSS2.0參考手冊，CSS3.0參考手冊，JavaScript參考手冊JavaScript核心參考，jQuery1.7中文手冊，jQuery1.3參考手冊，jQuery1.4參考手冊 W3CSchool，w3c標準html5手冊,XHTML參考手冊,XMLHttp中文參考手冊
- 83類實用網頁模版，其中HTML5+CSS3網頁模版32類，DIV+CSS3網頁模版51類。
- 集基礎知識、中小實例、實戰案例、專業經驗於一體
- 好學、好用、高效
內容提要
《HTML5+CSS3從入門到精通》（清華社“視頻大講堂”大系）通過基礎知識+中小實例+綜合案例的方式，講述了用HTML5+ CSS3設計構建網站的必備知識，相對於權威指南、高級程式設計、開發指南同類圖書，本書是一本適合快速入手的自學教程。內容有：創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻，Web存儲，離線套用，Workers多執行緒處理，Geolocation地理位置等技術。CSS3部分主要介紹了CSS3概述，CSS選擇器，文本、字型與顏色，背景和框線，2D變形，設計動畫，網頁布局、用戶界面以及CSS3的其他新特性。
《HTML5+CSS3從入門到精通》內容涵蓋了HTML5+CSS3的所有重要特性，通過大量實際案例對HTML5+CSS3的重要特性進行了詳細講解，內容全面豐富，易於理解，能夠幫助讀者提升實際套用技能。
本書內容翔實、結構清晰、循序漸進，基礎知識與案例實戰緊密結合，既可作為HTML5+CSS3初學者的入門教材，也適合作為中高級用戶對新技術作進一步學習的參考用書。本書顯著特色有：
1．同步視頻講解，讓學習更為直觀高效。227節大型高清同步視頻講解，先看視頻再學習效率更高。
2．海量精彩實例，用實例學更輕鬆快捷。225個精彩實例，模仿練習是最快捷的學習方式。
3．精選實戰案例，為高薪就業牽線搭橋。31個實戰案例展示可為以後就業積累經驗。
4．完整學習套餐，為讀者提供貼心服務。參考手冊11部、網頁模版83類、素材源程式，讓學習更加方便。
5．講解通俗翔實，看得懂學得會才是硬道理。
本書特色
- 系統的基礎知識
本書系統地講解了HTML5+CSS3技術在網頁設計中各種套用的知識，從為什麼要用HTML5開始講解，循序漸進，配合大量實例幫助讀者奠定堅實的理論基礎，做到知其所以然。
- 大量的案例實戰
本書設定大量套用實例，重點強調具體技術的靈活套用，並且全書結合了作者長期的網頁設計製作和教學經驗，使讀者真正做到學以致用。
- 深入解剖HTML5+CSS3套用開發和布局
本書用相當多的篇幅重點介紹了用HTML5+CSS3進行套用開發和布局的方法和技巧，配合經典的布局案例，幫助讀者掌握HTML5+CSS3最核心的套用技術。
- 精選綜合實例
本書每章都會精選多個常見Web開發和設計的綜合實例，幫助讀者總結前面所學知識，綜合套用各種技術、方法和技巧，提高讀者綜合套用的能力。
本書內容
本書分為兩大部分，共19章，具體結構劃分如下。第一部分：HTML5部分，包括第1章～第10章。這部分主要介紹了HTML5相關基礎知識，包括HTML5概述、Web開發歷史、HTML5文檔結構異同與創建HTML5文檔、設計HTML5表單、使用HTML5繪畫、HTML5音頻與視頻、如何實現Web本地存儲、如何實現Web離線套用、如何設計多執行緒套用、如何實現移動網際網路中地圖定位等技術。
第二部分：CSS3部分，包括第11章～第19章。這部分主要講解了CSS3的新特性和新用法，以實現在簡單的代碼中能夠設計更加精彩的網頁效果。主要內容包括CSS3概述，CSS選擇器，定義文本、字型與顏色，設計背景和框線，使用2D變形，設計動畫，設計多列和流動網頁布局，最佳化用戶界面以及CSS3的其他新特性。
本書讀者
希望系統學習網頁設計、網站製作的初學者、進階者從事網頁設計製作和網站建設的專業人士
各大中專院校相關專業的老師、學生
相關培訓機構的學員
本書約定
本書主要面向熟悉HTML和CSS的Web開發人員。初學者也可以從本書獲益，讀者還應該具備基本的HTML、CSS、JavaScript知識，我們會用這些知識來創建各種套用方案。本書中上機練習的示例要用到Firefox、Chrome和Opera瀏覽器，因此，為了測試所有內容，讀者需要安裝上述所有類型的最新版本瀏覽器，因為各種瀏覽器的實現都稍有差異。
讀者還需要安裝Internet Explorer來測試自己的站點，以便確保示例的兼容性。如需針對不同版本的Internet Explorer測試示例，可以下載IETester Windows版，因為它可同時支持IE6、IE7和IE8。對於非Windows用戶，可以考慮使用VirtualBox或者VMware等虛擬機，或者使用CrossBrowserTesting和MogoTest 等服務。
為了給讀者提供更多的學習資源，同時彌補本書篇幅有限的遺憾，本書提供了很多參考連結，許多本書中無法詳細介紹的問題都可以通過這些連結找到答案。因為這些連結地址會因時間而有所變動或調整，所以在此說明，這些連結地址僅供參考，無法保證這些地址都是長期有效的。
本書所列的插圖可能會與讀者實際環境中的操作界面有所差別，這可能是由於作業系統平台、瀏覽器版本等不同而引起的，在此特別說明，讀者應該以實際情況為準。
為了幫助讀者快速上手，在一般情況下，讀者可以在程式和文檔中自由使用本書中的示例代碼。
關於我們
參與本書編寫的人員包括鹹建勛、奚晶、文菁、李靜、鍾世禮、李增輝、甘桂萍、劉燕、楊凡、李愛芝、余樂、孫寶良、余洪萍、譚貞軍、孫愛榮、何子夜、趙美青、牛金鑫、孫玉靜、左超紅、蔣學軍、鄧才兵、袁江和李東博等。由於作者水平有限，書中疏漏和不足之處在所難免，歡迎讀者朋友不吝賜教。廣大讀者如有好的建議、意見，或在學習本書時遇到疑難問題，可以聯繫我們，我們會儘快為您解答。完整目錄
第1章Web開發新時代 11.1 HTML5概述 2
1.1.1HTML5新特性 2
1.1.2HTML5組織 3
1.1.3HTML5構成 4
1.2 HTML5設計原理 4
1.2.1HTML開發歷程 5
1.2.2HTML5開發動力 6
1.2.3HTML5設計理念 7
1.3編寫第一個HTML5頁面 14
1.3.1搭建上機練習環境 14
1.3.2檢測瀏覽器是否支持 14
1.3.3使用HTML5編寫簡單的Web頁面15
1.4 HTML5頁面的特徵 17
1.4.1使用HTML5結構化元素 17
1.4.2使用CSS美化HTML5文檔 19
第2章從HTML、XHTML到HTML5 21
視頻講解：2小時
2.1 HTML基礎 22
2.1.1HTML簡介 22
2.1.2HTML特性 22
2.1.3HTML結構 23
2.1.4HTML語法 23
2.1.5HTML標籤 25
2.1.6HTML屬性 29
2.2 XHTML基礎 32
2.2.1XHTML結構 32
2.2.2XHTML語法 33
2.2.3XHTML類型 34
2.2.4DTD解析 35
2.2.5命名空間 37
2.3 HTML5基礎 38
2.3.1HTML5語法 38
2.3.2HTML5元素 40
2.3.3HTML5增加及廢除的屬性 46
2.3.4HTML5全局屬性 48
2.3.5HTML5其他功能 50
第3章創建HTML5文檔 54
視頻講解：1小時13分鐘
3.1認識HTML5文檔結構55
3.2 HTML5元素分類 58
3.3構建主體內容 59
3.3.1標識文章 59
3.3.2給內容分段 61
3.3.3設計導航信息 64
3.3.4設計輔助信息 66
3.3.5設計微格式 67
3.3.6添加發布日期 68
3.4添加語義模組 69
3.4.1添加標題塊 69
3.4.2給標題分組 70
3.4.3添加腳註塊 70
3.4.4添加聯繫信息 71
3.5綜合實戰：使用HTML5設計部落格主頁 72
3.5.1設計大綱 73
3.5.2設計樣式 76
第4章實戰HTML5表單 79
視頻講解：1小時08分鐘
4.1新增的input輸入類型 80
4.1.1email類型的套用 80
4.1.2url類型的套用 82
4.1.3number類型的套用 83
4.1.4range類型的套用 84
4.1.5日期檢出器類型的套用 85
4.1.6search類型的套用 90
4.1.7tel類型的套用 91
4.1.8color類型的套用 92
4.2新增的input屬性 93
4.2.1新增的autocomplete屬性 93
4.2.2新增的autofocus屬性 95
4.2.3新增的form屬性 96
4.2.4新增的表單重寫屬性 97
4.2.5新增的height與width屬性 98
4.2.6新增的list屬性98
4.2.7新增的min、max和step屬性 99
4.2.8新增的multiple屬性 100
4.2.9新增的pattern屬性101
4.2.10新增的placeholder屬性 101
4.2.11新增的required屬性 102
4.3新增的form元素103
4.3.1新增的datalist元素103
4.3.2新增的keygen元素 103
4.3.3新增的output元素 104
4.4新增的form屬性105
4.4.1新增的autocomplete屬性 105
4.4.2新增的novalidate屬性 105
第5章實戰HTML5畫布 106
視頻講解：2小時
5.1認識HTML5 canvas元素 107
5.1.1在頁面中添加canvas元素 107
5.1.2Canvas如何繪製圖形 108
5.1.3認識Canvas坐標 109
5.1.4何時不用Canvas 109
5.1.5如果瀏覽器不支持Canvas 110
5.1.6檢測瀏覽器支持 110
5.2繪製簡單圖形 111
5.2.1繪製直線 111
5.2.2繪製矩形 112
5.2.3繪製圓形 113
5.2.4繪製三角形 115
5.2.5清空畫布 116
5.3繪製貝塞爾曲線 117
5.3.1繪製二次方貝塞爾曲線 118
5.3.2繪製三次方貝塞爾曲線 119
5.4圖形的變換 120
5.4.1保存與恢復Canvas狀態 120
5.4.2移動坐標空間 121
5.4.3旋轉坐標空間 123
5.4.4縮放圖形 125
5.4.5矩陣變換 126
5.5圖形的組合與裁切 129
5.5.1圖形的組合 129
5.5.2裁切路徑 132
5.6更多的顏色和樣式選項 133
5.6.1套用不同的線型 133
5.6.2繪製線性漸變 138
5.6.3繪製徑向漸變 139
5.6.4繪製圖案 140
5.6.5設定圖形的透明度 141
5.6.6創建陰影 142
5.7繪製文字 144
5.7.1繪製填充文字 144
5.7.2文字相關屬性 145
5.7.3繪製輪廓文字 145
5.7.4測量文字寬度 146
5.8操作與使用圖像 147
5.8.1向Canvas中引入圖像 147
5.8.2改變圖像大小 149
5.8.3創建圖像切片 150
第6章HTML5音頻與視頻 152
視頻講解：50分鐘
6.1 HTML5多媒體技術概述 153
6.1.1關於編解碼器 153
6.1.2音頻編解碼器 153
6.1.3視頻編解碼器 154
6.2瀏覽器支持概述 156
6.2.1用JavaScript檢測音頻格式支持情況 157
6.2.2用JavaScript檢測視頻格式支持情況 158
6.3在HTML5中播放音頻159
6.3.1認識audio元素 159
6.3.2播放音頻 160
6.4在HTML5中播放視頻161
6.4.1認識video元素161
6.4.2播放視頻 162
6.5音頻與視頻相關屬性、方法與事件 164
6.5.1音頻與視頻相關屬性 164
6.5.2音頻與視頻相關方法 167
6.5.3音頻與視頻相關事件 168
6.6綜合實戰 169
6.6.1用腳本控制音樂播放 169
6.6.2查看視頻幀畫面 170
第7章Web存儲 175
視頻講解：1小時20分鐘
7.1認識Web Storage176
7.1.1Cookie存儲機制的優缺點 176
7.1.2為什麼要用Web Storage 176
7.1.3Web Storage的優缺點 177
7.1.4瀏覽器支持概述 177
7.2使用Web Storage178
7.2.1檢查瀏覽器的支持性 178
7.2.2設定和獲取數據 180
7.2.3防止數據泄露 181
7.2.4Web Storage的其他用法 181
7.2.5Web Storage事件監測 182
7.2.6實例1：設計網頁皮膚 183
7.2.7實例2：跟蹤localStorage數據 184
7.2.8實例3：設計計數器 186
7.2.9綜合套用：Web套用項目實時跟蹤 187
7.3 Web SQL資料庫 192
7.3.1Web SQL資料庫概述 192
7.3.2使用Web SQL資料庫 193
7.3.3實例1：創建簡單的本地資料庫 195
7.3.4實例2：批量存儲本地數據 198
7.3.5綜合套用：Web Storage和
Web SQL混合開發 199
第8章離線套用 207
視頻講解：23分鐘
8.1 HTML5離線套用概述 208
8.1.1為什麼要學習HTML5離線套用 208
8.1.2瀏覽器支持概述 209
8.2 HTML5離線套用詳解 210
8.2.1解析manifest檔案 210
8.2.2搭建離線應用程式 213
8.2.3檢查瀏覽器是否支持 213
8.2.4離線快取更新實現 213
8.2.5JavaScript接口實現 214
8.2.6離線存儲事件監聽 217
8.3實戰1：快取首頁 218
8.4實戰2：離線編輯內容 221
8.5實戰3：離線跟蹤 225
第9章Workers多執行緒處理 231
視頻講解：1小時01分鐘
9.1認識Web Workers 232
9.1.1Web Workers概述 232
9.1.2瀏覽器支持概述 233
9.1.3熟悉Web Workers成員 233
9.2使用Web Workers 234
9.2.1檢查瀏覽器支持性 234
9.2.2創建Web Workers 234
9.2.3與Web Workers通信 235
9.2.4使用Web Workers上機練習 237
9.3案例實戰 240
9.3.1使用多執行緒實現後台運算 240
9.3.2在後台過濾值 242
9.3.3多任務並發處理 243
9.3.4在多執行緒之間通信 246
9.3.5使用執行緒技術計算Fibonacci數列 248
9.3.6使用多執行緒繪圖 249
9.4綜合套用：模擬退火算法 253
9.4.1認識模擬退火算法 253
9.4.2編寫套用主頁面 254
9.4.3編寫worker.js 256
9.4.4與Web Workers通信 257
第10章Geolocation地理位置261
10.1 位置信息概述 262
10.1.1為什麼要學習Geolocation 262
10.1.2位置信息表示方式262
10.1.3位置信息來源262
10.1.4IP定位 263
10.1.5GPS定位 263
10.1.6Wi-Fi定位 263
10.1.7手機定位264
10.1.8自定義定位 264
10.2 使用Geolocation API 264
10.2.1檢查瀏覽器支持性264
10.2.2獲取當前地理位置265
10.2.3監視位置信息267
10.2.4停止獲取位置信息267
10.2.5隱私保護267
10.2.6處理位置信息267
10.2.7使用position對象 268
10.3 案例實戰 269
10.3.1使用Google地圖 269
10.3.2跟蹤行走速度271
第11章CSS3概述 277
視頻講解：1小時01分鐘
11.1 回顧CSS 278
11.1.1CSS發展簡史 278
11.1.2CSS 1.0和CSS 2.0概述 278
11.1.3CSS與DIV標記之緣 285
11.1.4CSS編碼規範 288
11.2 了解CSS3新增特性 289
11.2.1屬性選擇器 289
11.2.2RBGA 透明度 291
11.2.3多欄布局292
11.2.4多背景圖片 294
11.2.5字元串溢出 295
11.2.6塊陰影與圓角陰影296
11.2.7圓角297
11.2.8框線圖片298
11.2.9形變299
11.3 CSS3前景展望 301
11.3.1CSS3的套用範圍 302
11.3.2當前支持CSS3的瀏覽器 303
11.4 案例實戰：設計漂亮的表單 305
第12章CSS選擇器 310
視頻講解：34分鐘
12.1 屬性選擇器 311
12.1.1認識屬性選擇器 311
12.1.2案例實戰312
12.2 結構偽類選擇器 314
12.2.1認識結構偽類選擇器 314
12.2.2案例實戰315
12.3 UI偽類選擇器 321
12.3.1認識常用UI偽類選擇器 321
12.3.2案例實戰322
12.4 其他選擇器 324
第13章文本、字型與顏色 330
視頻講解：49分鐘
13.1 設計文本陰影 331
13.1.1定義text-shadow屬性 331
13.1.2套用陰影效果333
13.1.3綜合實戰：設計黑客網站首頁 339
13.2 定義文本樣式 341
13.2.1文本樣式簡介341
13.2.2溢出文本345
13.2.3文本換行347
13.3 設計顏色樣式 353
13.3.1使用RGBA顏色值 353
13.3.2使用HSL顏色值 355
13.3.3使用HSLA顏色值 359
13.3.4定義opacity屬性 360
13.3.5定義transparent顏色值 363
第14章背景和框線 365
視頻講解：1小時09分鐘
14.1 設計多色框線 366
14.1.1用法詳解366
14.1.2案例實戰368
14.2 設計框線背景 368
14.2.1用法詳解369
14.2.2案例實戰372
14.3 設計圓角 375
14.3.1用法詳解376
14.3.2案例實戰：設計橢圓圖形 379
14.4 設計陰影 380
14.4.1用法詳解380
14.4.2案例實戰：設計Windows7界面效果 385
14.5 設計背景 390
14.5.1定義背景坐標390
14.5.2定義背景裁剪區域392
14.5.3定義背景圖像大小395
14.5.4定義背景圖像循環方式396
14.5.5定義多背景圖像 398
第15章2D變形 400
視頻講解：31分鐘
15.1 認識transform 401
15.2 2D變形 402
15.2.1旋轉動畫403
15.2.2縮放動畫404
15.2.3移動動畫406
15.2.4傾斜動畫408
15.2.5變形動畫410
15.2.6案例實戰：設計塗鴉牆412
15.3 自定義變形 414
15.4 定義複雜變形 416
第16章設計動畫 420
視頻講解：1小時20分鐘
16.1 平滑過渡 421
16.1.1定義過渡屬性421
16.1.2定義過渡時間422
16.1.3定義過渡延遲時間423
16.1.4定義過渡效果424
16.1.5案例實戰：設計Mac OS導航器 426
16.2 3D動畫 428
16.2.1定義動畫名稱429
16.2.2定義動畫時間429
16.2.3定義動畫播放方式429
16.2.4定義動畫延遲時間429
16.2.5定義動畫播放次數430
16.2.6定義動畫播放方向430
16.2.7案例實戰：設計圖片翻轉特效 430
16.3 漸變效果 431
16.3.1設計Webkit漸變 432
16.3.2Webkit案例實戰 437
16.3.3設計Gecko漸變 440
16.3.4Gecko案例實戰 446
16.3.5設計IE漸變 447
16.3.6設計W3C漸變 449
16.4 案例綜合實戰 449
16.4.1設計禮品盒 450
16.4.2設計摺疊面板452
16.4.3設計易拉罐 454
16.4.4設計光碟滑動動畫457
16.4.5設計下拉選單461
16.4.6設計精緻按鈕465
第17章網頁布局 468
視頻講解：40分鐘
17.1 設計多列布局 469
17.2 設定多列顯示樣式 471
17.2.1定義列寬471
17.2.2定義列數472
17.2.3定義列間距 473
17.2.4定義列框線樣式 475
17.2.5定義跨列顯示476
17.2.6定義列高度 478
17.2.7定義列印列 480
17.3 設計盒布局 481
17.4 設定盒布局格式 485
17.4.1定義自適應寬度 485
17.4.2定義列顯示順序 487
17.4.3定義列排列方向 489
17.4.4定義模組大小自適應 491
17.4.5消除空白493
17.4.6定義對齊方式497
17.5 綜合實戰：設計多列網頁 498
第18章用戶界面 506
視頻講解：35分鐘
18.1 改變盒模型組成方式 507
18.2 調節元素尺寸 507
18.3 設計輪廓 509
18.3.1定義輪廓線 509
18.3.2定義輪廓線寬度 512
18.3.3定義輪廓線樣式 512
18.3.4定義輪廓線顏色 513
18.3.5定義輪廓線位移 513
18.4 設計導航 516
18.4.1定義導航順序516
18.4.2定義方向鍵控制順序 519
18.5 添加顯示內容 521
18.6 恢復默認樣式 522
18.6.1取消元素樣式522
18.6.2慎用initial的情況 524
第19章CSS3其他新特性527
視頻講解：40分鐘
19.1 溢出處理 528
19.2 自定義字型類型 530
19.2.1使用@font-face規則 530
19.2.2開放字型532
19.3 定義設備類型 532
19.3.1認識Media Queries模組 532
19.3.2認識@media規則 533
19.3.3使用@media規則 535
19.3.4在網站中套用@media規則 537
19.4 添加語音功能 543
19.5 設計倒影 545
