內容簡介

《HTML5+CSS3+JavaScript 網頁設計入門與應用》從網站基礎開始，結合大量案例，全面、翔實地介紹了使用HTML5+CSS3+JavaScript開發Web前端頁面的具體方法與步驟，引導讀者從零開始，一步步掌握Web開發的全過程。本書通過一個個鮮活、典型的實例來講解每個語法，力求達到理論知識與實踐操作完美結合的效果。

《HTML5+CSS3+JavaScript 網頁設計入門與應用》共分為15章，主要包括HTML入門、HTML5新增布局元素、HTML5表單驗證、文件上傳、繪圖和多媒體、數據存儲、CSS3新增選擇器、CSS3布局屬性和動畫效果、JavaScript基礎語法、事件處理和DOM操作等內容。最后一章通過打地鼠、貪吃蛇、小貓笑臉和圖片輪播4個綜合案例，介紹了Web前端設計的完整過程。

《HTML5+CSS3+JavaScript 網頁設計入門與應用》可作為普通高校計算機及相關專業教材、高職高專教材，也可供從事網頁設計與制作、網站開發、網頁編程等行業人員參考閱讀。

 

前言

隨著網絡帶寬的飛速提升和網絡技術的不斷發展，獲取數據的方式也比以前快捷得多，而網頁是最重要的表現形式之一。這幾年雖然新技術層出不窮，并且日新月異，但有一點是肯定的，不管是采用什么技術設計的網站，用戶在客戶端通過打開瀏覽器看到的網頁都是靜態網頁，都是由HTML、JavaScript 和CSS 技術構成的，所以如果想從事網頁設計或從事網站管理相關工作，就必須學習HTML、JavaScript 和CSS 技術，哪怕只是簡單地了解，因為HTML、JavaScript 和CSS 技術是網頁制作技術的基礎和核心。

本書緊密圍繞網頁設計師在制作網頁過程中的實際需要和應該掌握的技術，全面介紹了使用HTML、CSS、JavaScript 進行網頁設計和制作各方面的內容和技巧。本書在講解時采用了最新的HTML5 規范和CSS3 標準，并以Chrome 瀏覽器為主要測試環境。

本書內容

全書共分15 章，主要內容如下。

第1 章　初步認識HTML5 和CSS3。本章首先帶領讀者了解網頁設計的基礎知識和Web標準布局知識，然后介紹從HTML 到XHTML 再到HTML5 的過渡，之后對HTML5 的語法做了詳細介紹，最后介紹了CSS3 的優缺點、新增特性以及性能測試方法。

第2 章　HTML5 網頁結構。本章主要介紹HTML5 中新增的與網頁結構相關的元素，包括頭部元素、結構元素、語義元素、節點元素、交互元素以及新增全局屬性。

第3 章　HTML5 表單應用。本章主要介紹HTML5 中新增的表單輸入類型、表單屬性、表單元素和表單驗證方式。

第4 章　HTML5 多媒體應用。本章主要介紹使用HTML5 新增的video 元素和audio 元素播放視頻和音頻。

第5 章　HTML5 繪圖應用。本章主要介紹使用canvas 元素繪制各種圖形，如繪制三角形、文本、漸變和陰影等，以及操作圖形的各種方法，如平移、縮放和坐標轉換等。

第6 章　HTML5 數據存儲。本章主要介紹HTML5 中新增的兩種數據存儲方式，即Web存儲和本地數據庫存儲。

第7 章　文件和離線應用。本章將從文件和離線兩個方面展開對HTML5 新特性的講解，主要包括允許選擇多個文件、讀取文件的信息和內容、實現文件上傳以及判斷是否在線等。

第8 章　HTML5 高級開發。本章從4 個方面講解HTML5 的高級特性，分別是拖放操作、跨文檔通信、多線程和地理位置。

第9 章　CSS3 選擇器。本章主要介紹CSS3 新增選擇器的使用，如屬性選擇器、偽類選擇器和偽對象選擇器等。

第10 章　CSS3 新增的基本屬性。本章主要介紹CSS3 中新增加的背景、邊框、字體、顏色等相關屬性，例如與背景有關的background-clip、background-size、background-origin 屬性，與邊框有關的border-radius、box-shadow、border-image 屬性等。

