HTML5從入門到精通（第4版）
明日科技
商品描述
目錄大綱
第1篇 基礎知識
第1章 HTML簡介 2
視頻講解：13分鐘
1.1 HTML的基本概念 2
1.2 HTML的發展史 3
1.2.1 HTML的早期發展 3
1.2.2 從HTML到XHTML 3
1.2.3 HTML5的面市及發展 4
1.3 HTML5的改進 4
1.3.1 部分代替了原來的JavaScript 5
1.3.2 更明確的語義支持 5
1.3.3 增強了Web應用程序功能 6
1.4 各瀏覽器對HTML5的支持 6
第2章 HTML5基礎 8
視頻講解：55分鐘
2.1 編寫第一個HTML文件 8
2.1.1 HTML文件的編寫方法 8
2.1.2 手工編寫頁面 10
2.1.3 實例演練——創建基本的HTML網頁 11
2.1.4 使用WebStorm製作頁面 12
2.1.5 使用瀏覽器瀏覽HTML文件 16
2.1.6 如何查看網頁源代碼 17
2.1.7 編寫文件的註意事項 19
2.2 HTML的基本結構 19
2.2.1 文件開始標簽——<html> 19
2.2.2 文件頭部標簽——<head> 20
2.2.3 文件標題標簽——<title> 20
2.2.4 基底網址標簽——<base> 21
2.2.5 文件主體標簽——<body> 22
2.2.6 註釋——<!-- --> 29
2.3 元信息標簽<meta> 29
2.3.1 設置頁面關鍵字 29
2.3.2 設置頁面描述 30
2.3.3 設置編輯工具 30
2.3.4 設定作者信息 31
2.3.5 限制搜索方式 31
2.3.6 設置網頁文字及語言 32
2.3.7 設置網頁的定時跳轉 32
2.3.8 設定有效期限 33
2.3.9 禁止從緩存中調用 34
2.3.10 刪除過期的cookie 34
2.3.11 強制打開新窗口 34
2.3.12 設定建立網站的日期 35
2.3.13 設定網頁版權信息 35
2.3.14 設定聯系人的郵箱 36
2.4 實踐與練習 36
第3章 設計網頁文本內容 39
視頻講解：107分鐘
3.1 標題文字的建立 39
3.1.1 標題文字標簽——<h> 40
3.1.2 標題文字對齊方式屬性——align 40
3.2 設置文字格式 42
3.2.1 粗體、斜體、下畫線標簽——<strong>、<em>、<u> 42
3.2.2 上標與下標標簽——<sup>、<sub> 42
3.2.3 設置刪除線標簽——<del>/<s> 43
3.2.4 等寬文字標簽——<code> 43
3.2.5 空格與其他特殊符號 44
3.3 設置段落格式 45
3.3.1 段落標簽——<p> 46
3.3.2 換行標簽——<br> 46
3.3.3 保留原始排版方式標簽——<pre> 47
3.3.4 向右縮進標簽——<blockquote> 48
3.4 設置水平線格式 48
3.4.1 添加水平線標簽——<hr> 49
3.4.2 設置水平線寬度與高度屬性——width、size 49
3.4.3 設置水平線顏色屬性——color 50
3.4.4 設置水平線對齊方式屬性——align 51
3.4.5 去掉水平線陰影屬性——noshade 52
3.5 其他文字標簽 53
3.5.1 文字標註標簽——<ruby> 53
3.5.2 聲明變量標簽——<var> 54
3.5.3 設置地址文字標簽——<address> 54
3.6 頁面顯示增強標簽 55
3.6.1 塊級內容標簽——<figure> 55
3.6.2 展開/收縮區域標簽——<details> 56
3.6.3 高亮顯示標簽——<mark> 58
3.6.4 進度標簽——<progress> 60
3.6.5 度量數量值標簽——<meter> 60
3.6.6 引用標簽——<cite> 61
3.6.7 小號字體標簽——<small> 61
3.7 主體結構標簽 62
3.7.1 獨立自包含內容標簽——<article> 62
3.7.2 節標簽——<section> 64
3.7.3 導航鏈接標簽——<nav> 64
3.7.4 附屬信息標簽——<aside> 65
3.7.5 日期時間標簽——<time> 67
3.8 非主體結構標簽 68
3.8.1 頁眉標簽——<header> 68
3.8.2 標題分組標簽——<hgroup> 68
3.8.3 頁腳標簽——<footer> 69
3.9 實踐與練習 69
第4章 使用列表 72
視頻講解：57分鐘
4.1 列表基礎 72
4.2 使用無序列表 73
4.2.1 創建無序列表——<ul>標簽 73
4.2.2 設置無序列表的類型——type屬性 74
4.3 使用有序列表 76
4.3.1 創建有序列表——<ol>標簽 76
4.3.2 設置有序列表的類型——type屬性 76
4.3.3 設置有序列表的起始數值——start屬性 78
4.4 定義列表的創建及使用 80
4.5 嵌套列表的使用 82
4.5.1 無序列表和有序列表的互相嵌套 82
4.5.2 有序列表之間的嵌套 83
4.5.3 定義列表的嵌套 84
4.6 實踐與練習 86
第5章 超鏈接 88
視頻講解：34分鐘
5.1 超鏈接基礎 88
5.1.1 什麽是超鏈接 88
5.1.2 絕對路徑 88
5.1.3 相對路徑 89
5.2 超鏈接的建立 89
5.2.1 超鏈接標簽——<a> 89
5.2.2 建立文本超鏈接 89
5.2.3 設置超鏈接的目標窗口 91
5.3 內部鏈接 93
5.4 書簽鏈接 94
5.4.1 建立書簽 95
5.4.2 為書簽設置鏈接 95
5.5 外部鏈接 98
5.5.1 通過HTTP協議設置外部鏈接 98
5.5.2 通過超鏈接實現發送E-mail郵件 99
5.5.3 通過超鏈接實現文件下載 100
5.6 其他鏈接 101
5.6.1 腳本鏈接 101
5.6.2 空鏈接 102
5.7 實踐與練習 102
第6章 使用圖像 104
視頻講解：55分鐘
6.1 圖像基礎 104
6.2 添加圖像——<img>標簽 105
6.3 設置圖像屬性 106
6.3.1 圖像高度、寬度和邊框 106
6.3.2 圖像水平間距和垂直間距 107
6.3.3 圖像相對於文字基準線的對齊方式 108
6.3.4 圖像的提示文字和替換文字 109
6.4 圖像超鏈接 110
6.4.1 設置圖像的超鏈接 111
6.4.2 設置圖像熱區鏈接 113
6.5 實踐與練習 114
第7章 表格的應用 119
視頻講解：79分鐘
7.1 創建表格 119
7.1.1 創建表格的基本構成——<table>、<tr>、<td>標簽 120
7.1.2 設置表格的標題——<caption>標簽 120
7.1.3 設置表格的表頭——<th>標簽 121
7.2 設置表格基本屬性 122
7.2.1 設置表格寬度——width屬性 122
7.2.2 設置表格高度——height屬性 124
7.2.3 設置表格對齊方式——align屬性 125
7.3 設置表格的邊框 126
7.3.1 設置表格邊框寬度——border屬性 126
7.3.2 設置表格邊框顏色——bordercolor屬性 127
7.3.3 設置表格內框寬度——cellspacing屬性 128
7.3.4 設置表格內文字與邊框間距——cellpadding屬性 129
7.4 設置表格背景 130
7.4.1 設置表格的背景顏色——bgcolor屬性 130
7.4.2 設置表格的背景圖像——background屬性 131
7.5 設置表格的行屬性 132
7.5.1 行高度的控制——height屬性 132
7.5.2 設置行背景——bgcolor、background屬性 133
7.5.3 設置行文字的水平對齊方式——align屬性 134
7.5.4 設置行文字的垂直對齊方式——valign屬性 135
7.5.5 設置標題行的垂直對齊方式——align屬性 135
7.6 設置表格的單元格屬性 137
7.6.1 設置單元格的大小——width、height屬性 137
7.6.2 設置單元格中文字的對齊方式——align、valign屬性 138
7.6.3 設置單元格的背景顏色——bgcolor屬性 139
7.6.4 設置單元格的背景圖像——background屬性 140
7.6.5 合並單元格——colspan、rowspan屬性 141
7.7 統一表格樣式的結構標簽 143
7.7.1 表首標簽——<thead> 143
7.7.2 表主體標簽——<tbody> 144
7.7.3 表尾標簽——<tfoot> 145
7.8 表格的嵌套 146
7.9 實踐與練習 148
第8章 佈局標簽 150
視頻講解：35分鐘
8.1 <div>標簽 150
8.1.1 <div>標簽簡介 150
8.1.2 <div>標簽的屬性 151
8.2 <span>標簽 157
8.2.1 <span>標簽簡介 158
8.2.2 <span>標簽與<div>標簽的比較 158
8.3 <iframe>標簽 159
8.3.1 <iframe>標簽簡介 159
8.3.2 <iframe>標簽的屬性 160
8.4 案例：製作下拉菜單導航條 162
8.5 實踐與練習 164
第9章 全局屬性 166
視頻講解：23分鐘
9.1 HTML5繼承前版本的全局屬性 166
9.1.1 title屬性 166
9.1.2 dir屬性 167
9.2 contenteditable屬性 168
9.3 spellcheck屬性 170
9.4 hidden屬性 172
9.5 translate屬性 174
9.6 tabindex屬性 175
9.7 實踐與練習 176
第10章 編輯表單 178
視頻講解：80分鐘
10.1 表單標簽——<form> 178
10.1.1 傳送地址——action屬性 178
10.1.2 表單名稱——name屬性 179
10.1.3 傳送方式——method屬性 180
10.1.4 編碼方式——enctype屬性 181
10.1.5 目標顯示方式——target屬性 181
10.1.6 自動完成——autocomplete屬性 182
10.1.7 表單驗證——novalidate屬性 183
10.2 輸入類元素 183
10.2.1 文本框——text屬性值 185
10.2.2 密碼域——password屬性值 186
10.2.3 單選按鈕——radio 188
10.2.4 復選框——checkbox屬性值 189
10.2.5 普通按鈕——button屬性值 191
10.2.6 提交按鈕——submit屬性值 192
10.2.7 重置按鈕——reset屬性值 194
10.2.8 圖像域——image屬性值 194
10.2.9 隱藏域——hidden屬性值 195
10.2.10 文件域——file屬性值 196
10.3 文本域標簽——<textarea> 197
10.4 標註與輸出標簽 199
10.4.1 標註標簽——<label> 199
10.4.2 輸出標簽——<output> 200
10.5 按鈕標簽——<button> 201
10.5.1 使用<button>標簽在頁面中添加按鈕 202
10.5.2 使用<button>標簽與<input>標簽添加按鈕的區別 203
10.6 下拉列表 204
10.6.1 列表標簽——<select> 204
10.6.2 選項標簽——<option> 204
10.6.3 選項組標簽——<optgroup> 206
10.6.4 自動完成下拉列表 207
10.7 對表單的驗證 208
10.7.1 自動驗證 208
10.7.2 checkValidity顯式驗證法 210
10.7.3 自定義錯誤信息 212
10.8 實踐與練習 213
第2篇 高級應用
第11章 嵌入多媒體元素 216
視頻講解：51分鐘
11.1 播放音頻 216
11.1.1 音頻格式 216
11.1.2 使用<audio>標簽嵌入音頻 217
11.1.3 使用JavaScript腳本控制音頻播放 218
11.2 播放視頻 221
11.2.1視頻格式 221
11.2.2 使用<video>標簽嵌入視頻 221
11.2.3 為視頻添加字幕 223
11.2.4 處理視頻播放相關事件 229
11.2.5 使用JavaScript腳本控制視頻播放 232
11.3 嵌入PDF文檔 234
11.3.1 使用<object>標簽嵌入PDF文檔 234
11.3.2 使用<embed>標簽嵌入PDF文檔 235
11.4 實踐與練習 236
第12章 文件操作 238
視頻講解：37分鐘
12.1 使用文件對象 238
12.1.1 通過FileList對象和file對象獲取文件信息 238
12.1.2 使用Blob對象獲取文件的類型與大小 241
12.1.3 創建並使用Blob對象 243
12.1.4 截取Blob對象 244
12.2 使用FileReader對象讀取文件 245
12.2.1 檢測瀏覽器對FileReader對象的支持性 245
12.2.2 FileReader對象的方法與事件 245
12.2.3 使用readAsDataURL()方法預覽圖片 247
12.2.4 使用readAsText()方法讀取文本文件 249
12.3 實踐與練習 251
第13章 拖放操作 253
視頻講解：35分鐘
13.1 拖放API 253
13.1.1 設置允許拖放 253
13.1.2 處理與拖放相關的事件 254
13.1.3 阻止拖放 255
13.2 dataTransfer對象 257
13.2.1 dataTransfer對象的常用屬性 257
13.2.2 dataTransfer對象的常用方法 258
13.3 案例：通過拖放實現將商品加入購物車中 260
13.4 實踐與練習 262
第14章 繪制圖形 264
視頻講解：166分鐘
14.1 初識Canvas 264
14.1.1 創建一個畫布 265
14.1.2 Canvas的坐標系 265
14.1.3 繪制矩形 266
14.2 創建路徑 269
14.2.1 創建矩形路徑 269
14.2.2 創建直線路徑 270
14.2.3 創建圓形路徑 271
14.2.4 貝塞爾曲線 273
14.3 運用樣式與顏色 275
14.3.1 fillStyle屬性和strokeStyle屬性 275
14.3.2 透明度——globalAlpha 276
14.3.3 線型——Line styles 277
14.4 實現漸變顏色 280
14.4.1 線性漸變 280
14.4.2 徑向漸變 281
14.5 圖形的變形 282
14.5.1 坐標的變換 282
14.5.2 路徑的坐標變換 283
14.5.3 矩陣變換 284
14.6 組合多個圖形 287
14.7 給圖形繪制陰影 290
14.8 圖像的處理 291
14.8.1 繪制圖像 291
14.8.2 圖像的局部放大 293
14.8.3 圖像平鋪 293
14.8.4 圖像裁剪 295
14.8.5 像素的處理 296
14.9 繪制文字 297
14.10 保存與恢復Canvas狀態 298
14.11 將Canvas對象轉換為base64編碼 299
14.12 製作動畫 300
14.13 綜合實例——桌面時鐘 302
14.14 實踐與練習 304
第15章 SVG的使用 306
視頻講解：75分鐘
15.1 SVG基礎 306
15.1.1 為什麽使用SVG 306
15.1.2 如何使用SVG 307
15.2 使用SVG繪制基本形狀 308
15.2.1 繪制矩形 309
15.2.2 繪制圓形 310
15.2.3 繪制橢圓 310
15.2.4 繪制多邊形 311
15.2.5 繪制直線 312
15.2.6 繪制折線 313
15.2.7 繪制路徑 314
15.2.8 繪制文本 315
15.3 SVG中的濾鏡 318
15.3.1 SVG濾鏡的使用方法 319
15.3.2 SVG實現模糊效果 319
15.3.3 SVG實現文字陰影 320
15.4 SVG實現動畫 321
15.4.1 使用<animate>標簽 321
15.4.2 使用<animateMotion>標簽 322
15.4.3 使用<animateTransform>標簽 323
15.5 SVG中的漸變 325
15.5.1 線性漸變 325
15.5.2 徑向漸變 326
15.6 實踐與練習 327
第16章 數據存儲 330
視頻講解：50分鐘
16.1 初識Web Storage 330
16.1.1 Web Storage是什麽 330
16.1.2 測試瀏覽器是否支持Web Storage 331
16.1.3 使用Web Storage中的API 331
16.1.4 案例：sessionStorage對象的應用——分步註冊 333
16.1.5 案例：localStorage對象的應用——自動登錄 336
16.2 本地數據庫 338
16.2.1 Web SQL Database簡介 338
16.2.2 使用Web SQL Database API 338
16.2.3 使用IndexedDB API 346
16.3 實踐與練習 351
第17章 使用Web Workers處理線程 353
視頻講解：20分鐘
17.1 Web Workers API概述 353
17.1.1 創建和使用Web Worker對象 354
17.1.2 線程間數據交互的實例——數的累加 357
17.2 在Web Worker內部能做什麽 359
17.3 多個JavaScript文件的加載與執行 360
17.4 線程嵌套 360
17.4.1 主線程中嵌套多個子線程 360
17.4.2 在多個子線程中進行數據的交互 363
17.5 實踐與練習 366
第18章 HTML5消息通信 367
視頻講解：39分鐘
18.1 跨文檔消息通信 367
18.1.1 監聽消息 367
18.1.2 發送消息 368
18.1.3 案例：同域跨文檔消息通信 369
18.1.4 案例：跨域消息通信 370
18.2 消息通道通信 374
18.3 WebSocket全雙工通信 378
18.3.1 什麽是WebSocket 378
18.3.2 使用WebSocket API 378
18.4 Server-Sent Events服務器推送事件通信 383
18.5 實踐與練習 386
第19章 獲取地理位置信息 387
視頻講解：28分鐘
19.1 Geolocation API的概述 387
19.1.1 獲取當前地理位置——getCurrentPosition()方法 387
19.1.2 監視定位——watchCurrentPosition()方法 389
19.1.3 停止獲取當前地理位置——clearWatch()方法 390
19.2 position對象的應用 390
19.3 利用HTML5和百度地圖實現地圖定位 393
19.4 實踐與練習 395
第20章 HTML5其他應用 396
視頻講解：50分鐘
20.1 操作瀏覽歷史記錄——History API 396
20.1.1 歷史記錄導航 397
20.1.2 添加歷史記錄條目 398
20.1.3 更新歷史記錄條目 401
20.2 實現桌面通知——Notification API 403
20.3 控制頁面可見性——Page Visibility API 408
20.4 切換全屏模式——Fullscreen API 410
20.5 判斷在線狀態 412
20.5.1 使用navigator對象的onLine屬性實現 412
20.5.2 為window對象添加online/offline事件監聽器實現 414
20.6 實踐與練習 416
第21章 響應式網頁設計 417
視頻講解：36分鐘
21.1 概述 417
21.1.1 響應式網頁設計的概念 417
21.1.2 響應式網頁設計的技術原理 418
21.1.3 響應式網頁設計的優缺點 418
21.2 響應式相關概念 419
21.2.1 像素和屏幕分辨率 419
21.2.2 視口 420
21.2.3 常見的網頁佈局類型 422
21.2.4 佈局的常見實現方式 422
21.3 響應式網頁設計的實現 423
21.3.1 通過CSS實現響應式網頁設計 423
21.3.2 通過第三方框架實現響應式網頁設計 427
21.4 實踐與練習 429
第3篇 項目實戰
第22章 在線教育網站 432
視頻講解：10分鐘
22.1 開發準備 432
22.1.1 網站概述 432
22.1.2 系統預覽 432
22.1.3 實現過程分析 434
22.2 首頁的設計與實現 437
22.2.1 首頁設計 437
22.2.2 代碼實現 438
22.3 登錄頁的設計與實現 440
22.3.1 登錄頁設計 440
22.3.2 代碼實現 441
22.4 課程列表頁的設計與實現 443
22.4.1 課程列表頁設計 443
22.4.2 代碼實現 444
22.5 課程詳情頁的設計與實現 446
22.5.1 課程詳情頁設計 446
22.5.2 代碼實現 447
