Web前端開發精品課：HTML CSS JavaScript基礎教程

第一部分　HTML基礎
第01章　HTML簡介
1.1　前端技術簡介 2
1.1.1　從「網頁制作」到「前端開發」 2
1.1.2　從「前端開發」到「后端開發」 3
1.1.3　學習路線 5
1.2　什麼是HTML 5
1.3　教程介紹 6
1.3.1　教程簡介 6
1.3.2　初學者比較關心的問題 7
第02章　開發工具
2.1　開發工具 8
2.2　使用Hbuilder 9
第03章　基本標簽
3.1　HTML結構 11
3.2　head標簽 12
3.2.1　title標簽 13
3.2.2　meta標簽 13
3.2.3　style標簽 15
3.2.4　script標簽 15
3.2.5　link標簽 16
3.2.6　base標簽 16
3.3　body標簽 16
3.4　HTML注釋 17
3.5　練習題 18
第04章　文本
4.1　文本簡介 19
4.1.1　頁面組成元素 19
4.1.2　HTML文本 20
4.2　標題標簽 21
4.3　段落標簽 22
4.3.1　段落標簽：22
4.3.2　換行標簽：23
4.4　文本標簽 25
4.4.1　粗體標簽 25
4.4.2　斜體標簽 26
4.4.3　上標標簽 26
4.4.4　下標標簽 27
4.4.5　中划線標簽 27
4.4.6　下划線標簽 28
4.4.7　大字號標簽和小字號標簽 28
4.5　水平線標簽 29
4.6　div標簽 30
4.7　自閉合標簽 31
4.8　塊元素和行內元素 32
4.8.1　塊元素 33
4.8.2　行內元素 34
4.9　特殊符號 35
4.9.1　網頁中的「空格」 35
4.9.2　網頁中的「特殊符號」 36
4.10　練習題 38
第05章　列表
5.1　列表簡介 39
5.2　有序列表 40
5.2.1　有序列表簡介 40
5.2.2　type屬性 41
5.3　無序列表 42
5.3.1　無序列表簡介 42
5.3.2　type屬性 43
5.3.3　深入無序列表 44
5.4　定義列表 46
5.5　HTML語義化 47
5.6　練習題 48
第06章　表格
6.1　表格簡介 49
6.2　基本結構 49
6.3　完整結構 51
6.3.1　表格標題：caption 51
6.3.2　表頭單元格：th 52
6.4　語義化 54
6.5　合並行：rowspan 56
6.6　合並列：colspan 57
6.7　練習題 58
第07章　圖片
7.1　圖片標簽 59
7.1.1　src屬性 59
7.1.2　alt屬性和title屬性 60
7.2　圖片路徑 62
7.2.1　page1.html引用圖片 62
7.2.2　page2.html引用圖片 63
7.3　圖片格式 64
7.3.1　位圖 64
7.3.2　矢量圖 66
7.4　練習題 67
第08章　超鏈接
8.1　超鏈接簡介 68
8.1.1　a標簽 69
8.1.2　target屬性 70
8.2　內部鏈接 70
8.3　錨點鏈接 72
8.4　練習題 74
第09章　表單
9.1　表單簡介 75
9.1.1　表單是什麼 75
9.1.2　表單標簽 76
9.2　form標簽 76
9.2.1　form標簽簡介 76
9.2.2　form標簽屬性 77
9.3　input標簽 78
9.4　單行文本框 79
9.4.1　單行文本框簡介 79
9.4.2　單行文本框屬性 79
9.5　密碼文本框 81
9.5.1　密碼文本框簡介 81
9.5.2　密碼文本框屬性 82
9.6　單選框 83
9.6.1　單選框簡介 83
9.6.2　忽略點 84
9.7　復選框 86
9.8　按鈕 87
9.8.1　普通按鈕button 88
9.8.2　提交按鈕submit 89
9.8.3　重置按鈕reset 89
9.8.4　button標簽 91
9.9　文件上傳 91
9.10　多行文本框 92
9.11　下拉列表 93
9.11.1　下拉列表簡介 93
9.11.2　select標簽屬性 94
9.11.3　option標簽屬性 95
9.12　練習題 97
第10章 　框架
10.1　iframe標簽 99
10.2　練習題 100

