從0到1 HTML+CSS+JavaScript快速上手（微視頻版）

第 一部分 HTML 基礎(chǔ)
第 1 章 HTML 簡(jiǎn)介 3
1．1 前端技術(shù)簡(jiǎn)介 3
1．1．1 從“網(wǎng)頁(yè)制作”到“前端開(kāi)發(fā)” 3
1．1．2 從“前端開(kāi)發(fā)”到“后端開(kāi)發(fā)” 4
1．1．3 學(xué)習(xí)路線 6
1．2 什么是HTML 6
1．3 常見(jiàn)問(wèn)題 7
第 2 章 開(kāi)發(fā)工具 9
2．1 開(kāi)發(fā)工具 9
2．2 使用HBuilder 10
第3 章 基本標(biāo)簽 13
3．1 HTML 結(jié)構(gòu) 13
3．2 head 標(biāo)簽 15
3．2．1 title 標(biāo)簽 15
3．2．2 meta 標(biāo)簽 16
3．2．3 style 標(biāo)簽 18
3．2．4 script 標(biāo)簽 18
3．2．5 link 標(biāo)簽 19
3．2．6 base 標(biāo)簽 19
3．3 body 標(biāo)簽 19
3．4 HTML 注釋 20
3．5 本章練習(xí) 21
第4 章 文本 22
4．1 文本簡(jiǎn)介 22
4．1．1 頁(yè)面組成元素 22
4．1．2 HTML 文本 23
4．2 標(biāo)題標(biāo)簽 24
4．3 段落標(biāo)簽 26
4．3．1 段落標(biāo)簽 26
4．3．2 換行標(biāo)簽
27
4．4 文本標(biāo)簽 29
4．4．1 粗體標(biāo)簽 29
4．4．2 斜體標(biāo)簽 30
4．4．3 上標(biāo)標(biāo)簽 31
4．4．4 下標(biāo)標(biāo)簽 31
4．4．5 中劃線標(biāo)簽 32
4．4．6 下劃線標(biāo)簽 33
4．4．7 大字號(hào)標(biāo)簽和小字號(hào)標(biāo)簽 33
4．5 水平線標(biāo)簽 34
4．6 div 標(biāo)簽 35
4．7 自閉合標(biāo)簽 37
4．8 塊元素和行內(nèi)元素 38
4．8．1 塊元素 38
4．8．2 行內(nèi)元素 40
4．9 特殊符號(hào) 40
4．9．1 網(wǎng)頁(yè)中的“空格” 40
4．9．2 網(wǎng)頁(yè)中的“特殊符號(hào)” 42
4．10 本章練習(xí) 44
第5 章 列表 45
5．1 列表簡(jiǎn)介 45
5．2 有序列表 46
5．2．1 有序列表簡(jiǎn)介 46
5．2．2 type 屬性 47
5．3 無(wú)序列表 48
5．3．1 無(wú)序列表簡(jiǎn)介 48
5．3．2 type 屬性 49
5．3．3 深入無(wú)序列表 50
2 從 0 到 1 系列圖書(shū) 目錄
5．4 定義列表 53
5．5 HTML 語(yǔ)義化 54
5．6 本章練習(xí) 56
第6 章 表格 57
6．1 表格簡(jiǎn)介 57
6．2 基本結(jié)構(gòu) 57
6．3 完整結(jié)構(gòu) 59
6．3．1 表格標(biāo)題：caption 59
6．3．2 表頭單元格：th 60
6．4 語(yǔ)義化 62
6．5 合并行：rowspan 65
6．6 合并列：colspan 66
6．7 本章練習(xí) 67
第7 章 圖片 68
7．1 圖片標(biāo)簽 68
7．1．1 src 屬性 68
7．1．2 alt 屬性和title 屬性 69
7．2 圖片路徑 71
7．2．1 page1．html 引用圖片 72
7．2．2 page2．html 引用圖片 73
7．3 圖片格式 75
7．3．1 位圖 75
7．3．2 矢量圖 76
7．4 本章練習(xí) 78
第8 章 超鏈接 79
8．1 超鏈接簡(jiǎn)介 79
8．1．1 a 標(biāo)簽 79
8．1．2 target 屬性 81
8．2 內(nèi)部鏈接 82
8．3 錨點(diǎn)鏈接 83
8．4 本章練習(xí) 86
第9 章 表單 87
9．1 表單簡(jiǎn)介 87
9．1．1 表單是什么 87
9．1．2 表單標(biāo)簽 88
9．2 form 標(biāo)簽 89
9．2．1 form 標(biāo)簽簡(jiǎn)介 89
9．2．2 form 標(biāo)簽屬性 90
9．3 input 標(biāo)簽 91
9．4 單行文本框 92
9．4．1 單行文本框簡(jiǎn)介 92
9．4．2 單行文本框?qū)傩?92
9．5 密碼文本框 94
9．5．1 密碼文本框簡(jiǎn)介 94
9．5．2 密碼文本框?qū)傩?96
9．6 單選框 97
9．6．1 單選框簡(jiǎn)介 97
9．6．2 忽略點(diǎn) 98
9．7 復(fù)選框 101
9．8 按鈕 103
9．8．1 普通按鈕button 103
9．8．2 提交按鈕submit 104
9．8．3 重置按鈕reset 105
9．8．4 button 標(biāo)簽 107
9．9 文件上傳 107
9．10 多行文本框 108
9．11 下拉列表 109
9．11．1 下拉列表簡(jiǎn)介 109
9．11．2 select 標(biāo)簽屬性 110
9．11．3 option 標(biāo)簽屬性 112
9．12 本章練習(xí) 114
第 10 章 框架 116
10．1 iframe 標(biāo)簽 116
10．2 練習(xí)題 117
從0 到1 系列圖書(shū) 目錄 3
第 11 章 CSS 簡(jiǎn)介 121
11．1 CSS 簡(jiǎn)介 121
11．1．1 CSS 是什么 121
11．1．2 CSS 和CSS3 121
11．2 CSS 引入方式 122
11．2．1 外部樣式表 122
11．2．2 內(nèi)部樣式表 123
11．2．3 行內(nèi)樣式表 124
11．3 本章練習(xí) 125
第 12 章 CSS 選擇器 126
12．1 元素的id 和class 126
12．1．1 id 屬性 126
12．1．2 class 屬性 127
12．2 選擇器是什么 127
12．3 CSS 選擇器 129
12．3．1 元素選擇器 129
12．3．2 id 選擇器 130
12．3．3 class 選擇器 132
12．3．4 后代選擇器 134
12．3．5 群組選擇器 135
12．4 本章練習(xí) 138
第 13 章 字體樣式 139
13．1 字體樣式簡(jiǎn)介 139
13．2 字體類型：font-family 140
13．3 字體大小：font-size 141
13．3．1 px 是什么 142
13．3．2 采用px 為單位 142
13．4 字體粗細(xì)：font-weight 143
13．5 字體風(fēng)格：font-style 145
13．6 字體顏色：color 146
13．6．1 關(guān)鍵字 146
13．6．2 十六進(jìn)制RGB 值 147
13．7 CSS 注釋 148
13．8 本章練習(xí) 150
第 14 章 文本樣式 152
14．1 文本樣式簡(jiǎn)介 152
14．2 首行縮進(jìn)：text-indent 152
14．3 水平對(duì)齊：text-align 154
14．4 文本修飾：text-decoration 155
14．4．1 text-decoration 屬性 155
14．4．2 3 種劃線的用途分析 157
14．5 大小寫(xiě)：text-transform 157
14．6 行高：line-height 158
14．7 間距：letter-spacing、
word-spacing 160
14．7．1 字間距 160
14．7．2 詞間距 161
14．8 本章練習(xí) 162
第 15 章 邊框樣式 163
15．1 邊框樣式簡(jiǎn)介 163
15．2 整體樣式 164
15．2．1 邊框的屬性 164
15．2．2 簡(jiǎn)寫(xiě)形式 166
15．3 局部樣式 167
15．4 本章練習(xí) 170
第 16 章 列表樣式 171
16．1 列表項(xiàng)符號(hào)：list-style-type 171
16．1．1 定義列表項(xiàng)符號(hào) 171
16．1．2 去除列表項(xiàng)符號(hào) 173
16．2 列表項(xiàng)圖片：list-style-image 174
16．3 本章練習(xí) 176
第二部分 CSS 基礎(chǔ)
4 從 0 到 1 系列圖書(shū) 目錄
第 17 章 表格樣式 177
17．1 表格標(biāo)題位置：caption-side 177
17．2 表格邊框合并：border-collapse 179
17．3 表格邊框間距：border-spacing 180
17．4 本章練習(xí) 182
第 18 章 圖片樣式 183
18．1 圖片大小 183
18．2 圖片邊框 184
18．3 圖片對(duì)齊 185
18．3．1 水平對(duì)齊 185
18．3．2 垂直對(duì)齊 187
18．4 文字環(huán)繞：float 189
18．5 本章練習(xí) 191
第 19 章 背景樣式 192
19．1 背景樣式簡(jiǎn)介 192
19．2 背景顏色：background-color 192
19．3 背景圖片樣式：background-
image 194
19．4 背景圖片重復(fù)：background-
repeat 196
19．5 背景圖片位置：background-
position 198
19．5．1 像素值 198
19．5．2 關(guān)鍵字 199
19．6 背景圖片固定：background-
attachment 201
19．7 本章練習(xí) 202
第 20 章 超鏈接樣式 203
20．1 超鏈接偽類 203
20．1．1 超鏈接偽類簡(jiǎn)介 203
20．1．2 深入了解超鏈接偽類 205
20．2 深入了解：hover 206
20．3 鼠標(biāo)樣式 208
20．3．1 瀏覽器鼠標(biāo)樣式 208
20．3．2 自定義鼠標(biāo)樣式 209
20．4 本章練習(xí) 210
第 21 章 盒子模型 212
21．1 CSS 盒子模型 212
21．2 寬高：width、height 215
21．3 邊框：border 218
21．4 內(nèi)邊距：padding 219
21．4．1 padding 局部樣式 219
21．4．2 padding 簡(jiǎn)寫(xiě)形式 220
21．5 外邊距：margin 222
21．5．1 margin 局部樣式 222
21．5．2 margin 簡(jiǎn)寫(xiě)形式 226
21．5．3 瀏覽器審查元素 227
21．6 本章練習(xí) 228
第 22 章 浮動(dòng)布局 230
22．1 文檔流簡(jiǎn)介 230
22．1．1 正常文檔流 230
22．1．2 脫離文檔流 231
22．2 浮動(dòng) 233
22．3 清除浮動(dòng) 236
22．4 本章練習(xí) 238
第 23 章 定位布局 240
23．1 定位布局簡(jiǎn)介 240
23．2 固定定位：fixed 240
23．3 相對(duì)定位：relative 243
23．4 絕對(duì)定位：absolute 245
23．5 靜態(tài)定位：static 247
23．6 本章練習(xí) 247
從0 到1 系列圖書(shū) 目錄 5
第 24 章 JavaScript 簡(jiǎn)介 251
24．1 JavaScript 是什么 251
24．1．1 JavaScript 簡(jiǎn)介 251
24．1．2 教程介紹 252
24．2 JavaScript 開(kāi)發(fā)工具 253
24．3 JavaScript 引入方式 255
24．3．1 外部JavaScript 255
24．3．2 內(nèi)部JavaScript 256
24．3．3 元素屬性JavaScript 258
24．4 一個(gè)簡(jiǎn)單的JavaScript 程序 259
24．5 本章練習(xí) 261
第 25 章 語(yǔ)法基礎(chǔ) 262
25．1 語(yǔ)法簡(jiǎn)介 262
25．2 變量與常量 263
25．2．1 變量 263
25．2．2 常量 268
25．3 數(shù)據(jù)類型 268
25．3．1 數(shù)字 269
25．3．2 字符串 269
25．3．3 布爾值 272
25．3．4 未定義值 273
25．3．5 空值 274
25．4 運(yùn)算符 274
25．4．1 算術(shù)運(yùn)算符 275
25．4．2 賦值運(yùn)算符 279
25．4．3 比較運(yùn)算符 281
25．4．4 邏輯運(yùn)算符 282
25．4．5 條件運(yùn)算符 285
25．5 表達(dá)式與語(yǔ)句 286
25．6 類型轉(zhuǎn)換 287
25．6．1 “字符串”轉(zhuǎn)換為“數(shù)字” 287
25．6．2 “數(shù)字”轉(zhuǎn)換為“字符串” 291
25．7 轉(zhuǎn)義字符 293
25．8 注釋 295
25．8．1 單行注釋 295
25．8．2 多行注釋 296
25．9 本章練習(xí) 297
第 26 章 流程控制 299
26．1 流程控制簡(jiǎn)介 299
26．1．1 順序結(jié)構(gòu) 299
26．1．2 選擇結(jié)構(gòu) 300
26．1．3 循環(huán)結(jié)構(gòu) 301
26．2 選擇結(jié)構(gòu)：if 301
26．2．1 單向選擇：if．．． 302
26．2．2 雙向選擇：if．．．else．．． 303
26．2．3 多向選擇：if．．．else if．．．else．．． 305
26．2．4 if 語(yǔ)句的嵌套 306
26．3 選擇結(jié)構(gòu)：switch 309
26．4 循環(huán)結(jié)構(gòu)：while 313
26．5 循環(huán)結(jié)構(gòu)：do．．．while 317
26．6 循環(huán)結(jié)構(gòu)：for 318
26．7 實(shí)戰(zhàn)題：判斷一個(gè)數(shù)是整數(shù)，還是
小數(shù) 321
26．8 實(shí)戰(zhàn)題：找出“水仙花數(shù)” 322
26．9 本章練習(xí) 323
第 27 章 初識(shí)函數(shù) 325
27．1 函數(shù)是什么 325
27．2 函數(shù)的定義 327
27．2．1 沒(méi)有返回值的函數(shù) 327
27．2．2 有返回值的函數(shù) 330
27．2．3 全局變量與局部變量 331
27．3 函數(shù)的調(diào)用 333
第三部分 JavaScript 基礎(chǔ)
6 從 0 到 1 系列圖書(shū) 目錄
27．3．1 直接調(diào)用 334
27．3．2 在表達(dá)式中調(diào)用 335
27．3．3 在超鏈接中調(diào)用 336
27．3．4 在事件中調(diào)用 337
27．4 嵌套函數(shù) 338
27．5 內(nèi)置函數(shù) 339
27．6 實(shí)戰(zhàn)題：判斷某一年是否是閏年 340
27．7 實(shí)戰(zhàn)題：求出任意5 個(gè)數(shù)的最大值 341
27．8 本章練習(xí) 342
第 28 章 字符串對(duì)象 344
28．1 內(nèi)置對(duì)象簡(jiǎn)介 344
28．2 獲取字符串長(zhǎng)度 344
28．3 大小寫(xiě)轉(zhuǎn)換 346
28．4 獲取某一個(gè)字符 347
28．5 截取字符串 349
28．6 替換字符串 351
28．7 分割字符串 353
28．8 檢索字符串的位置 357
28．9 實(shí)戰(zhàn)題：統(tǒng)計(jì)某一個(gè)字符的個(gè)數(shù) 359
28．10 實(shí)戰(zhàn)題：統(tǒng)計(jì)字符串中有多少個(gè)
數(shù)字 360
28．11 本章練習(xí) 361
第 29 章 數(shù)組對(duì)象 362
29．1 數(shù)組是什么 362
29．2 數(shù)組的創(chuàng)建 363
29．3 數(shù)組的獲取 363
29．4 數(shù)組的賦值 364
29．5 獲取數(shù)組長(zhǎng)度 366
29．6 截取數(shù)組某部分 369
29．7 添加數(shù)組元素 371
29．7．1 在數(shù)組開(kāi)頭添加元素：unshift() 371
29．7．2 在數(shù)組結(jié)尾添加元素：push() 372
29．8 刪除數(shù)組元素 374
29．8．1 刪除數(shù)組中第 一個(gè)元素：shift() 374
29．8．2 刪除數(shù)組最后一個(gè)元素：pop() 375
29．9 比較數(shù)組大小 377
29．10 顛倒數(shù)組順序 378
29．11 將數(shù)組元素連接成字符串 379
29．12 實(shí)戰(zhàn)題：數(shù)組與字符串的轉(zhuǎn)換
操作 381
29．13 實(shí)戰(zhàn)題：計(jì)算面積與體積，返回一個(gè)
數(shù)組 382
29．14 本章練習(xí) 383
第30 章 時(shí)間對(duì)象 385
30．1 時(shí)間對(duì)象簡(jiǎn)介 385
30．2 操作年、月、日 387
30．2．1 獲取年、月、日 387
30．2．2 設(shè)置年、月、日 389
30．3 操作時(shí)、分、秒 391
30．3．1 獲取時(shí)、分、秒 391
30．3．2 設(shè)置時(shí)、分、秒 392
30．4 獲取星期幾 393
30．5 本章練習(xí) 395
第31 章 數(shù)學(xué)對(duì)象 396
31．1 數(shù)學(xué)對(duì)象簡(jiǎn)介 396
31．2 Math 對(duì)象的屬性 396
31．3 Math 對(duì)象的方法 398
31．4 最大值與最小值 398
31．5 取整運(yùn)算 399
31．5．1 向下取整：floor() 399
31．5．2 向上取整：ceil() 401
31．6 三角函數(shù) 402
31．7 生成隨機(jī)數(shù) 403
31．7．1 隨機(jī)生成某個(gè)范圍內(nèi)的“任意數(shù)” 404
31．7．2 隨機(jī)生成某個(gè)范圍內(nèi)的“整數(shù)” 404
31．8 實(shí)戰(zhàn)題：生成隨機(jī)驗(yàn)證碼 405
從0 到1 系列圖書(shū) 目錄 7
31．9 實(shí)戰(zhàn)題：生成隨機(jī)顏色值 406
31．10 本章練習(xí) 407
第32 章 DOM 基礎(chǔ) 408
32．1 核心技術(shù)簡(jiǎn)介 408
32．2 DOM 是什么 408
32．2．1 DOM 對(duì)象 408
32．2．2 DOM 結(jié)構(gòu) 409
32．3 節(jié)點(diǎn)類型 410
32．4 獲取元素 411
32．4．1 getElementById() 411
32．4．2 getElementsByTagName() 413
32．4．3 getElementsByClassName() 418
32．4．4 querySelector() 和
querySelectorAll() 419
32．4．5 getElementsByName() 422
32．4．6 document．title 和
document．body 424
32．5 創(chuàng)建元素 424
32．6 插入元素 430
32．6．1 appendChild() 430
32．6．2 insertBefore() 432
32．7 刪除元素 434
32．8 復(fù)制元素 436
32．9 替換元素 438
32．10 本章練習(xí) 439
第33 章 DOM 進(jìn)階 441
33．1 HTML 屬性操作（對(duì)象屬性） 441
33．1．1 獲取HTML 屬性值 441
33．1．2 設(shè)置HTML 屬性值 448
33．2 HTML 屬性操作（對(duì)象方法） 450
33．2．1 getAttribute() 450
33．2．2 setAttribute() 453
33．2．3 removeAttribute() 454
33．2．4 hasAttribute() 456
33．3 CSS 屬性操作 458
33．3．1 獲取CSS 屬性值 458
33．3．2 設(shè)置CSS 屬性值 459
33．3．3 最后一個(gè)問(wèn)題 466
33．4 DOM 遍歷 469
33．4．1 查找父元素 469
33．4．2 查找子元素 471
33．4．3 查找兄弟元素 475
33．5 innerHTML 和innerText 477
33．6 本章練習(xí) 480
第34 章 事件基礎(chǔ) 482
34．1 事件是什么 482
34．2 事件調(diào)用方式 483
34．2．1 在script 標(biāo)簽中調(diào)用 483
34．2．2 在元素中調(diào)用事件 484
34．3 鼠標(biāo)事件 486
34．3．1 鼠標(biāo)單擊 486
34．3．2 鼠標(biāo)移入和鼠標(biāo)移出 488
34．3．3 鼠標(biāo)按下和鼠標(biāo)松開(kāi) 490
34．4 鍵盤(pán)事件 491
34．5 表單事件 493
34．5．1 onfocus 和onblur 493
34．5．2 onselect 496
34．5．3 onchange 498
34．6 編輯事件 501
34．6．1 oncopy 501
34．6．2 onselectstart 502
34．6．3 oncontextmenu 503
34．7 頁(yè)面事件 504
34．7．1 onload 504
34．7．2 onbeforeunload 507
34．8 本章練習(xí) 508
8 從 0 到 1 系列圖書(shū) 目錄
第35 章 事件進(jìn)階 509
35．1 事件監(jiān)聽(tīng)器 509
35．1．1 事件處理器 509
35．1．2 事件監(jiān)聽(tīng)器 510
35．2 event 對(duì)象 518
35．2．1 type 519
35．2．2 keyCode 520
35．3 this 522
35．4 本章練習(xí) 526
第36 章 window 對(duì)象 527
36．1 window 對(duì)象簡(jiǎn)介 527
36．2 窗口操作 528
36．2．1 打開(kāi)窗口 529
36．2．2 關(guān)閉窗口 534
36．3 對(duì)話框 536
36．3．1 alert() 536
36．3．2 confirm() 537
36．3．3 prompt() 538
36．4 定時(shí)器 540
36．4．1 setTimeout() 和
clearTimeout() 541
36．4．2 setInterval() 和clearInterval() 545
36．5 location 對(duì)象 549
36．5．1 window．location．href 550
36．5．2 window．location．search 551
36．5．3 window．location．hash 552
36．6 navigator 對(duì)象 553
36．7 本章練習(xí) 556
第37 章 document 對(duì)象 557
37．1 document 對(duì)象簡(jiǎn)介 557
37．2 document 對(duì)象屬性 557
37．2．1 document．URL 558
37．2．2 document．referrer 559
37．3 document 對(duì)象方法 559
37．3．1 document．write() 560
37．3．2 document．writeln() 561
37．4 本章練習(xí) 563
附錄A HTML 常用標(biāo)簽 564
附錄B CSS 常用屬性 566
附錄C JavaScript 常用方法 568
附錄D 常用的隨機(jī)數(shù) 570