第11 章　變形、過渡和動畫。本章主要介紹CSS3 的動畫功能，包括變形效果、過渡效果和動畫幀等。

第12 章　CSS3 新增的高級屬性。本章主要介紹CSS3 中新增加的其他屬性，例如多列布局屬性、盒模型布局屬性、漸變屬性等。

第13 章　JavaScript 腳本編程快速入門。本章主要介紹JavaScript 的基礎知識，包括JavaScript 語言的語法規則、運算符、流程控制語句、對話框語句、函數以及常用對象的用法等內容。

第14 章　JavaScript 事件和DOM。本章主要介紹原始事件模型和標準事件模型，以及DOM 操作節點的方法，如遍歷、插入、復制、替換和刪除等。

第15 章　綜合案例。本章通過打地鼠、貪吃蛇、小貓笑臉和圖片輪播4 個綜合案例，介紹了Web 前端設計的完整過程。

本書特色

本書采用大量的實例進行講解，力求通過實際操作使讀者更容易地制作前端頁面、設計頁面樣式和操作頁面腳本。本書難度適中，內容由淺入深，實用性強，覆蓋面廣，條理清晰。

知識點全

本書緊緊圍繞前端的HTML5、CSS3 和JavaScript 展開講解，具有很強的邏輯性和系統性。

實例豐富

各章實例短小卻又能體現出知識點，讓讀者很輕松地學習，并能靈活地應用到實際的軟件項目中。

應用廣泛

對于精選案例，給出了詳細步驟，結構清晰簡明，分析深入淺出，而且有些程序能夠直接在項目中使用，避免讀者進行二次開發。

基于理論，注重實踐

本書在講述理論知識的過程中，在合適位置安排了綜合應用實例或者小型應用程序，將理論應用到實踐中，可以提高讀者的實際應用能力，鞏固開發基礎知識。

貼心的提示

為了便于讀者閱讀，全書還穿插著一些技巧、提示等小貼士，體例約定如下。

提示：通常是一些貼心的提醒，或者是讓讀者加深印象，或者是提供建議，或者是解決問題的方法。

注意：提出學習過程中需要特別注意的一些知識點和內容，或者相關信息。

技巧：通過簡短的文字，指出知識點在應用時的一些小竅門。

讀者對象

本書內容簡明易懂，有豐富的案例和習題，既可作為在校大學生學習使用前端網頁設計的參考資料，也適合作為高等院校相關專業的教學參考書，還可以作為非計算機專業學生學習HTML+CSS+JavaScript 的參考書。

本書由劉愛江、靳智良編著，參與本書編寫及設計工作的還有鄭志榮、侯艷書、劉利利、侯政洪、肖進、李海燕、侯政云、祝紅濤、崔再喜、賀春雷等，在此表示感謝。在本書的編寫過程中，我們力求精益求精，但難免存在一些不足之處，敬請廣大讀者批評指正。

編　者

 

目錄

第1章　初步認識HTML5和CSS3

1.1　認識網頁和網站 2

1.1.1　網頁 2

1.1.2　網站 3

1.1.3　網站制作流程 3

1.1.4　網頁設計流程 4

1.1.5　發布站點 4

1.2　Web標準布局介紹 5

1.2.1　當前的Web開發標準 5

1.2.2　為什么使用Web標準 5

1.2.3　CSS布局標準 6

1.3　HTML與HTML5 7

1.3.1　HTML的發展歷史 7

1.3.2　HTML 4.01和XHTML 8

1.3.3　HTML和XHTML文檔類型定義 9

1.3.4　從XHTML到HTML5 11

1.3.5　HTML5的優勢 11

1.4　HTML5語法的變化 13

1.4.1　DOCTYPE聲明 13

1.4.2　命名空間聲明 13

1.4.3　編碼類型 14

1.4.4　文檔媒體類型 15

1.4.5　HTML5兼容HTML 15

1.5　實踐案例：瀏覽器HTML5性能測試 18

1.6　CSS3簡介 19

1.6.1　什么是CSS3 20

1.6.2　CSS3的優缺點 20

1.6.3　CSS3的新增特性 21

1.7　實踐案例：瀏覽器CSS3性能測試 24