第二部分　CSS基礎
第11章　CSS簡介
11.1　CSS簡介 102
11.1.1　CSS是什麼 102
11.1.2　CSS和CSS3 102
11.2　教程簡介 103
11.3　CSS引入方式 103
11.3.1　外部樣式表 103
11.3.2　內部樣式表 104
11.3.3　行內樣式表 105
11.4　練習題 106
第12章　CSS選擇器
12.1　元素的id和class 107
12.1.1　id屬性 107
12.1.2　class屬性 108
12.2　選擇器是什麼 108
12.3　CSS選擇器 109
12.3.1　元素選擇器 110
12.3.2　id選擇器 110
12.3.3　class選擇器 111
12.3.4　后代選擇器 113
12.3.5　群組選擇器 114
12.4　練習題 116
第13章　字體樣式
13.1　字體樣式簡介 118
13.2　字體類型（font-family） 119
13.3　字體大小（font-size） 120
13.3.1　px是什麼 120
13.3.2　采用px為單位 121
13.4　字體粗細（font-weight） 122
13.5　字體風格（font-style） 123
13.6　字體顏色（color） 125
13.6.1　關鍵字 125
13.6.2　16進制RGB值 125
13.7　CSS注釋 126
13.8　練習題 128
第14章　文本樣式
14.1　文本樣式簡介 129
14.2　首行縮進（text-indent） 129
14.3　水平對齊（text-align） 130
14.4　文本修飾（text-decoration） 131
14.4.1　text-decoration屬性 131
14.4.2　三種划線的用途分析 133
14.5　大小寫（text-transform） 134
14.6　行高（line-height） 135
14.7　間距（letter-spacing和word-spacing） 136
14.7.1　字間距 136
14.7.2　詞間距 136
14.8　練習題 137
第15章　邊框樣式
15.1　邊框樣式簡介 139
15.2　整體樣式 140
15.2.1　邊框屬性 140
15.2.2　簡寫形式 142
15.3　局部樣式 142
15.4　練習題 145
第16章　列表樣式
16.1　列表項符號（list-style-type） 146
16.1.1　定義列表項符號 146
16.1.2　去除列表項符號 148
16.2　列表項圖片（list-style-image） 149
16.3　練習題 150
第17章　表格樣式
17.1　表格標題位置（caption-side） 151
17.2　表格邊框合並（border-collapse） 152
17.3　表格邊框間距（border-spacing） 154
17.4　練習題 155
第18章　圖片樣式
18.1　圖片大小 156
18.2　圖片邊框 157
18.3　圖片對齊 158
18.3.1　水平對齊 158
18.3.2　垂直對齊 159
18.4　文字環繞——初識float 162
18.5　練習題 163
第19章　背景樣式
19.1　背景樣式簡介 164
19.2　背景顏色（background-color） 164
19.3　背景圖片樣式（background-image） 166
19.4　背景圖片重復（background-repeat） 167
19.5　背景圖片位置（background-position） 169
19.5.1　像素值 169
19.5.2　關鍵字 170
19.6　背景圖片固定（background-attachment） 172
19.7　練習題 173
第20章　超鏈接樣式
20.1　超鏈接偽類 174
20.1.1　超鏈接偽類簡介 174
20.1.2　深入了解超鏈接偽類 175
20.2　深入了解:hover 177
20.3　鼠標樣式 178
20.3.1　瀏覽器鼠標樣式 178
20.3.2　自定義鼠標樣式 180
20.4　練習題 181
第21章　盒子模型
21.1　CSS盒子模型 182
21.2　寬和高（width和height） 184
21.3　邊框（border） 187
21.4　內邊距（padding） 188
21.4.1　padding局部樣式 188
21.4.2　padding簡寫形式 189
21.5　外邊距（margin） 191
21.5.1　margin局部樣式 191
21.5.2　margin簡寫形式 194
21.5.3　瀏覽器審查元素 195
21.6　練習題 196
第22章　浮動布局
22.1　文檔流簡介 197
22.1.1　正常文檔流 197
22.1.2　脫離文檔流 198
22.2　浮動 200
22.3　清除浮動 202
22.4　練習題 204
第23章　定位布局
23.1　定位布局簡介 205
23.2　固定定位：fixed 206
23.3　相對定位：relative 207
23.4　絕對定位：absolute 209
23.5　靜態定位：static 211
23.6　練習題 211

