內 容 簡 介本書從初學者的角度出發，以通俗易懂的語言、豐富多彩的案例，詳細介紹如何使用HTML、CSS和JavaScript設計直觀、漂亮、功能強大的網頁。全書共分為16章，主要內容包括HTML發展歷史、開發工具、文檔語法、頭部內容和主體內容的常用標記、網頁注釋，文本標記和列表標記，表格設計和表單輸入，層和框架，HTML 5中的新增元素、新增表單、文件應用、數據存儲對象、本地數據庫、Web離線應用、WebWork處理線程、跨文檔消息通信、地理位置信息的獲取，CSS發展歷史、CSS注釋、CSS選擇器、CSS關鍵字和字符串，基本單位、字體屬性、文本屬性、背景屬性、邊框屬性、間隙和填充屬性，CSS 3中新增的選擇器、顏色和文本屬性、邊框屬性、背景屬性、盒布局和多列布局屬性、用戶界面屬性、漸變效果、過渡屬性、轉換和動畫屬性，JavaScript歷史、數據類型、變量、常用運算符，選擇語句、循環語句、break語句、continue語句、return語句、異常處理語句，系統對象、內置函數、自定義對象和函數，以及JavaScript中的正則表達式和事件處理等。在本書最后一章的綜合案例中，通過3個完整的案例，演示HTML、CSS和JavaScript的使用。本書所有的知識點都結合具體的示例進行介紹，涉及到的程序代碼都給出了詳細的注釋，能夠使讀者輕松領會使用HTML、CSS和JavaScript開發網頁的精髓，快速提高開發技能。本書可供從事網頁設計的初學者閱讀，也可作為非計算機專業學生的參考資料。前 言
隨著Web 2.0的廣泛應用，標準化的設計方式正逐漸取代傳統的布局方式，網頁開發者必須掌握新知識和新技術。HTML(Hyper Text Markup Language，超文本標記語言)是用來描述網頁的一種語言，它提供了一系列的標記來描述網頁；CSS(Cascading Style Sheets，層疊樣式表)樣式定義了如何顯示HTML中的標記；JavaScript是世界上最流行的一種輕量級的編程語言，它不僅可用于HTML和Web，還可以廣泛用于服務器、PC、筆記本電腦、平板電腦以及智能手機等設備。
HTML + CSS + JavaScript構建網頁已經成為標準化的設計方式，它們扮演著各自的角色。HTML是基礎架構；CSS是元素格式、頁面布局的靈魂；而JavaScript是實現網頁的動態性、交互性的點睛之筆。本書將向讀者介紹HTML、CSS和JavaScript的相關知識，它們是相對獨立的，但是在內容上又是依次遞進的。
1. 本書內容
本書共分為16章，主要內容如下。
第1章：HTML基礎語法。內容包括HTML概念、發展歷史、開發工具、基礎語法、注釋，以及文本頭部和文檔主體常用的一些標記等。
第2章：文本標記和列表標記。詳細介紹HTML中常用的文本標記和列表標記。另外，還介紹了列表標記的嵌套。
第3章：表格設計和表單輸入。包含表格和表單兩部分內容。其中表格包括基本語法、常用屬性以及如何分組顯示等內容；表單包括概念、基本語法以及常用元素等內容。
第4章：層和框架。首先從層的基礎知識開始介紹，接著介紹框架的基礎知識，然后介紹框架標記和內聯框架，最后介紹框架集。
第5章：HTML 5的新增元素。先介紹HTML 5的語法和瀏覽器兼容情況，然后詳細介紹HTML 5中新增加的元素，包括結構元素、語義元素、多媒體元素、繪圖元素以及命令元素等。
第6章：HTML 5新增表單及其應用。包括表單和文件兩大部分，詳細介紹新增的表單屬性、表單元素、表單輸入類型，與文件有關的multiple屬性、file對象、FileReader接口，以及拖拽事件和dataTransfer對象等。
第7章：HTML 5的高級功能。對HTML 5中新增加的一些高級功能進行介紹，例如數據存儲對象、本地數據庫存儲、Web離線應用、WebWork處理線程以及跨文檔消息通信和地理位置的獲取等。
第8章：CSS基礎語法。將向讀者介紹CSS的發展歷史、特點、注釋規范、CSS 2使用的選擇器以及如何在網頁中插入CSS樣式等多個內容。
第9章：CSS的常用屬性。著重介紹CSS規范中提供的一些常用屬性，包括字體屬性、文本屬性、背景屬性、邊框屬性以及填充和間距屬性等。
第10章：CSS 3的新增屬性。向讀者介紹CSS 3中新增的一些內容，包括新增選擇器、新增顏色和文本屬性、新增邊框和背景屬性、新增盒布局和多列布局屬性、用戶界面屬性，以及過渡、轉換、動畫和漸變屬性等。
第11章：JavaScript基礎語法。從JavaScript的概念開始介紹，接著介紹JavaScript的代碼位置和注釋代碼，然后分別介紹JavaScript中常用的數據類型、變量及運算符。
第12章：JavaScript的常用語句。主要介紹流程控制語句和異常處理語句。其中，流程控制語句包括選擇語句、循環語句、break語句和continue語句等。
第13章：系統對象和函數。介紹JavaScript的對象和函數，包括對象的組成、對象屬性和方法的獲取、瀏覽器對象、內置對象、自定義對象、系統函數以及自定義函數等多個內容。
第14章：正則表達式。從正則表達式的基本內容開始介紹，然后依次介紹其匹配規則、常用的正則表達式、RegExp對象以及支持正則表達式的String對象的方法等多個內容。
第15章：JavaScript的事件處理。著重介紹JavaScript中的事件，包括事件概述、原始事件模型、標準事件模型和IE事件模型等。
第16章：綜合案例實踐。將HTML、CSS和JavaScript結合起來，實現3個簡單的、比較完整的綜合案例。這3個案例分別是音樂網頁、貪吃蛇游戲和俄羅斯方塊游戲。
2. 本書特色
本書中的大量內容來自于實際的開發項目，針對初學者和中級讀者量身定做，由淺入深地介紹與HTML、CSS和JavaScript有關的知識。
本書具有以下特色。
(1) 知識全面，內容豐富
本書緊密圍繞HTML、CSS和JavaScript中常用的知識點展開講解，涵蓋了實際開發中所遇到的頁面標記、高級開發(例如Web離線程序、獲取地理位置信息)、樣式設計、腳本處理等多種知識點。
(2) 基于理論，注重實踐
本書不僅介紹理論知識，而且在合適位置安排綜合實驗指導或者小型應用程序，將理論知識應用到實踐中，以加強讀者的實際應用能力，鞏固基礎知識。
(3) 提供案例，清晰實用
對于大多數的精選案例，都向讀者提供了詳細步驟，結構清晰簡明，分析深入淺出，而且有些程序能夠直接在項目中使用，可避免讀者進行二次開發。
(4) 配備光盤，利于學習
本書為示例配備了視頻教學文件，讀者可以通過視頻文件更加直觀地學習與HTML、CSS和JavaScript有關的技術知識。
(5) 貼心提示，方便周到
為了便于讀者閱讀，全書還穿插著一些技巧、提示等小貼士，體例約定如下。
提示：通常是一些貼心的提醒，讓讀者加深印象，或者獲得解決問題的方法。
注意：提出學習過程中需要特別注意的一些知識點和內容，或者相關的信息。
技巧：通過簡短的文字，指出知識點在應用時的一些小竅門。
3. 讀者對象
本書適合作為軟件開發入門者的自學用書，也適合作為高等院校相關專業的教學參考書，還可供開發人員查閱和參考。
4. 編寫人員
除了本書的封面作者之外，參與本書編寫的人員還有侯政云、劉利利、鄭志榮、肖進、侯艷書、崔再喜、侯政洪、李海燕、祝紅濤、劉俊強等。在本書的編寫過程中，我們力求精益求精，但難免存在一些不足之處，懇請廣大讀者批評指正。目 錄
第1章 HTML基礎語法 1
1.1 了解HTML語言 1
1.1.1 HTML概述 1
1.1.2 HTML發展歷史 2
1.1.3 HTML編輯器 3
1.1.4 認識Dreamweaver工具 4
1.2 HTML的語法 7
1.2.1 HTML文檔 7
1.2.2 標記語法 7
1.2.3 屬性語法 8
1.2.4 全局屬性 9
1.3 頭部內容 10
1.3.1 <title>標記 11
1.3.2 <base>標記 11
1.3.3 <meta>標記 12
1.3.4 <style>標記 13
1.3.5 <script>標記 13
1.4 主體內容 14
1.4.1 頁面背景 14
1.4.2 頁面邊距 14
1.4.3 段落標記 15
1.4.4 超鏈接標記 16
1.4.5 圖像標記 17
1.4.6 其他常用標記 18
1.5 為HTML添加注釋 22
1.6 實驗指導——顯示一篇完整的文章 23
1.7 習題 24
第2章 文本標記和列表標記 26
2.1 文本標記 26
2.1.1 <font>標記 26
2.1.2 <ruby>標記 27
2.1.3 物理樣式標記 28
2.1.4 邏輯樣式標記 28
2.2 列表標記 29
2.2.1 列表標記的用途 29
2.2.2 無序列表 30
2.2.3 有序列表 31
2.2.4 解說列表 35
2.3 列表嵌套 37
2.3.1 標記自身嵌套 37
2.3.2 解說列表嵌套無序列表 38
2.3.3 無序列表嵌套有序列表 38
2.4 實驗指導——實現多層列表嵌套 40
2.5 習題 41
第3章 表格設計和表單輸入 43
3.1 了解表格 43
3.1.1 表格結構 43
3.1.2 設置單元格 44
3.1.3 表格的標題 45
3.2 表格標記的屬性 46
3.2.1 寬度和高度 46
3.2.2 背景顏色 47
3.2.3 邊框設置 47
3.2.4 單元格間距 48
3.2.5 行內容水平對齊 48
3.2.6 跨行和跨列 49
3.2.7 表格的描述 50
3.3 表格分組顯示 50
3.3.1 按行分組顯示 50
3.3.2 按列分組顯示 52
3.4 實驗指導——將表格進行嵌套 54
3.5 了解表單 56
3.5.1 表單概述 56
3.5.2 表單語法 57
3.6 表單元素 58
3.6.1 input元素 58
3.6.2 textarea元素 59
3.6.3 select元素 60
3.7 實驗指導——設計用戶資料修改頁面 62
3.8 習題 65
第4章 層和框架 66
4.1 了解層 66
4.1.1 div元素 66
4.1.2 div的屬性 67
4.1.3 并列圖層的遮擋 70
4.2 了解框架 70
4.2.1 框架概述 70
4.2.2 框架的結構 72
4.3 框架標記 74
4.3.1 frameset元素 74
4.3.2 noframes元素 74
4.3.3 frame元素 75
4.4 實驗指導——搭建用戶信息管理系統的框架 75
4.5 內聯框架 80
4.5.1 iframe元素 80
4.5.2 使用iframe元素 81
4.6 框架和框架集 83
4.7 實驗指導——使用Dreamweaver創建框架集 83
4.8 習題 87
第5章 HTML 5的新增元素 89
5.1 了解HTML 5 89
5.1.1 HTML 5概述 89
5.1.2 瀏覽器支持情況 90
5.1.3 HTML 5的標記方法 91
5.1.4 HTML 5兼容HTML 92
5.2 結構元素 94
5.2.1 header元素 94
5.2.2 article元素 95
5.2.3 section元素 97
5.2.4 nav元素 98
5.2.5 hgroup元素 98
5.2.6 footer元素 99
5.3 語義元素 99
5.3.1 塊級語義元素 100
5.3.2 行內語義元素 101
5.4 多媒體元素 103
5.4.1 多媒體概述 103
5.4.2 audio元素 105
5.4.3 video元素 108
5.4.4 source元素 110
5.4.5 判斷瀏覽器的支持情況 112
5.5 繪圖元素 113
5.5.1 canvas元素 113
5.5.2 使用canvas元素 114
5.6 HTML 5的其他新增元素 115
5.6.1 其他新增元素 115
5.6.2 details元素 116
5.6.3 command元素 117
5.6.4 track元素 118
5.7 實驗指導——用HTML 5的新增元素構建網頁 118
5.8 習題 123
第6章 HTML 5新增表單及其應用 125
6.1 新增的表單屬性 125
6.2 新增的表單元素 126
6.2.1 datalist元素 126
6.2.2 keygen元素 127
6.2.3 output元素 128
6.3 新增輸入類型 129
6.3.1 search類型 129
6.3.2 email類型 130
6.3.3 url類型 131
6.3.4 datepicker類型 132
6.3.5 number類型 133
6.3.6 range類型 134
6.3.7 color類型 135
6.3.8 tel類型 136
6.4 實驗指導——個人用戶信息注冊 137
6.5 文件上傳操作 139
6.5.1 multiple屬性 140
6.5.2 file對象 141
6.5.3 FileReader接口 142
6.6 實驗指導——用FileReader對象讀取文件 145
6.7 文件拖拽功能 148
6.7.1 拖拽事件 148
6.7.2 dataTransfer對象 148
6.8 習題 152
第7章 HTML 5實現高級功能 154
7.1 數據存儲對象 154
7.1.1 localStorage對象 154
7.1.2 sessionStorage對象 158
7.2 本地數據庫 160
7.2.1 打開和創建數據庫 160
7.2.2 事務處理方法 161
7.2.3 執行數據操作 162
7.3 實驗指導——用本地數據庫保存和讀取數據 163
7.4 Web離線應用程序 167
7.4.1 緩存清單 167
7.4.2 本地緩存對象 169
7.5 Web Worker處理線程 170
7.5.1 創建Worker對象 170
7.5.2 使用Worker對象 171
7.6 跨文檔消息通信 173
7.7 獲取地理位置信息 175
7.7.1 Geolocation API概述 175
7.7.2 position對象概述 177
7.8 實驗指導——利用Google地圖顯示當前位置 179
7.9 習題 182
第8章 CSS基礎語法 184
8.1 了解CSS 184
8.1.1 CSS概述 184
8.1.2 CSS發展簡史 186
8.1.3 使用CSS的好處 186
8.1.4 CSS注釋 186
8.2 在網頁中插入CSS樣式表 187
8.2.1 內聯樣式 187
8.2.2 嵌入樣式 188
8.2.3 外部引用樣式 189
8.3 CSS選擇器 192
8.3.1 元素選擇器 192
8.3.2 類選擇器 193
8.3.3 ID選擇器 194
8.3.4 屬性選擇器 194
8.3.5 偽元素和偽類 196
8.3.6 其他選擇器 198
8.4 關鍵字和字符串 200
8.4.1 關鍵字 200
8.4.2 字符串 200
8.5 實驗指導——HTML和CSS構建網頁 201
8.6 習題 204
第9章 CSS的常用屬性 206
9.1 基本單位 206
9.1.1 顏色 206
9.1.2 長度 208
9.1.3 百分比值 209
9.2 字體屬性 209
9.2.1 font-family屬性 209
9.2.2 font-size屬性 210
9.2.3 font-style屬性 212
9.2.4 font-weight屬性 212
9.2.5 font屬性 213
9.3 文本屬性 214
9.3.1 letter-spacing屬性 214
9.3.2 word-spacing屬性 215
9.3.3 text-decoration屬性 215
9.3.4 text-align屬性 216
9.3.5 text-indent屬性 217
9.3.6 text-transform屬性 217
9.3.7 其他常用屬性 218
9.4 背景屬性 219
9.4.1 background-color屬性 219
9.4.2 background-image屬性 220
9.4.3 background-repeat屬性 221
9.4.4 background-position屬性 223
9.4.5 background-attachment屬性 223
9.4.6 background屬性 224
9.5 邊框屬性 224
9.5.1 border-style屬性 225
9.5.2 border-width屬性 227
9.5.3 border-color屬性 228
9.5.4 border屬性 229
9.6 間隙和填充 230
9.6.1 間隙屬性 230
9.6.2 填充屬性 232
9.7 實驗指導——設置文章頁面的內容 233
9.8 習題 235
第10章 CSS 3的新增屬性 236
10.1 新增的選擇器 236
10.1.1 屬性選擇器 236
10.1.2 常用的偽類選擇器 238
10.1.3 UI元素狀態偽類選擇器 241
10.1.4 通用兄弟選擇器 242
10.2 新增的顏色和文本 242
10.2.1 顏色單位 242
10.2.2 文本屬性 244
10.2.3 @font-face規則 246
10.3 新增邊框和背景 248
10.3.1 邊框屬性 248
10.3.2 背景屬性 251
10.4 新增的盒布局和多列布局 254
10.4.1 盒布局屬性 254
10.4.2 多列類布局屬性 257
10.5 用戶界面屬性 259
10.6 其他高級屬性 261
10.6.1 漸變的實現 262
10.6.2 新增的過渡 264
10.6.3 新增的轉換 266
10.6.4 新增的動畫 268
10.7 實驗指導——設計直觀大方的表單 270
10.8 習題 273
第11章 JavaScript基礎語法 275
11.1 了解JavaScript 275
11.1.1 JavaScript概述 275
11.1.2 JavaScript代碼的位置 276
11.1.3 JavaScript注釋代碼 278
11.1.4 編寫JavaScript程序 278
11.2 數據類型和變量 279
11.2.1 數據類型 279
11.2.2 變量 281
11.3 常用運算符 282
11.3.1 算術運算符 282
11.3.2 賦值運算符 284
11.3.3 比較運算符 285
11.3.4 邏輯運算符 285
11.3.5 字符串運算符 287
11.3.6 位操作運算符 287
11.3.7 三元運算符 288
11.4 實驗指導——字符圍繞鼠標動態改變 288
11.5 習題 290
第12章 JavaScript的常用語句 293
12.1 順序語句 293
12.2 選擇語句 293
12.2.1 基本的if語句 294
12.2.2 if else語句 294
12.2.3 if else if else語句 295
12.2.4 if語句的嵌套 297
12.2.5 switch語句 298
12.3 循環語句 300
12.3.1 for語句 300
12.3.2 for in語句 301
12.3.3 while語句 302
12.3.4 do while語句 303
12.4 其他語句 303
12.4.1 break語句 303
12.4.2 continue語句 304
12.4.3 return語句 305
12.4.4 with語句 306
12.5 異常處理語句 306
12.5.1 try catch語句 306
12.5.2 try catch finally語句 308
12.6 實驗指導——計算器 308
12.7 習題 310
第13章 系統對象和函數 313
13.1 對象概述 313
13.1.1 對象的組成 313
13.1.2 獲取對象的屬性 314
13.1.3 引用對象方法 314
13.2 瀏覽器對象 314
13.2.1 window對象 315
13.2.2 navigator對象 317
13.2.3 document對象 318
13.2.4 location對象 321
13.2.5 history對象 322
13.2.6 screen對象 322
13.3 內置對象 323
13.3.1 String對象 323
13.3.2 Array對象 325
13.3.3 Date對象 328
13.3.4 Math對象 330
13.4 自定義對象 332
13.5 系統函數 333
13.6 自定義函數 334
13.6.1 函數語法 334
13.6.2 調用函數 335
13.6.3 全局變量和局部變量 335
13.6.4 動態函數 336
13.7 實驗指導——創建日歷生成器 337
13.8 習題 342
第14章 正則表達式 343
14.1 正則表達式概述 343
14.2 匹配規則 344
14.2.1 定位符 344
14.2.2 限定符 345
14.2.3 選擇匹配符 346
14.2.4 字符匹配符 346
14.2.5 原義字符 347
14.2.6 特殊字符 348
14.2.7 其他匹配符 348
14.3 常用的正則表達式 349
14.3.1 匹配特定數字 350
14.3.2 匹配特定字符串 350
14.3.3 匹配其他內容 350
14.4 RegExp對象 352
14.4.1 創建RegExp對象 352
14.4.2 屬性和方法 352
14.5 實驗指導——驗證手機號碼和電話號碼 353
14.6 實驗指導——驗證IP地址是否合法 356
14.7 支持正則表達式的String對象的方法 359
14.7.1 search()方法 359
14.7.2 match()方法 360
14.7.3 replace()方法 360
14.7.4 split()方法 362
14.8 習題 362
第15章 JavaScript的事件處理 364
15.1 事件概述 364
15.1.1 事件簡介 364
15.1.2 指定事件 365
15.2 原始事件模型 366
15.2.1 事件類型 366
15.2.2 事件處理 368
15.2.3 使用事件返回值 369
15.2.4 使用this關鍵字 371
15.3 標準事件模型 372
15.3.1 事件傳播 372
15.3.2 注冊事件處理程序 373
15.3.3 事件的模塊和類型 374
15.3.4 常用接口概述 375
15.4 實驗指導——實現視頻的多種操作 377
15.5 IE事件模型 381
15.5.1 IE Event對象 381
15.5.2 IE的事件傳播 382
15.6 習題 382
第16章 綜合案例實踐 384
16.1 設計音樂網頁 384
16.1.1 網頁效果 384
16.1.2 設計頭部區域 386
16.1.3 實現主體內容 389
16.2 貪吃蛇游戲 394
16.2.1 設計頁面 394
16.2.2 JavaScript代碼 395
16.3 俄羅斯方塊游戲 404
16.3.1 了解俄羅斯方塊游戲 404
16.3.2 設計頁面代碼 404
16.3.3 JavaScript腳本實現 406
