內容簡介
本書是一本從零開始學習的Web前端開發教材,無須額外的基礎。全書以項目驅動為宗旨,詳細介紹了HTML5、CSS3與JavaScript的基礎知識與使用技巧。
全書共包含11章,可分為以下3個部分:
第一部分是基礎知識篇,包括第1章至第4章的內容。
第二部分是重點篇,包括第榜組鑽5章至第10章的內容。
第三部分是提刪習店辣高篇,包括兆滲蘭第11章的內容。
本書包含全部例題228個,均在瀏覽器中調試通過。由於很多HTML5和CSS3的代碼需要較高版本瀏覽器方能提供更好的體驗效果,建議讀者使用但不限於Internet Explorer 10.0、Chrome 17.0、Firefox 10.0、Safari 5.0或Opera 11.1以上版本的瀏覽器。本書不僅可以作為高校計算機相關專業HTML5的課程教材,也可作為學習HTML5開發的自學教材或培訓教材。
圖書目錄
第一部分 基礎知識篇
第1章 緒論 3
1.1 Web原理基礎悼汗想 3
1.1.1 Internet與全球資訊網 3
1.1.2 Web架構 4
1.1.3 Web套用 4
1.2 Web前端技術基礎 5
1.2.1 HTML技術 5
1.2.2 CSS技術 6
1.2.3 JavaScript技術 6
1.3 Web前端新技術 7
1.3.1 HTML5技術 7
1.3.2 CSS3技術 8
1.4 Web開發工具 9
1.4.1 Adobe Dreamweaver 9
1.4.2 Sublime Text 10
1.4.3 NodePad++ 11
1.4.4 EditPlus 11
1.5 Web技術的前景與展望 12
1.5.1 Flash的興衰 12
1.5.2 HTML5的前景 12
1.5.3 未來展望 12
1.6 本章小結 13
習題1 13
第2章 HTML5基礎 14
2.1 HTML5基本結構 14
2.1.1 文檔類型聲明<!DOCTYPE> 15
2.1.2 根標籤<促謎墊html> 15
2.1.3 首部標籤<head> 16
2.1.4 主體標籤<body> 18
2.1.5 HTML5文檔注釋 18
2.1.6 HTML5文檔規範 19
2.1.7 HTML4.01轉換為HTML5 21
2.2 HTML5保留的常用標籤 22
2.2.1 基礎標籤 22
2.2.2 文本格式標籤 25
2.2.3 列表標籤 28
2.2.4 圖像標籤 33
2.2.5 超連結標籤 34
2.2.6 表格標籤 37
2.2.7 框架標籤 38
2.2.8 容器標籤 38
2.3 HTML5新增的常用標籤 40
2.3.1 HTML5新增文檔結構標籤 40
2.3.2 HTML5新增格式標籤 45
2.4 HTML5新增API 47
2.5 本章小結 48
習題2 48
第3章 CSS基礎 49
3.1.1 內聯樣式表 49
3.1.3 外部樣式表 52
3.1.4 樣式表層疊優先權 53
3.2.2 ID選擇器 54
3.2.3 類選擇器 55
3.2.4 屬性選擇危蘭器 57
3.3 語法規則 58
3.3.1 注釋語句 58
3.3.2 @charset 59
3.3.3 !important 59
3.4 CSS取值與單位 59
3.4.1 數字 59
3.4.2 長度 60
3.4.3 角度 60
3.4.4 時間 60
3.4.5 文本 61
3.4.6 顏色 61
3.5 CSS常用樣式 64
3.5.1 CSS背景 64
3.5.3 CSS文本 84
3.5.4 CSS字型 89
3.5.5 CSS超辯汗遷嫌連結 95
3.5.6 CSS列表 96
3.6.1 絕對定位 113
3.6.2 相對定位 115
3.6.3 層疊效果 116
3.6.4 浮動 118
3.7 本章小結 121
習題3 121
第4章 JavaScript基礎 122
4.1 JavaScript的實現 122
4.1.1 ECMAScript 122
4.1.2 DOM 122
4.1.3 BOM 122
4.2 JavaScript的使用 122
4.2.1 內部JavaScript 123
4.2.2 外部JavaScript 124
4.3 JavaScript的語法 125
4.3.1 JavaScript的大小寫 125
4.3.2 JavaScript分號 125
4.3.3 JavaScript注釋 125
4.3.4 JavaScript代碼塊 126
4.4 JavaScript變數 126
4.4.1 變數的聲明 126
4.4.2 變數的命名規範 127
4.4.3 JavaScript關鍵字和保留字 128
4.5 JavaScript基本數據類型 128
4.5.1 Undefined類型 129
4.5.2 Null類型 130
4.5.3 String類型 130
4.5.4 Number類型 140
4.5.5 Boolean類型 146
4.6 JavaScript對象類型 147
4.6.1 本地對象 147
4.6.2 內置對象 155
4.6.3 宿主對象 158
4.7 JavaScript類型轉換 158
4.7.1 轉換成字元串 158
4.7.2 轉換成數字 159
4.8 JavaScript運算符 164
4.8.5 相等性運算符 171
4.9 JavaScript條件語句 172
4.9.1 if語句 172
4.9.2 switch語句 174
4.10 JavaScript循環語句 176
4.10.1 for循環 176
4.10.2 for-in循環 177
4.10.3 while循環 178
4.10.4 do-while循環 179
4.10.5 break和continue 180
4.11 JavaScript函式 182
4.11.1 函式的基本結構 182
4.11.2 函式的調用 182
4.11.3 函式的返回值 183
4.12 文檔對象模型DOM 185
4.12.1 查找HTML 元素 185
4.12.2 DOM HTML 187
4.12.3 DOM CSS 190
4.12.4 DOM事件 191
4.12.5 DOM節點 192
4.13 瀏覽器對象模型BOM 195
4.13.1 Window對象 196
4.13.3 Location對象 197
4.13.5 Navigator對象 199
4.14 本章小結 200
習題4 201
第二部分 重 點 篇
第5章 HTML5拖放API 205
5.1 HTML5新增拖放API 205
5.2 瀏覽器支持情況 205
5.3 HTML5拖放API的套用 205
5.3.1 DragEvent事件 205
5.3.2 DataTransfer對象 206
5.3.3 拖放元素過程 207
5.3.4 自定義拖放圖示 211
5.3.5 自定義拖放行為 213
5.3.6 本地檔案的拖放 215
5.4 本章小結 217
習題5 218
第6章 HTML5表單API 219
6.1 HTML表單基礎 219
6.1.1 表單標籤<form> 219
6.1.2 輸入標籤<input> 220
6.1.3 標記標籤<label> 233
6.1.4 多行文本標籤<textarea> 235
6.1.5 列表標籤<select> 236
6.1.6 按鈕標籤<button> 241
6.1.7 域標籤<fieldset>和域標題標籤<legend> 243
6.2 HTML5表單新特性 245
6.2.1 HTML5表單新增輸入類型 245
6.2.2 HTML5表單新增元素標籤 259
6.2.3 HTML5表單新增屬性 263
6.3 本章小結 278
習題6 278
第7章 HTML5畫布API 279
7.1 畫布概述 279
7.1.1 HTML5畫布 279
7.1.2 畫布坐標 279
7.1.3 主流瀏覽器支持情況一覽 280
7.2 HTML5畫布API的套用 280
7.2.1 檢查瀏覽器支持情況 280
7.2.2 創建畫布 281
7.2.3 畫布繪製方法 282
7.2.4 繪製路徑 282
7.2.5 繪製矩形 289
7.2.6 繪製圖片 292
7.2.7 繪製文本 295
7.2.8 顏色與樣式 296
7.2.9 保存和恢復 306
7.2.10 變形 308
7.2.11 剪裁 313
7.3 本章小結 315
習題7 315
第8章 HTML5媒體API 316
8.1 HTML5媒體API概述 316
8.1.2 HTML5媒體支持的格式 316
8.2 主流瀏覽器支持情況一覽 317
8.2.1 對HTML5音頻的支持情況 317
8.2.2 對HTML5視頻的支持情況 317
8.3 HTML5音頻的套用 318
8.3.1 HTML5音頻的基本格式 318
8.3.2 檢查瀏覽器支持情況 319
8.3.3 音頻來源多樣性 321
8.3.4 自定義音頻控制 322
8.4 HTML5視頻的套用 324
8.4.1 HTML5視頻的基本格式 324
8.4.2 檢查瀏覽器支持情況 325
8.4.3 視頻來源多樣性 327
8.4.4 自定義視頻控制 328
8.5 HTML5媒體API其他通用功能 332
8.5.1 標記媒體播放時間範圍 332
8.5.2 跳轉媒體播放時間點 333
8.5.3 獲取媒體播放時間 335
8.5.4 終止媒體檔案的下載 337
8.5.5 使用Flash播放器 339
8.6 本章小結 340
習題8 341
第9章 HTML5地理定位API 342
9.1 位置信息 342
9.1.1 經緯度坐標 342
9.1.2 位置信息的來源 342
9.2 主流瀏覽器支持情況一覽 343
9.3 HTML5地理位置API的套用 343
9.3.1 檢查瀏覽器支持情況 343
9.3.2 Geolocation接口 345
9.3.3 獲取當前定位 345
9.3.4 實時更新定位 353
9.4 本章小結 356
習題9 357
第10章 HTML5 Web存儲API 358
10.1 Web存儲技術概述 358
10.1.1 HTTP Cookie存儲 358
10.1.2 HTML5 Web存儲 358
10.2 主流瀏覽器支持情況 359
10.3 HTML5 Web存儲 API的套用 359
10.3.1 檢查瀏覽器支持情況 359
10.3.2 Storage接口 360
10.3.3 localStorage vs sessionStorage 361
10.3.4 存儲數據 361
10.3.5 讀取指定數據 365
10.3.6 數據遍歷 367
10.3.7 刪除指定數據 369
10.3.8 清空所有數據 371
10.4 本章小結 374
習題10 375
第三部分 提 高 篇
第11章 CSS3技術 379
11.1 CSS3框線和背景效果 379
11.1.1 CSS3框線 379
11.1.2 CSS3背景效果 386
11.2 CSS3文本和字型效果 391
11.2.1 CSS3文本 391
11.2.2 CSS3字型 397
11.3 CSS3變形與動畫效果 399
11.3.1 CSS3 2D變形 399
11.3.2 CSS3 Transition動畫 411
11.3.3 CSS3 Animation動畫 416
11.4 CSS3多列 423
11.4.1 columns 423
11.4.2 column-gap 423
11.4.3 column-rule 424
11.5 本章小結 427
習題11 427
附錄 428
附錄A HTML5元素標籤對照表 428
附錄B HTML5事件屬性對照表 431
附錄C CSS3顏色名稱對照表 433
2.2.8 容器標籤 38
2.3 HTML5新增的常用標籤 40
2.3.1 HTML5新增文檔結構標籤 40
2.3.2 HTML5新增格式標籤 45
2.4 HTML5新增API 47
2.5 本章小結 48
習題2 48
第3章 CSS基礎 49
3.1.1 內聯樣式表 49
3.1.3 外部樣式表 52
3.1.4 樣式表層疊優先權 53
3.2.2 ID選擇器 54
3.2.3 類選擇器 55
3.2.4 屬性選擇器 57
3.3 語法規則 58
3.3.1 注釋語句 58
3.3.2 @charset 59
3.3.3 !important 59
3.4 CSS取值與單位 59
3.4.1 數字 59
3.4.2 長度 60
3.4.3 角度 60
3.4.4 時間 60
3.4.5 文本 61
3.4.6 顏色 61
3.5 CSS常用樣式 64
3.5.1 CSS背景 64
3.5.3 CSS文本 84
3.5.4 CSS字型 89
3.5.5 CSS超連結 95
3.5.6 CSS列表 96
3.6.1 絕對定位 113
3.6.2 相對定位 115
3.6.3 層疊效果 116
3.6.4 浮動 118
3.7 本章小結 121
習題3 121
第4章 JavaScript基礎 122
4.1 JavaScript的實現 122
4.1.1 ECMAScript 122
4.1.2 DOM 122
4.1.3 BOM 122
4.2 JavaScript的使用 122
4.2.1 內部JavaScript 123
4.2.2 外部JavaScript 124
4.3 JavaScript的語法 125
4.3.1 JavaScript的大小寫 125
4.3.2 JavaScript分號 125
4.3.3 JavaScript注釋 125
4.3.4 JavaScript代碼塊 126
4.4 JavaScript變數 126
4.4.1 變數的聲明 126
4.4.2 變數的命名規範 127
4.4.3 JavaScript關鍵字和保留字 128
4.5 JavaScript基本數據類型 128
4.5.1 Undefined類型 129
4.5.2 Null類型 130
4.5.3 String類型 130
4.5.4 Number類型 140
4.5.5 Boolean類型 146
4.6 JavaScript對象類型 147
4.6.1 本地對象 147
4.6.2 內置對象 155
4.6.3 宿主對象 158
4.7 JavaScript類型轉換 158
4.7.1 轉換成字元串 158
4.7.2 轉換成數字 159
4.8 JavaScript運算符 164
4.8.5 相等性運算符 171
4.9 JavaScript條件語句 172
4.9.1 if語句 172
4.9.2 switch語句 174
4.10 JavaScript循環語句 176
4.10.1 for循環 176
4.10.2 for-in循環 177
4.10.3 while循環 178
4.10.4 do-while循環 179
4.10.5 break和continue 180
4.11 JavaScript函式 182
4.11.1 函式的基本結構 182
4.11.2 函式的調用 182
4.11.3 函式的返回值 183
4.12 文檔對象模型DOM 185
4.12.1 查找HTML 元素 185
4.12.2 DOM HTML 187
4.12.3 DOM CSS 190
4.12.4 DOM事件 191
4.12.5 DOM節點 192
4.13 瀏覽器對象模型BOM 195
4.13.1 Window對象 196
4.13.3 Location對象 197
4.13.5 Navigator對象 199
4.14 本章小結 200
習題4 201
第二部分 重 點 篇
第5章 HTML5拖放API 205
5.1 HTML5新增拖放API 205
5.2 瀏覽器支持情況 205
5.3 HTML5拖放API的套用 205
5.3.1 DragEvent事件 205
5.3.2 DataTransfer對象 206
5.3.3 拖放元素過程 207
5.3.4 自定義拖放圖示 211
5.3.5 自定義拖放行為 213
5.3.6 本地檔案的拖放 215
5.4 本章小結 217
習題5 218
第6章 HTML5表單API 219
6.1 HTML表單基礎 219
6.1.1 表單標籤<form> 219
6.1.2 輸入標籤<input> 220
6.1.3 標記標籤<label> 233
6.1.4 多行文本標籤<textarea> 235
6.1.5 列表標籤<select> 236
6.1.6 按鈕標籤<button> 241
6.1.7 域標籤<fieldset>和域標題標籤<legend> 243
6.2 HTML5表單新特性 245
6.2.1 HTML5表單新增輸入類型 245
6.2.2 HTML5表單新增元素標籤 259
6.2.3 HTML5表單新增屬性 263
6.3 本章小結 278
習題6 278
第7章 HTML5畫布API 279
7.1 畫布概述 279
7.1.1 HTML5畫布 279
7.1.2 畫布坐標 279
7.1.3 主流瀏覽器支持情況一覽 280
7.2 HTML5畫布API的套用 280
7.2.1 檢查瀏覽器支持情況 280
7.2.2 創建畫布 281
7.2.3 畫布繪製方法 282
7.2.4 繪製路徑 282
7.2.5 繪製矩形 289
7.2.6 繪製圖片 292
7.2.7 繪製文本 295
7.2.8 顏色與樣式 296
7.2.9 保存和恢復 306
7.2.10 變形 308
7.2.11 剪裁 313
7.3 本章小結 315
習題7 315
第8章 HTML5媒體API 316
8.1 HTML5媒體API概述 316
8.1.2 HTML5媒體支持的格式 316
8.2 主流瀏覽器支持情況一覽 317
8.2.1 對HTML5音頻的支持情況 317
8.2.2 對HTML5視頻的支持情況 317
8.3 HTML5音頻的套用 318
8.3.1 HTML5音頻的基本格式 318
8.3.2 檢查瀏覽器支持情況 319
8.3.3 音頻來源多樣性 321
8.3.4 自定義音頻控制 322
8.4 HTML5視頻的套用 324
8.4.1 HTML5視頻的基本格式 324
8.4.2 檢查瀏覽器支持情況 325
8.4.3 視頻來源多樣性 327
8.4.4 自定義視頻控制 328
8.5 HTML5媒體API其他通用功能 332
8.5.1 標記媒體播放時間範圍 332
8.5.2 跳轉媒體播放時間點 333
8.5.3 獲取媒體播放時間 335
8.5.4 終止媒體檔案的下載 337
8.5.5 使用Flash播放器 339
8.6 本章小結 340
習題8 341
第9章 HTML5地理定位API 342
9.1 位置信息 342
9.1.1 經緯度坐標 342
9.1.2 位置信息的來源 342
9.2 主流瀏覽器支持情況一覽 343
9.3 HTML5地理位置API的套用 343
9.3.1 檢查瀏覽器支持情況 343
9.3.2 Geolocation接口 345
9.3.3 獲取當前定位 345
9.3.4 實時更新定位 353
9.4 本章小結 356
習題9 357
第10章 HTML5 Web存儲API 358
10.1 Web存儲技術概述 358
10.1.1 HTTP Cookie存儲 358
10.1.2 HTML5 Web存儲 358
10.2 主流瀏覽器支持情況 359
10.3 HTML5 Web存儲 API的套用 359
10.3.1 檢查瀏覽器支持情況 359
10.3.2 Storage接口 360
10.3.3 localStorage vs sessionStorage 361
10.3.4 存儲數據 361
10.3.5 讀取指定數據 365
10.3.6 數據遍歷 367
10.3.7 刪除指定數據 369
10.3.8 清空所有數據 371
10.4 本章小結 374
習題10 375
第三部分 提 高 篇
第11章 CSS3技術 379
11.1 CSS3框線和背景效果 379
11.1.1 CSS3框線 379
11.1.2 CSS3背景效果 386
11.2 CSS3文本和字型效果 391
11.2.1 CSS3文本 391
11.2.2 CSS3字型 397
11.3 CSS3變形與動畫效果 399
11.3.1 CSS3 2D變形 399
11.3.2 CSS3 Transition動畫 411
11.3.3 CSS3 Animation動畫 416
11.4 CSS3多列 423
11.4.1 columns 423
11.4.2 column-gap 423
11.4.3 column-rule 424
11.5 本章小結 427
習題11 427
附錄 428