第三部分　JavaScript基礎
第24章　JavaScript簡介
24.1　JavaScript是什麼 214
24.1.1　JavaScript簡介 214
24.1.2　教程介紹 215
24.2　JavaScript開發工具 216
24.3　JavaScript引入方式 217
24.3.1　外部JavaScript 218
24.3.2　內部JavaScript 219
24.3.3　元素屬性JavaScript 220
24.4　一個簡單的JavaScript程序 221
24.5　練習題 222

第25章　語法基礎
25.1　語法簡介 223
25.2　變量與常量 224
25.2.1　變量 225
25.2.2　常量 229
25.3　數據類型 229
25.3.1　數字 229
25.3.2　字符串 230
25.3.3　布爾值 232
25.3.4　未定義值 233
25.3.5　空值 234
25.4　運算符 234
25.4.1　算術運算符 235
25.4.2　賦值運算符 239
25.4.3　比較運算符 240
25.4.4　邏輯運算符 241
25.4.5　條件運算符 244
25.5　表達式與語句 245
25.6　類型轉換 245
25.6.1　「字符串」轉換為「數字」 245
25.6.2　「數字」轉換為「字符串」 248
25.7　轉義字符 249
25.8　注釋 251
25.8.1　單行注釋 251
25.8.2　多行注釋 252
25.9　練習題 253

第26章　流程控制
26.1　流程控制簡介 255
26.1.1　順序結構 255
26.1.2　選擇結構 256
26.1.3　循環結構 257
26.2　選擇結構：if 257
26.2.1　單向選擇：if… 257
26.2.2　雙向選擇：if…else… 259
26.2.3　多向選擇：if…else if…else… 260
26.2.4　if語句的嵌套 262
26.3　選擇結構：switch 264
26.4　循環結構：while 267
26.5　循環結構：do…while 270
26.6　循環結構：for 271
26.7　判斷整數或小數 274
26.8　找出「水仙花數」 275
26.9　練習題 276

第27章　初識函數
27.1　函數是什麼？ 278
27.2　函數的定義 280
27.2.1　沒有返回值的函數 280
27.2.2　有返回值的函數 282
27.2.3　全局變量與局部變量 283
27.3　函數的調用 285
27.3.1　直接調用 286
27.3.2　在表達式中調用 286
27.3.3　在超鏈接中調用 287
27.3.4　在事件中調用 288
27.4　嵌套函數 289
27.5　內置函數 290
27.6　判斷某一年是否閏年 291
27.7　求出任意五個數最大值 292
27.8　練習題 292

第28章　字符串對象
28.1　內置對象簡介 294
28.2　獲取字符串長度 295
28.3　大小寫轉換 296
28.4　獲取某一個字符 297
28.5　截取字符串 298
28.6　替換字符串 300
28.7　分割字符串 302
28.8　檢索字符串的位置 304
28.9　統計某一個字符的個數 306
28.10　統計字符串中有多少個數字 307
28.11　練習題 308

第29章　數組對象
29.1　數組是什麼 309
29.2　數組的創建 310
29.3　數組的獲取 310
29.4　數組的賦值 311
29.5　獲取數組長度 312
29.6　截取數組某部分 315
29.7　為數組添加元素 316
29.7.1　在數組開頭添加元素：unshift() 316
29.7.2　在數組結尾添加元素：push() 318
29.8　刪除數組元素 319
29.8.1　刪除數組中第一個元素：shift() 319
29.8.2　刪除數組最后一個元素：pop() 320
29.9　數組大小比較 ：sort() 322
29.10　數組顛倒順序：reverse() 323
29.11　將數組元素連接成字符串：join() 323
29.12　數組與字符串的轉換操作 326
29.13　計算面積與體積，返回一個數組 326
29.14　練習題 327

第30章　時間對象
30.1　日期對象簡介 329
30.2　操作年、月、日 331
30.2.1　獲取年、月、日 331
30.2.2　設置年、月、日 333
30.3　操作時、分、秒 334
30.3.1　獲取時、分、秒 334
30.3.2　設置時、分、秒 335
30.4　獲取星期幾 336
30.5　練習題 338