1.8　練習題 25

第2章　HTML5網頁結構

2.1　認識html根元素 28

2.2　文檔頭部元素 28

2.3　結構元素 31

2.3.1　header元素 31

2.3.2　article元素 33

2.3.3　section元素 34

2.3.4　aside元素 35

2.3.5　footer元素 36

2.4　節點元素 36

2.4.1　nav元素 36

2.4.2　hgroup元素 37

2.4.3　address元素 38

2.5　語義元素 39

2.5.1　mark元素 39

2.5.2　cite元素 40

2.5.3　time元素 40

2.5.4　wbr元素 41

2.5.5　ruby、rt和rp元素 41

2.6　交互元素 41

2.6.1　meter元素 41

2.6.2　progress元素 43

2.6.3　details元素 44

2.6.4　summary元素 45

2.7　全局屬性 45

2.7.1　hidden屬性 46

2.7.2　contenteditable屬性 46

2.7.3　spellcheck屬性 47

2.8　實踐案例：設計旅游網站首頁 48

2.9　練習題 53

第3章　HTML5表單應用

3.1　重新認識HTML表單 56

3.1.1　表單簡介 56

3.1.2　表單標記 56

3.1.3　基本表單元素 57

3.2　新增輸入類型 58

3.2.1　url類型 58

3.2.2　number類型 59

3.2.3　email類型 60

3.2.4　range類型 61

3.2.5　datepickers類型 62

3.2.6　color類型 64

3.2.7　tel類型 64

3.2.8　search類型 65

3.3　新增屬性 65

3.3.1　表單類屬性 65

3.3.2　輸入類屬性 67

3.4　表單元素 73

3.4.1　datalist元素 73

3.4.2　keygen元素 74

3.4.3　output元素 75

3.4.4　optgroup元素 76

3.5　表單驗證 77

3.5.1　自動驗證 77

3.5.2　顯式驗證 79

3.5.3　自定義驗證 80

3.5.4　取消驗證 81

3.6　實踐案例：設計用戶錄入表單 81

3.7　練習題 87

第4章　HTML5多媒體應用

4.1　多媒體簡介 90

4.1.1　多媒體編解碼器 90

4.1.2　視頻格式 90

4.1.3　音頻格式 91

4.2　播放視頻 91

4.2.1　video元素的基礎用法 92

4.2.2　video元素方法 94

4.2.3　video元素事件 95

4.3　播放音頻 97

4.3.1　audio元素的基礎用法 97

4.3.2　audio元素事件 98

4.4　實踐案例：實現HTML5網頁視頻播放器 99

4.5　練習題 105

第5章　HTML5繪圖應用

5.1　認識canvas元素 108

5.1.1　canvas簡介 108

5.1.2　創建canvas元素 108

5.1.3　實踐案例：判斷瀏覽器是否支持canvas元素 109

5.2　繪制簡單圖形 110

5.2.1　繪制矩形 110

5.2.2　繪制直線 113

5.2.3　繪制圓形 116

5.2.4　實踐案例：繪制三角形 119

5.2.5　保存和恢復圖形 121

5.2.6　輸出圖形 123

5.3　繪制文本 124

5.3.1　繪制普通文本 124

5.3.2　繪制陰影文本 126

5.4　繪制曲線 128

5.4.1　二次方貝塞爾曲線 128

5.4.2　三次方貝塞爾曲線 128

5.5　變換圖形 129

5.5.1　坐標變換 129

5.5.2　矩陣變換 133

5.5.3　組合圖形 135

5.5.4　線性漸變 138

5.5.5　徑向漸變 139

5.6　使用圖像 141

5.6.1　繪制圖像 141

5.6.2　平鋪圖像 143

5.6.3　裁剪和復制圖像 145

5.7　實踐案例：制作圖像黑白和反轉效果 146

5.8　練習題 148

第6章　HTML5數據存儲

6.1　Web存儲簡介 152

6.1.1　Web存儲和Cookie存儲 152

6.1.2　sessionStorage對象 152

6.1.3　localStorage對象 154

6.2　操作本地數據 155

6.2.1　保存數據 156

6.2.2　讀取數據 157

6.2.3　清空數據 159

