內 容 簡 介本書從初學者的角度出發，由淺入深、循序漸進地介紹了HTML 5和CSS 3應用與開發的相關知識，書中提供了大量操作HTML 5和CSS 3新增功能的示例，還提供了用于演練的實戰和上機練習。本書共分為15章，主要內容包括HTML文檔結構、文檔基礎標記、列表標記、表格標記和表單標記，CSS發展歷史、基本語法和常用樣式，JavaScript腳本的基本語法、變量、運算符、語句類型、對象和函數，網頁設計流程和網頁布局，HTML 5的發展歷史、使用HTML 5的原因、HTML 5的語法，新增的結構元素、分組元素、文本語義元素、交互元素、音頻和視頻元素、標準屬性，新增表單元素、新增輸入類型、新增表單屬性、表單驗證，canvas元素及其API繪圖，文件操作和文件拖放、客戶端存儲數據、本地數據庫、跨文檔傳輸信息、多線程、獲取位置信息，CSS 3新增顏色、新增選擇器、新增文件屬性、字體屬性、背景屬性、邊框屬性、盒模型、頁面布局，以及漸變、轉換、過渡和動畫等內容。在本書最后一章利用HTML 5和CSS 3等技術實現一個案例作為結束。本書幾乎涉及HTML 5和CSS 3應用與開發的所有重要知識，適合所有的HTML 5和CSS 3初學者進行學習。另外，對于大中專和培訓班的學生來說，本書更是一本不可多得的教材。前 言
將HTML、CSS和JavaScript結合使用是一種最常用的網頁布局，HTML即超文本標記語言，它使用標記來描述網頁。HTML 5是HTML早期版本的自然延續，它盡可能地滿足了當前網站和未來網站的需求。HTML 5從以前的版本中繼承了大部分特性，這就意味著，HTML 5的大部分內容都可以兼容新舊瀏覽器，向后兼容是HTML 5的一項重要設計原則。
CSS在1996年正式推出，HTML誕生幾年之后才出現了CSS的第一個版本，CSS是指層疊樣式表，它的樣式定義了如何顯示HTML網頁中的元素。CSS 3是CSS早期版本的自然延續，它比早期版本更為強大，引入了大量的視覺效果，例如陰影、文字陰影、圓角和漸變等。
本書詳細介紹HTML 5和CSS 3的新增知識，在介紹這些新增功能的同時，還會介紹HTML和CSS早期版本的一些內容，以及JavaScript的基礎知識。
1. 本書內容
全書共分15章，主要內容如下。
第1章：HTML快速入門。首先向讀者介紹HTML的概念及其發展歷史，然后重點講解HTML 4的文檔結構及其提供的標記。
第2章：CSS基礎。首先向讀者介紹CSS的概念及其發展歷史，然后重點介紹CSS 2的常用語法和常用樣式。
第3章：JavaScript腳本語言。從JavaScript腳本的概念開始介紹，然后依次介紹腳本的基礎語法、變量、運算符、語句類型和常用對象等內容。
第4章：網頁設計實戰案例。向讀者介紹實際網頁設計時需要掌握的各種技能。包括網頁設計流程、網頁設計工具、網頁布局以及布局理論等內容。
第5章：認識HTML 5。著重介紹HTML 5的知識，包括它的發展歷史和趨勢、三大組織、基本語法、新增的表單、元素以及屬性等多種內容。
第6章：HTML 5快速入門。介紹HTML 5中新增的不同類型的元素，例如結構元素、分組元素、文本語義元素、交互元素、音頻和視頻元素等。另外，還對HTML 5中常用的幾個標準屬性進行介紹。
第7章：HTML 5新型表單的使用。從表單開始介紹，接著介紹HTML 5中新增的表單元素、輸入類型、表單屬性和表單驗證這4個知識點。
第8章：HTML 5操作頁面圖形。重點介紹canvas元素及其API如何繪制圖形并對圖形進行操作。這些圖形包括文本、矩形、線條、圓形和扇形、貝塞爾曲線、線性漸變、徑向漸變以及圖像等。
第9章：HTML 5的其他新特性。從文件新增特性、拖放功能、新增客戶端數據存儲特性、新增的本地數據庫特性、跨文檔傳輸信息、多線程以及獲取位置信息7個方面介紹HTML 5的新增特性。
第10章：CSS 3快速入門。介紹CSS 3的基礎知識，包括CSS 3的發展、優缺點和瀏覽器支持情況，以及CSS 3的顏色、選擇器和屬性等新增功能。其中對新增顏色進行了詳細介紹。
第11章：CSS 3新增選擇器。從屬性選擇器、結構化偽類選擇器、目標偽類選擇器、UI元素狀態偽類選擇器、否定偽類選擇器和通用兄弟選擇器6個方面進行介紹。
第12章：CSS 3頁面美化樣式。重點介紹CSS 3中新增的與文本、字體、背景和邊框有關的樣式屬性。
第13章：CSS 3頁面布局樣式。從多列布局、盒模型和界面布局三個方面詳細介紹CSS 3新增的屬性、語法格式及其使用示例。
第14章：CSS 3動畫特效。首先了解CSS 3中如何實現漸變，接著介紹CSS 3中新增的轉換功能，然后介紹與過渡有關的屬性，最后對CSS 3的動畫功能進行說明。
第15章：HTML 5 + CSS 3頁面案例。結合HTML 5、CSS 5、JavaScript和jQuery等多種技術實現貪吃蛇游戲。
2. 本書特色
本書內容詳細、示例豐富、知識面廣，全面地講解了HTML 5和CSS 3的應用和開發。與已經出版的同類圖書相比，這本圖書的最大特點體現在如下幾個方面。
(1)知識全面，內容豐富
本書緊密圍繞HTML 5和CSS 3的新增知識展開詳細的講解，涵蓋了實際開發應用中的具體應用代碼。
(2)理論和示例結合
本書中幾乎每一個知識點都有豐富而典型的練習，而且每一章最后都會通過一個或多個綜合的實戰介紹本章的知識。作為一本HTML 5和CSS 3入門類型的書，作者把理論和練習很好地結合起來進行講解，最容易讓讀者快速掌握。
(3)應用廣泛，提供文檔
對于大多數的精選實戰案例，都會向讀者提供詳細的實現步驟，結構清晰簡明，分析深入淺出，而且有些實戰貼近實際。
(4)隨書光盤
本書配備了視頻教學文件，包括每個章節所涉及的源代碼、開發環境的安裝演示等。讀者可以通過視頻文件更加直觀地學習HTML 5和CSS 3的知識。
(5)網站技術支持
讀者在學習或者工作的過程中，如果遇到實際問題，可以直接登錄www.itzcn.com與我們取得聯系，作者會在第一時間內給予幫助。
(6)貼心的提示
為了便于讀者閱讀，全書還穿插著一些技巧、提示等小貼士，體例約定如下。
提示：通常是一些貼心的提醒，讓讀者加深印象或提供建議和解決問題的方法。
注意：提出學習過程中需要特別注意的一些知識點和內容，或者相關信息。
技巧：通過簡短的文字，指出知識點在應用時的一些小竅門。
3. 讀者對象
本書適合作為軟件開發入門者的自學用書，也適合作為高等院校相關專業的教學參考書，還可供開發人員查閱、參考。
主要讀者對象包括：
HTML 5和CSS 3開發入門者。
HTML 5和CSS初學者以及在校學生。
各大、中專院校的在校學生和相關授課老師。
準備從事與HTML 5和CSS 3應用相關的工作人員。
除了封面署名作者之外，參與本書編寫的人員還有程朝斌、王詠梅、郝軍啟、王慧、鄭小營、張浩華、王超英、張凡、趙振方、張艷梅等，在此表示感謝。
在本書的編寫過程中，我們力求精益求精，但難免存在一些不足之處，敬請廣大讀者批評指正。
編 者目 錄
第1章 HTML快速入門 1
1.1 HTML的概念 2
1.2 HTML的文檔結構 3
1.2.1 文檔編寫規范 3
1.2.2 文檔聲明標記 4
1.2.3 標記文檔開始 5
1.2.4 標記文檔頭部 6
1.2.5 標記文檔主體 6
1.2.6 編寫注意事項 6
1.2.7 實戰——創建第一個HTML文檔 7
1.3 文檔基礎標記 9
1.3.1 元信息標記 9
1.3.2 字體標記 10
1.3.3 超鏈接標記 14
1.3.4 水平線標記 16
1.3.5 段落標記 17
1.4 列表標記 19
1.4.1 編號列表 19
1.4.2 項目符號列表 21
1.4.3 說明項目列表 21
1.5 表格標記 22
1.5.1 表格的結構 22
1.5.2 表格的屬性 23
1.6 表單標記 27
1.6.1 創建表單 27
1.6.2 創建表單元素 27
1.7 實戰——制作卡通類頁面 30
1.8 本章習題 32
第2章 CSS基礎 35
2.1 CSS概述 36
2.1.1 CSS簡介 36
2.1.2 CSS的使用 37
2.2 CSS基礎語法 40
2.3 CSS高級語法 41
2.4 CSS的常用樣式 43
2.4.1 CSS常用樣式概述 43
2.4.2 背景樣式 44
2.4.3 文本樣式 47
2.4.4 字體樣式 53
2.4.5 鏈接樣式 58
2.4.6 列表樣式 59
2.4.7 表格和輪廓 63
2.4.8 其他樣式 67
2.5 實戰——詩詞鑒賞頁面設計 71
2.6 本章習題 73
第3章 JavaScript腳本語言 75
3.1 JavaScript腳本概述 76
3.2 JavaScript的基本語法 77
3.2.1 簡單的JavaScript例子 77
3.2.2 JavaScript語句 79
3.3 JavaScript變量 81
3.3.1 變量 81
3.3.2 數據類型 82
3.4 運算符 86
3.5 JavaScript語句的類型 87
3.5.1 選擇語句 88
3.5.2 循環語句 92
3.5.3 跳轉語句 95
3.5.4 異常處理語句 96
3.6 對象 97
3.6.1 對象概述 97
3.6.2 函數 99
3.6.3 構造函數 100
3.7 常用對象 101
3.7.1 Array對象 101
3.7.2 Document對象 102
3.7.3 HTML DOM Event對象 103
3.7.4 Window對象 104
3.8 實戰——長方體幾何計算 105
3.9 本章習題 106
第4章 網頁設計實戰案例 109
4.1 網頁設計流程 110
4.2 網頁設計工具 110
4.2.1 記事本 111
4.2.2 FrontPage 111
4.2.3 Dreamweaver 112
4.2.4 實戰——制作個人主頁 113
4.3 網頁布局 117
4.3.1 常見的網頁布局結構 117
4.3.2 設計居中布局 120
4.3.3 設計自適應布局 121
4.3.4 DIV+CSS重構網站布局 122
4.4 布局理論 124
4.4.1 區塊的概念 124
4.4.2 定義區塊 125
4.4.3 定位 126
4.4.4 實戰——具有固定位置的廣告框 127
4.4.5 空白邊疊加 129
4.5 實戰——制作網頁導航條 130
4.6 實戰——制作文本環繞圖片 132
4.7 實戰——制作三欄博客頁面 133
4.8 CSS設計規范 139
4.9 本章習題 141
第5章 認識HTML 5 143
5.1 了解HTML 5 144
5.1.1 HTML 5的發展歷史 144
5.1.2 開發HTML 5的三大組織 144
5.1.3 使用HTML 5的五大原因 145
5.1.4 HTML 5的未來發展趨勢 147
5.2 HTML 5的語法 148
5.2.1 文檔媒體類型 148
5.2.2 編碼類型 149
5.2.3 DOCTYPE聲明 150
5.2.4 其他內容 150
5.3 HTML 5表單 150
5.3.1 HTML 5輸入類型 150
5.3.2 HTML 5表單元素 152
5.3.3 HTML 5表單屬性 152
5.4 HTML 5的元素 154
5.4.1 新增的元素 154
5.4.2 更改元素 155
5.4.3 廢除的元素 156
5.5 HTML 5的屬性 157
5.5.1 標準屬性 157
5.5.2 事件屬性 158
5.6 支持HTML 5的瀏覽器 161
5.6.1 瀏覽器內核 161
5.6.2 常用的瀏覽器 162
5.7 實戰——Chrome瀏覽器的安裝和測試 164
5.8 本章習題 166
第6章 HTML 5快速入門 169
6.1 結構元素 170
6.1.1 header元素 170
6.1.2 article元素 171
6.1.3 section元素 173
6.1.4 nav元素 174
6.1.5 aside元素 175
6.1.6 footer元素 177
6.2 分組元素 177
6.2.1 hgroup元素 177
6.2.2 figcaption和figure 178
6.3 文本語義元素 179
6.3.1 mark元素 179
6.3.2 ruby、rt和rp元素 180
6.3.3 time元素 180
6.3.4 wbr元素 181
6.4 交互元素 181
6.4.1 meter元素 181
6.4.2 progress元素 183
6.4.3 details元素 185
6.4.4 summary元素 185
6.5 音頻和視頻元素 186
6.5.1 video元素 186
6.5.2 audio元素 191
6.6 標準屬性 193
6.6.1 hidden屬性 193
6.6.2 contenteditable屬性 194
6.6.3 spellcheck屬性 195
6.7 實戰——使用HTML 5元素構建網頁 196
6.8 本章習題 199
第7章 HTML 5新型表單的使用 201
7.1 了解表單 202
7.1.1 表單概述 202
7.1.2 表單的基本結構 203
7.2 表單元素 204
7.2.1 datalist元素 204
7.2.2 keygen元素 205
7.2.3 output元素 206
7.3 輸入類型 207
7.3.1 email類型 207
7.3.2 url類型 208
7.3.3 number類型 209
7.3.4 range類型 210
7.3.5 datepickers類型 211
7.3.6 search類型 212
7.3.7 color類型 213
7.3.8 tel類型 214
7.4 表單屬性 214
7.4.1 表單屬性 214
7.4.2 input屬性 217
7.5 實戰——修改用戶個人資料 223
7.6 表單驗證 225
7.6.1 表單驗證概述 226
7.6.2 checkValidity()驗證 226
7.6.3 setCustomValidity()驗證 227
7.7 本章習題 229
第8章 HTML 5操作頁面圖形 231
8.1 了解canvas元素 232
8.1.1 canvas歷史 232
8.1.2 canvas元素 232
8.1.3 CSS和canvas 233
8.1.4 Canvas API 233
8.1.5 瀏覽器支持情況 233
8.2 繪制文本 235
8.2.1 繪制普通文本 235
8.2.2 繪制陰影文本 237
8.3 繪制矩形 239
8.3.1 用rect()方法繪制 239
8.3.2 用fillRect()方法繪制 240
8.3.3 用strokeRect()方法繪制 241
8.3.4 用clearRect()方法清除 241
8.4 繪制路徑 242
8.4.1 路徑繪圖方法 242
8.4.2 繪制基本圖形 243
8.4.3 繪制圓形和扇形 245
8.4.4 貝塞爾曲線 247
8.5 圖形變換和組合 249
8.5.1 圖形變形 249
8.5.2 矩陣變換 252
8.5.3 圖形組合 254
8.6 繪制顏色漸變 256
8.6.1 線性漸變 256
8.6.2 徑向漸變 258
8.7 圖片的常用操作 259
8.7.1 drawImage()繪制 259
8.7.2 createPattern()方法 261
8.7.3 clip()方法 263
8.8 實現動畫特效 264
8.8.1 了解動畫 264
8.8.2 實戰——繪制動態閃動線條 265
8.9 本章習題 266
第9章 HTML 5的其他新特性 269
9.1 文件新增特性 270
9.1.1 獲取多個文件的信息 270
9.1.2 新增的FileReader接口簡介 272
9.1.3 使用FileReader接口讀取
文件 273
9.1.4 使用FileReader接口監聽事件 276
9.1.5 文件讀取時的異常處理 278
9.1.6 實戰——實現文件上傳 279
9.2 拖放功能 282
9.2.1 拖放API簡介 282
9.2.2 拖放對象的方法和屬性 283
9.2.3 實戰——模擬圖片刪除 285
9.3 新增的客戶端數據存儲特性 288
9.3.1 客戶端存儲對象簡介 288
9.3.2 操作本地數據 289
9.3.3 實戰——以JSON方式存取數據 293
9.4 新增的本地數據庫特性 295
9.4.1 HTML 5本地數據庫簡介 296
9.4.2 數據庫操作API 296
9.4.3 實戰——實現基于數據庫的收藏夾管理 297
9.5 跨文檔傳輸信息 301
9.6 多線程 303
9.6.1 認識HTML 5多線程 304
9.6.2 實戰——Worker對象的簡單應用 305
9.7 獲取位置信息 307
9.7.1 認識地圖API 307
9.7.2 Position對象 308
9.8 HTML 5的離線緩存特性 310
9.9 本章習題 312
第10章 CSS 3快速入門 315
10.1 了解CSS 3 316
10.1.1 CSS 3發展概述 316
10.1.2 CSS 3的優缺點 316
10.1.3 瀏覽器支持情況 317
10.2 CSS 3的新增顏色 319
10.2.1 HSL屬性 319
10.2.2 HSLA屬性 321
10.2.3 RGBA屬性 323
10.2.4 Opacity屬性 324
10.3 CSS 3新增的選擇器 326
10.3.1 屬性選擇器 327
10.3.2 結構化偽類選擇器 328
10.3.3 目標偽類選擇器 329
10.3.4 UI元素狀態偽類選擇器 329
10.3.5 否定偽類 329
10.3.6 通用兄弟選擇器 330
10.4 CSS 3的新增屬性 330
10.4.1 邊框屬性 330
10.4.2 背景屬性 331
10.4.3 文本屬性 331
10.4.4 盒模型屬性 331
10.4.5 用戶界面屬性 332
10.4.6 新增的其他屬性 332
10.5 實戰——以CSS 3屬性制作漂亮按鈕 333
10.6 本章習題 336
第11章 CSS 3新增的選擇器 337
11.1 屬性選擇器 338
11.1.1 E[att^=value]選擇器 338
11.1.2 E[att$=value]選擇器 340
11.1.3 E[att*=value]選擇器 340
11.2 結構化偽類選擇器 341
11.2.1 E:root選擇器 341
11.2.2 E:nth-child(n)選擇器 341
11.2.3 E:nth-last-child(n)選擇器 342
11.2.4 E:nth-of-type(n)選擇器 343
11.2.5 E:nth-last-of-type(n)選擇器 344
11.2.6 E:last-child選擇器 345
11.2.7 E:first-of-type選擇器 345
11.2.8 其他選擇器 346
11.3 目標偽類選擇器 346
11.4 UI元素狀態偽類選擇器 347
11.4.1 常用的選擇器 347
11.4.2 E::selection選擇器 349
11.5 否定偽類選擇器 350
11.6 通用兄弟選擇器 350
11.7 實戰——設計直觀的表單頁面 351
11.8 本章習題 354
第12章 CSS 3頁面美化樣式 357
12.1 CSS 3頁面美化 358
12.2 文本樣式 358
12.2.1 新增樣式 358
12.2.2 新增樣式的用法 359
12.3 字體樣式 363
12.4 背景樣式 366
12.4.1 background-clip屬性 366
12.4.2 background-origin屬性 366
12.4.3 background-size屬性 366
12.5 邊框樣式 368
12.5.1 box-shadow屬性 369
12.5.2 border-image屬性 370
12.5.3 border-radius屬性 372
12.6 實戰——表格的藝術 374
12.7 本章習題 376
第13章 CSS 3頁面布局樣式 377
13.1 新增的多列布局屬性 378
13.1.1 columns屬性 378
13.1.2 column-width屬性 379
13.1.3 column-count屬性 380
13.1.4 column-gap屬性 381
13.1.5 column-rule屬性 381
13.1.6 column-span屬性 383
13.1.7 column-fill屬性 383
13.2 新增的盒模型屬性 383
13.2.1 box-orient屬性 384
13.2.2 box-direction屬性 385
13.2.3 box-ordinal-group屬性 386
13.2.4 box-flex屬性 387
13.2.5 box-flex-group屬性 389
13.2.6 box-pack屬性 389
13.2.7 box-align屬性 391
13.2.8 box-lines屬性 392
13.3 新增的界面布局屬性 393
13.3.1 box-sizing屬性 393
13.3.2 resize屬性 395
13.3.3 zoom屬性 396
13.3.4 outline-offset屬性 397
13.3.5 nav-index屬性 398
13.4 本章習題 398
第14章 CSS 3動畫特效 401
14.1 漸變特效 402
14.1.1 線性漸變 402
14.1.2 徑向漸變 406
14.2 轉換 408
14.2.1 2D轉換 408
14.2.2 3D轉換 413
14.3 過渡 416
14.3.1 常用的單個屬性 416
14.3.2 transition的簡寫屬性 418
14.4 動畫 419
14.4.1 動畫相關屬性 419
14.4.2 @keyframes 420
14.5 實戰——制作動畫海報圈 421
14.6 本章習題 425
第15章 HTML 5 + CSS 3頁面案例 427
15.1 JavaScript經典貪吃蛇 428
15.1.1 案例分析 428
15.1.2 JavaScript實現 428
15.1.3 頁面美化 431
15.2 jQuery導航特效 432
15.2.1 jQuery簡介 432
15.2.2 jQuery實現導航特效 433
15.3 CSS 3圖片特效 436
15.4 其他頁面效果 439
15.4.1 頁面懸浮廣告 439
15.4.2 鼠標特效 441