第31章　數學對象
31.1　數學對象簡介 339
31.2　Math對象的屬性 339
31.3　Math對象的方法 341
31.4　最大值與最小值 341
31.5　取整運算 342
31.5.1　向下取整：floor() 342
31.5.2　向上取整：ceil() 343
31.6　三角函數 344
31.7　生成隨機數 346
31.7.1　隨機生成某個范圍內的「任意數」 346
31.7.2　隨機數生成某個范圍內的「整數」 347
31.8　生成隨機驗證碼 347
31.9　生成隨機顏色值 348
31.10　練習題 349

第32章　DOM基礎
32.1　核心技術簡介 350
32.2　DOM是什麼 351
32.2.1　DOM對象 351
32.2.2　DOM結構 351
32.3　節點類型 352
32.4　獲取元素 353
32.4.1　getElementById() 353
32.4.2　getElementsByTagName 355
32.4.3　getElementsByClassName() 359
32.4.4　querySelector()和querySelectorAll() 360
32.4.5　getElementsByName() 363
32.4.6　document.title和document.body 364
32.5　創建元素 365
32.6　插入元素 370
32.6.1　appendChild() 370
32.6.2　insertBefore() 372
32.7　刪除元素 373
32.8　復制元素 376
32.9　替換元素 377
32.10　練習題 378

第33章　DOM進階
33.1　HTML屬性操作（對象屬性） 380
33.1.1　獲取HTML屬性值 380
33.1.2　設置HTML屬性值 386
33.2　HTML屬性操作（對象方法） 388
33.2.1　getAttribute() 388
33.2.2　setAttribute() 390
33.2.3　removeAttribute() 391
33.2.4　hasAttribute() 393
33.3　CSS屬性操作 394
33.3.1　獲取CSS屬性值 394
33.3.2　設置CSS屬性值 396
33.3.3　最后一個問題 401
33.4　DOM遍歷 404
33.4.1　查找父元素 404
33.4.2　查找子元素 406
33.4.3　查找兄弟元素 410
33.5　innerHTML和innerText 411
33.6　練習題 414

第34章　 事件基礎
34.1　事件是什麼 415
34.2　事件調用方式 416
34.2.1　在script標簽中調用 416
34.2.2　在元素中調用事件 417
34.3　鼠標事件 418
34.3.1　鼠標單擊 419
34.3.2　鼠標移入和鼠標移出 421
34.3.3　鼠標按下和鼠標松開 422
34.4　鍵盤事件 423
34.5　表單事件 425
34.5.1　onfocus和onblur 425
34.5.2　onselect 427
34.5.3　onchange 429
34.6　編輯事件 432
34.6.1　oncopy 432
34.6.2　onselectstart 433
34.6.3　oncontextmenu 434
34.7　頁面事件 435
34.7.1　onload 435
34.7.2　onbeforeunload 437
34.8　練習題 438

第35章　事件進階
35.1　事件監聽器 439
35.1.1　事件處理器 439
35.1.2　事件監聽器 440
35.2　event對象 447
35.2.1　type 448
35.2.2　keyCode 448
35.3　this 451
35.4　練習題 454

第36章　window對象
36.1　window對象簡介 455
36.2　窗口操作 457
36.2.1　打開窗口 457
36.2.2　關閉窗口 462
36.3　對話框 464
36.3.1　alert() 464
36.3.2　confirm() 465
36.3.3　prompt() 466
36.4　定時器 467
36.4.1　setTimeout()和clearTimeout() 468
36.4.2　setInterval()和clearInterval() 472
36.5　location對象 476
36.5.1　window.location.href 476
36.5.2　window.location.search 477
13.5.3　window.location.hash 478
36.6　navigator對象 479
36.7　練習題 481

第37章　document對象
37.1　document對象簡介 482
37.2　document對象屬性 482
37.2.1　document.URL 483
37.2.2　document.referrer 484
37.3　document對象方法 484
37.3.1　document.write() 485
37.3.2　document.writeln() 485
37.4　練習題 487
后記