6.2.4　遍歷數據 159

6.3　實踐案例：實現工程管理模塊 162

6.4　操作本地數據庫數據 167

6.4.1　創建數據庫 167

6.4.2　執行SQL語句 168

6.5　實踐案例：查看學生列表 170

6.6　練習題 171

第7章　文件和離線應用

7.1　操作文件 174

7.1.1　獲取文件信息 174

7.1.2　限制文件類型 175

7.2　實踐案例：文件上傳 177

7.3　FileReader接口 178

7.3.1　FileReader接口簡介 179

7.3.2　讀取文本文件內容 179

7.3.3　監聽讀取事件 181

7.3.4　處理讀取異常 183

7.4　實踐案例：預覽圖片 184

7.5　離線應用 186

7.5.1　離線Web應用程序概述 186

7.5.2　manifest文件 186

7.5.3　applicationCache對象 190

7.6　練習題 195

第8章　HTML5高級開發

8.1　拖放功能 198

8.1.1　拖放API簡介 198

8.1.2　dataTransfer對象 199

8.2　實踐案例：拖放式選擇員工 202

8.3　跨文檔消息通信 205

8.4　本地多線程 207

8.4.1　Worker對象簡介 207

8.4.2　線程和JavaScript交互 210

8.4.3　線程嵌套 210

8.4.4　實踐案例：線程和JSON交互 212

8.5　獲取地理位置 214

8.5.1　地圖API簡介 215

8.5.2　Position對象 216

8.6　練習題 218

第9章　CSS3選擇器

9.1　CSS選擇器的分類 222

9.2　屬性選擇器 226

9.2.1　E[att^=“val”] 226

9.2.2　E[att$=“val”] 227

9.2.3　E[att*=“val”] 227

9.2.4　實踐案例:設計顏色選擇器 227

9.3　偽類選擇器 229

9.3.1　E:last-child選擇器 229

9.3.2　E:only-child選擇器 230

9.3.3　E:nth-child(n)選擇器 231

9.3.4　E:nth-last-child(n)選擇器 233

9.3.5　E:root選擇器 233

9.3.6　E:not(s)選擇器 234

9.3.7　E:empty選擇器 235

9.3.8　E:target選擇器 236

9.3.9　實踐案例：單擊鏈接顯示具體內容 237

9.4　偽對象選擇器 238

9.4.1　E::selection選擇器 238

9.4.2　E::placeholder選擇器 239

9.4.3　已修改的選擇器 239

9.4.4　實踐案例：選擇器和content屬性結合插入內容 240

9.5　兄弟選擇器 243

9.6　練習題 244

第10章　CSS3新增的基本屬性

10.1　新增基本屬性 248

10.1.1　文本屬性 248

10.1.2　字體屬性 249

10.1.3　顏色屬性 250

10.1.4　邊框屬性 251

10.1.5　背景屬性 251

10.1.6　實踐案例：用JS判斷瀏覽器是否支持某屬性 251

10.2　設置文本樣式 252

10.2.1　文本換行設置 252

10.2.2　文本對齊方式 256

10.2.3　文本的單個陰影 256

10.2.4　文本的多個陰影 259

10.2.5　實踐案例：制作火焰字 260

10.3　設置邊框樣式 261

10.3.1　邊框圓角屬性 261

10.3.2　圖形填充邊框 264

10.3.3　邊框陰影效果 267

10.4　設置背景樣式 269

10.4.1　background-size屬性 270

10.4.2　background-origin屬性 271

10.4.3　background-clip屬性 272

10.5　實踐案例：制作太極圖 273

10.6　練習題 274

第11章　變形、過渡和動畫

11.1　CSS3的變形屬性 278

11.1.1　基本變形之平移 278

11.1.2　基本變形之縮放 280

11.1.3　基本變形之旋轉 280

11.1.4　基本變形之傾斜 281

11.1.5　實踐案例：制作個性圖片墻 283

11.1.6　指定變形中心點 284

11.2　CSS3的過渡屬性 286

11.2.1　過渡屬性概述 286

11.2.2　單個屬性實現過渡 287

11.2.3　多個屬性同時過渡 287

11.2.4　實踐案例：鼠標懸浮特效的過渡功能 289

11.3　CSS3的動畫屬性 291

11.3.1　了解animation屬性 291

11.3.2　@keyframes動畫幀 293

11.3.3　同時改變多個屬性的動畫 295

11.3.4　實踐案例：繪制旋轉的太極圖案 295

11.4　實踐案例：動態復古時鐘 296

11.5　練習題 299

第12章　CSS3新增的高級屬性

12.1　多列布局屬性 302

12.1.1　多列布局屬性列表 302

12.1.2　設置顯示列的寬度 302

12.1.3　設置顯示的固定列 303

12.1.4　設置顯示列的樣式 304

12.1.5　設置各列間的間距 305

12.2　彈性盒模型屬性 305

12.2.1　flex布局屬性 306

12.2.2　flex-direction屬性 307

12.2.3　flex-wrap屬性 308

12.2.4　justify-content屬性 309

12.2.5　其他屬性簡述 311

12.2.6　實踐案例：用flex盒模型實現三欄布局 314

12.3　漸變屬性 315

12.3.1　線性漸變 316

12.3.2　徑向漸變 319

12.3.3　重復漸變 323

12.3.4　實踐案例：用線性漸變實現圖片閃光劃過的效果 324

12.3.5　實踐案例：用徑向漸變制作一張優惠券 325

12.3.6　實踐案例：用重復漸變制作記事本紙張效果 326

12.4　練習題 327

第13章　JavaScript腳本編程快速入門

13.1　JavaScript語言簡介 330

13.1.1　JavaScript簡介 330

13.1.2　JavaScript與Java的關系 330

13.1.3　JavaScript語法規則 331

13.2　編寫JavaScript程序 332

13.2.1　集成JavaScript程序 332

13.2.2　使用外部JavaScript文件 333

13.2.3　注意事項 334

13.3　JavaScript腳本語法 335

13.3.1　數據類型 335

13.3.2　變量與常量 336

13.3.3　運算符 337

13.4　腳本控制語句 340

13.4.1　if條件語句 340

13.4.2　switch條件語句 342

13.4.3　while循環語句 343

13.4.4　do while循環語句 344

13.4.5　for循環語句 344

13.4.6　for in循環語句 345

13.4.7　對話框語句 345

13.5　函數 348

13.5.1　系統函數 348

13.5.2　自定義函數 350

13.6　常用對象 351

13.6.1　Array對象 351

13.6.2　Document對象 352

13.6.3　Window對象 353

13.7　實踐案例：長方體幾何計算 354

13.8　練習題 355

第14章　JavaScript事件和DOM

14.1　事件概述 358

14.1.1　事件簡介 358

14.1.2　指定事件 358

14.2　原始事件模型 359

14.2.1　事件類型 360

14.2.2　事件處理 361

14.2.3　使用事件返回值 362

14.3　標準事件模型 364

14.3.1　事件傳播 364

14.3.2　注冊事件處理程序 365

14.4　常用事件 366

14.4.1　鍵盤事件 366

14.4.2　鼠標事件 367

14.4.3　頁面事件 368

14.5　DOM簡介 370

14.5.1　HTML DOM中的節點樹 370

14.5.2　DOM核心接口 370

14.6　實踐案例：使用DOM操作節點 373

14.6.1　訪問節點 373

14.6.2　遍歷節點 376

14.6.3　操作屬性節點 379

14.6.4　創建和插入節點 382

14.6.5　復制節點 385

14.6.6　替換節點 385

14.6.7　刪除節點 387

14.7　練習題 387

第15章　綜合案例

15.1　打地鼠游戲 390

15.1.1　打地鼠游戲簡介 390

15.1.2　界面設計 391

15.1.3　實現腳本 392

15.2　經典貪吃蛇游戲 395

15.2.1　貪吃蛇游戲簡介 395

15.2.2　頁面設計 395

15.2.3　腳本實現 397

15.3　繪制呆萌的小貓笑臉 401

15.3.1　效果展示 402

15.3.2　靜態頁面 402

15.3.3　樣式代碼 403

15.4　圖片輪播效果展示 407

15.4.1　效果展示 407

15.4.2　靜態頁面 408

15.4.3　樣式代碼 408

練習題答案