HTML CSS JavaScript基礎(chǔ)教程：Web前端開(kāi)發(fā)精品課

第一部分　HTML基礎(chǔ)
第01章　HTML簡(jiǎn)介
1．1　前端技術(shù)簡(jiǎn)介 \t2
1．1．1　從“網(wǎng)頁(yè)制作”到“前端開(kāi)發(fā)” \t2
1．1．2　從“前端開(kāi)發(fā)”到“后端開(kāi)發(fā)” \t3
1．1．3　學(xué)習(xí)路線(xiàn) \t5
1．2　什么是HTML \t5
1．3　教程介紹 \t6
1．3．1　教程簡(jiǎn)介 \t6
1．3．2　初學(xué)者比較關(guān)心的問(wèn)題\t7
第02章　開(kāi)發(fā)工具
2．1　開(kāi)發(fā)工具 \t8
2．2　使用Hbuilder \t9
第03章　基本標(biāo)簽
3．1　HTML結(jié)構(gòu) \t11
3．2　head標(biāo)簽 \t12
3．2．1　title標(biāo)簽 \t13
3．2．2　meta標(biāo)簽 \t13
3．2．3　style標(biāo)簽 \t15
3．2．4　script標(biāo)簽 \t15
3．2．5　link標(biāo)簽 \t16
3．2．6　base標(biāo)簽 \t16
3．3　body標(biāo)簽 \t16
3．4　HTML注釋 \t17
3．5　練習(xí)題 \t18
第04章　文本
4．1　文本簡(jiǎn)介 \t19
4．1．1　頁(yè)面組成元素 \t19
4．1．2　HTML文本 \t20
4．2　標(biāo)題標(biāo)簽 \t21
4．3　段落標(biāo)簽 \t22
4．3．1　段落標(biāo)簽： \t22
4．3．2　換行標(biāo)簽：
\t23
4．4　文本標(biāo)簽 \t25
4．4．1　粗體標(biāo)簽 \t25
4．4．2　斜體標(biāo)簽 \t26
4．4．3　上標(biāo)標(biāo)簽 \t26
4．4．4　下標(biāo)標(biāo)簽 \t27
4．4．5　中劃線(xiàn)標(biāo)簽 \t27
4．4．6　下劃線(xiàn)標(biāo)簽 \t28
4．4．7　大字號(hào)標(biāo)簽和小字號(hào)標(biāo)簽 \t28
4．5　水平線(xiàn)標(biāo)簽 \t29
4．6　div標(biāo)簽 \t30
4．7　自閉合標(biāo)簽 \t31
4．8　塊元素和行內(nèi)元素 \t32
4．8．1　塊元素 \t33
4．8．2　行內(nèi)元素 \t34
4．9　特殊符號(hào) \t35
4．9．1　網(wǎng)頁(yè)中的“空格” \t35
4．9．2　網(wǎng)頁(yè)中的“特殊符號(hào)” \t36
4．10　練習(xí)題 \t38
第05章　列表
5．1　列表簡(jiǎn)介 \t39
5．2　有序列表 \t40
5．2．1　有序列表簡(jiǎn)介 \t40
5．2．2　type屬性 \t41
5．3　無(wú)序列表 \t42
5．3．1　無(wú)序列表簡(jiǎn)介 \t42
5．3．2　type屬性 \t43
5．3．3　深入無(wú)序列表 \t44
5．4　定義列表 \t46
5．5　HTML語(yǔ)義化 \t47
5．6　練習(xí)題 \t48
第06章　表格
6．1　表格簡(jiǎn)介 \t49
6．2　基本結(jié)構(gòu) \t49
6．3　完整結(jié)構(gòu) \t51
6．3．1　表格標(biāo)題：caption \t51
6．3．2　表頭單元格：th \t52
6．4　語(yǔ)義化 \t54
6．5　合并行：rowspan \t56
6．6　合并列：colspan \t57
6．7　練習(xí)題 \t58
第07章　圖片
7．1　圖片標(biāo)簽 \t59
7．1．1　src屬性 \t59
7．1．2　alt屬性和title屬性 \t60
7．2　圖片路徑 \t62
7．2．1　page1．html引用圖片 \t62
7．2．2　page2．html引用圖片 \t63
7．3　圖片格式 \t64
7．3．1　位圖 \t64
7．3．2　矢量圖 \t66
7．4　練習(xí)題 \t67
第08章　超鏈接
8．1　超鏈接簡(jiǎn)介 \t68
8．1．1　a標(biāo)簽 \t69
8．1．2　target屬性 \t70
8．2　內(nèi)部鏈接 \t70
8．3　錨點(diǎn)鏈接 \t72
8．4　練習(xí)題 \t74
第09章　表單
9．1　表單簡(jiǎn)介 \t75
9．1．1　表單是什么\t75
9．1．2　表單標(biāo)簽 \t76
9．2　form標(biāo)簽 \t76
9．2．1　form標(biāo)簽簡(jiǎn)介 \t76
9．2．2　form標(biāo)簽屬性 \t77
9．3　input標(biāo)簽 \t78
9．4　單行文本框 \t79
9．4．1　單行文本框簡(jiǎn)介 \t79
9．4．2　單行文本框?qū)傩?\t79
9．5　密碼文本框 \t81
9．5．1　密碼文本框簡(jiǎn)介 \t81
9．5．2　密碼文本框?qū)傩?\t82
9．6　單選框 \t83
9．6．1　單選框簡(jiǎn)介 \t83
9．6．2　忽略點(diǎn) \t84
9．7　復(fù)選框 \t86
9．8　按鈕 \t87
9．8．1　普通按鈕button \t88
9．8．2　提交按鈕submit \t89
9．8．3　重置按鈕reset \t89
9．8．4　button標(biāo)簽 \t91
9．9　文件上傳 \t91
9．10　多行文本框 \t92
9．11　下拉列表 \t93
9．11．1　下拉列表簡(jiǎn)介 \t93
9．11．2　select標(biāo)簽屬性 \t94
9．11．3　option標(biāo)簽屬性 \t95
9．12　練習(xí)題 \t97
第10章 　框架
10．1　iframe標(biāo)簽 \t99
10．2　練習(xí)題 \t100
第二部分　CSS基礎(chǔ)
第11章　CSS簡(jiǎn)介
11．1　CSS簡(jiǎn)介 \t102
11．1．1　CSS是什么 \t102
11．1．2　CSS和CSS3 \t102
11．2　教程簡(jiǎn)介 \t103
11．3　CSS引入方式 \t103
11．3．1　外部樣式表 \t103
11．3．2　內(nèi)部樣式表 \t104
11．3．3　行內(nèi)樣式表 \t105
11．4　練習(xí)題 \t106
第12章　CSS選擇器
12．1　元素的id和class \t107
12．1．1　id屬性 \t107
12．1．2　class屬性 \t108
12．2　選擇器是什么 \t108
12．3　CSS選擇器 \t109
12．3．1　元素選擇器 \t110
12．3．2　id選擇器 \t110
12．3．3　class選擇器 \t111
12．3．4　后代選擇器 \t113
12．3．5　群組選擇器 \t114
12．4　練習(xí)題 \t116
第13章　字體樣式
13．1　字體樣式簡(jiǎn)介 \t118
13．2　字體類(lèi)型（font-family）\t119
13．3　字體大?。╢ont-size）\t120
13．3．1　px是什么 \t120
13．3．2　采用px為單位 \t121
13．4　字體粗細(xì)（font-weight）\t122
13．5　字體風(fēng)格（font-style）\t123
13．6　字體顏色（color）\t125
13．6．1　關(guān)鍵字 \t125
13．6．2　16進(jìn)制RGB值 \t125
13．7　CSS注釋 \t126
13．8　練習(xí)題 \t128
第14章　文本樣式
14．1　文本樣式簡(jiǎn)介 \t129
14．2　首行縮進(jìn)（text-indent）\t129
14．3　水平對(duì)齊（text-align）\t130
14．4　文本修飾（text-decoration）\t131
14．4．1　text-decoration屬性 \t131
14．4．2　三種劃線(xiàn)的用途分析 \t133
14．5　大小寫(xiě)（text-transform）\t134
14．6　行高（line-height）\t135
14．7　間距（letter-spacing和word-spacing）\t136
14．7．1　字間距 \t136
14．7．2　詞間距 \t136
14．8　練習(xí)題 \t137
第15章　邊框樣式
15．1　邊框樣式簡(jiǎn)介 \t139
15．2　整體樣式 \t140
15．2．1　邊框?qū)傩?\t140
15．2．2　簡(jiǎn)寫(xiě)形式 \t142
15．3　局部樣式 \t142
15．4　練習(xí)題 \t145
第16章　列表樣式
16．1　列表項(xiàng)符號(hào)（list-style-type）\t146
16．1．1　定義列表項(xiàng)符號(hào) \t146
16．1．2　去除列表項(xiàng)符號(hào) \t148
16．2　列表項(xiàng)圖片（list-style-image）\t149
16．3　練習(xí)題 \t150
第17章　表格樣式
17．1　表格標(biāo)題位置（caption-side）\t151
17．2　表格邊框合并（border-collapse）\t152
17．3　表格邊框間距（border-spacing）\t154
17．4　練習(xí)題 \t155
第18章　圖片樣式
18．1　圖片大小 \t156
18．2　圖片邊框 \t157
18．3　圖片對(duì)齊 \t158
18．3．1　水平對(duì)齊 \t158
18．3．2　垂直對(duì)齊 \t159
18．4　文字環(huán)繞——初識(shí)float \t162
18．5　練習(xí)題 \t163
第19章　背景樣式
19．1　背景樣式簡(jiǎn)介 \t164
19．2　背景顏色（background-color）\t164
19．3　背景圖片樣式（background-image）\t166
19．4　背景圖片重復(fù)（background-repeat）\t167
19．5　背景圖片位置（background-position）\t169
19．5．1　像素值 \t169
19．5．2　關(guān)鍵字 \t170
19．6　背景圖片固定（background-attachment）\t172
19．7　練習(xí)題 \t173
第20章　超鏈接樣式
20．1　超鏈接偽類(lèi) \t174
20．1．1　超鏈接偽類(lèi)簡(jiǎn)介 \t174
20．1．2　深入了解超鏈接偽類(lèi) \t175
20．2　深入了解：hover \t177
20．3　鼠標(biāo)樣式 \t178
20．3．1　瀏覽器鼠標(biāo)樣式 \t178
20．3．2　自定義鼠標(biāo)樣式 \t180
20．4　練習(xí)題 \t181
第21章　盒子模型
21．1　CSS盒子模型 \t182
21．2　寬和高（width和height）\t184
21．3　邊框（border）\t187
21．4　內(nèi)邊距（padding）\t188
21．4．1　padding局部樣式 \t188
21．4．2　padding簡(jiǎn)寫(xiě)形式 \t189
21．5　外邊距（margin）\t191
21．5．1　margin局部樣式\t191
21．5．2　margin簡(jiǎn)寫(xiě)形式 \t194
21．5．3　瀏覽器審查元素 \t195
21．6　練習(xí)題 \t196
第22章　浮動(dòng)布局
22．1　文檔流簡(jiǎn)介 \t197
22．1．1　正常文檔流 \t197
22．1．2　脫離文檔流 \t198
22．2　浮動(dòng) \t200
22．3　清除浮動(dòng) \t202
22．4　練習(xí)題 \t204
第23章　定位布局
23．1　定位布局簡(jiǎn)介 \t205
23．2　固定定位：fixed \t206
23．3　相對(duì)定位：relative \t207
23．4　絕對(duì)定位：absolute \t209
23．5　靜態(tài)定位：static \t211
23．6　練習(xí)題 \t211
第三部分　JavaScript基礎(chǔ)
第24章　JavaScript簡(jiǎn)介
24．1　JavaScript是什么\t214
24．1．1　JavaScript簡(jiǎn)介 \t214
24．1．2　教程介紹 \t215
24．2　JavaScript開(kāi)發(fā)工具 \t216
24．3　JavaScript引入方式 \t217
24．3．1　外部JavaScript \t218
24．3．2　內(nèi)部JavaScript \t219
24．3．3　元素屬性JavaScript \t220
24．4　一個(gè)簡(jiǎn)單的JavaScript程序 \t221
24．5　練習(xí)題 \t222
第25章　語(yǔ)法基礎(chǔ)
25．1　語(yǔ)法簡(jiǎn)介 \t223
25．2　變量與常量 \t224
25．2．1　變量 \t225
25．2．2　常量 \t229
25．3　數(shù)據(jù)類(lèi)型 \t229
25．3．1　數(shù)字 \t229
25．3．2　字符串 \t230
25．3．3　布爾值 \t232
25．3．4　未定義值 \t233
25．3．5　空值 \t234
25．4　運(yùn)算符 \t234
25．4．1　算術(shù)運(yùn)算符 \t235
25．4．2　賦值運(yùn)算符 \t239
25．4．3　比較運(yùn)算符 \t240
25．4．4　邏輯運(yùn)算符 \t241
25．4．5　條件運(yùn)算符 \t244
25．5　表達(dá)式與語(yǔ)句 \t245
25．6　類(lèi)型轉(zhuǎn)換 \t245
25．6．1　“字符串”轉(zhuǎn)換為“數(shù)字” \t245
25．6．2　“數(shù)字”轉(zhuǎn)換為“字符串” \t248
25．7　轉(zhuǎn)義字符 \t249
25．8　注釋 \t251
25．8．1　單行注釋 \t251
25．8．2　多行注釋 \t252
25．9　練習(xí)題 \t253
第26章　流程控制
26．1　流程控制簡(jiǎn)介 \t255
26．1．1　順序結(jié)構(gòu) \t255
26．1．2　選擇結(jié)構(gòu) \t256
26．1．3　循環(huán)結(jié)構(gòu) \t257
26．2　選擇結(jié)構(gòu)：if \t257
26．2．1　單向選擇：if… \t257
26．2．2　雙向選擇：if…else… \t259
26．2．3　多向選擇：if…else if…else… \t260
26．2．4　if語(yǔ)句的嵌套 \t262
26．3　選擇結(jié)構(gòu)：switch \t264
26．4　循環(huán)結(jié)構(gòu)：while \t267
26．5　循環(huán)結(jié)構(gòu)：do…while \t270
26．6　循環(huán)結(jié)構(gòu)：for \t271
26．7　判斷整數(shù)或小數(shù) \t274
26．8　找出“水仙花數(shù)” \t275
26．9　練習(xí)題 \t276
第27章　初識(shí)函數(shù)
27．1　函數(shù)是什么？ \t278
27．2　函數(shù)的定義 \t280
27．2．1　沒(méi)有返回值的函數(shù) \t280
27．2．2　有返回值的函數(shù) \t282
27．2．3　全局變量與局部變量 \t283
27．3　函數(shù)的調(diào)用 \t285
27．3．1　直接調(diào)用 \t286
27．3．2　在表達(dá)式中調(diào)用 \t286
27．3．3　在超鏈接中調(diào)用 \t287
27．3．4　在事件中調(diào)用 \t288
27．4　嵌套函數(shù) \t289
27．5　內(nèi)置函數(shù) \t290
27．6　判斷某一年是否閏年 \t291
27．7　求出任意五個(gè)數(shù)最大值 \t292
27．8　練習(xí)題 \t292
第28章　字符串對(duì)象
28．1　內(nèi)置對(duì)象簡(jiǎn)介 \t294
28．2　獲取字符串長(zhǎng)度 \t295
28．3　大小寫(xiě)轉(zhuǎn)換 \t296
28．4　獲取某一個(gè)字符 \t297
28．5　截取字符串 \t298
28．6　替換字符串 \t300
28．7　分割字符串 \t302
28．8　檢索字符串的位置 \t304
28．9　統(tǒng)計(jì)某一個(gè)字符的個(gè)數(shù) \t306
28．10　統(tǒng)計(jì)字符串中有多少個(gè)數(shù)字\t307
28．11　練習(xí)題 \t308
第29章　數(shù)組對(duì)象
29．1　數(shù)組是什么 \t309
29．2　數(shù)組的創(chuàng)建 \t310
29．3　數(shù)組的獲取 \t310
29．4　數(shù)組的賦值 \t311
29．5　獲取數(shù)組長(zhǎng)度 \t312
29．6　截取數(shù)組某部分 \t315
29．7　為數(shù)組添加元素 \t316
29．7．1　在數(shù)組開(kāi)頭添加元素：unshift() \t316
29．7．2　在數(shù)組結(jié)尾添加元素：push() \t318
29．8　刪除數(shù)組元素 \t319
29．8．1　刪除數(shù)組中第一個(gè)元素：shift() \t319
29．8．2　刪除數(shù)組最后一個(gè)元素：pop() \t320
29．9　數(shù)組大小比較 ：sort()\t322
29．10　數(shù)組顛倒順序：reverse()\t323
29．11　將數(shù)組元素連接成字符串：join()\t323
29．12　數(shù)組與字符串的轉(zhuǎn)換操作 \t326
29．13　計(jì)算面積與體積，返回一個(gè)數(shù)組 \t326
29．14　練習(xí)題 \t327
第30章　時(shí)間對(duì)象
30．1　日期對(duì)象簡(jiǎn)介 \t329
30．2　操作年、月、日 \t331
30．2．1　獲取年、月、日 \t331
30．2．2　設(shè)置年、月、日 \t333
30．3　操作時(shí)、分、秒 \t334
30．3．1　獲取時(shí)、分、秒 \t334
30．3．2　設(shè)置時(shí)、分、秒 \t335
30．4　獲取星期幾 \t336
30．5　練習(xí)題 \t338
第31章　數(shù)學(xué)對(duì)象
31．1　數(shù)學(xué)對(duì)象簡(jiǎn)介 \t339
31．2　Math對(duì)象的屬性 \t339
31．3　Math對(duì)象的方法 \t341
31．4　最大值與最小值 \t341
31．5　取整運(yùn)算 \t342
31．5．1　向下取整：floor() \t342
31．5．2　向上取整：ceil() \t343
31．6　三角函數(shù) \t344
31．7　生成隨機(jī)數(shù) \t346
31．7．1　隨機(jī)生成某個(gè)范圍內(nèi)的“任意數(shù)” \t346
31．7．2　隨機(jī)數(shù)生成某個(gè)范圍內(nèi)的“整數(shù)” \t347
31．8　生成隨機(jī)驗(yàn)證碼 \t347
31．9　生成隨機(jī)顏色值 \t348
31．10　練習(xí)題 \t349
第32章　DOM基礎(chǔ)
32．1　核心技術(shù)簡(jiǎn)介 \t350
32．2　DOM是什么 \t351
32．2．1　DOM對(duì)象 \t351
32．2．2　DOM結(jié)構(gòu) \t351
32．3　節(jié)點(diǎn)類(lèi)型 \t352
32．4　獲取元素 \t353
32．4．1　getElementById() \t353
32．4．2　getElementsByTagName \t355
32．4．3　getElementsByClassName() \t359
32．4．4　querySelector()和querySelectorAll() \t360
32．4．5　getElementsByName() \t363
32．4．6　document．title和document．body \t364
32．5　創(chuàng)建元素 \t365
32．6　插入元素 \t370
32．6．1　appendChild() \t370
32．6．2　insertBefore() \t372
32．7　刪除元素 \t373
32．8　復(fù)制元素 \t376
32．9　替換元素 \t377
32．10　練習(xí)題 \t378
第33章　DOM進(jìn)階
33．1　HTML屬性操作（對(duì)象屬性） \t380
33．1．1　獲取HTML屬性值 \t380
33．1．2　設(shè)置HTML屬性值 \t386
33．2　HTML屬性操作（對(duì)象方法） \t388
33．2．1　getAttribute() \t388
33．2．2　setAttribute() \t390
33．2．3　removeAttribute() \t391
33．2．4　hasAttribute() \t393
33．3　CSS屬性操作 \t394
33．3．1　獲取CSS屬性值 \t394
33．3．2　設(shè)置CSS屬性值 \t396
33．3．3　最后一個(gè)問(wèn)題 \t401
33．4　DOM遍歷 \t404
33．4．1　查找父元素 \t404
33．4．2　查找子元素 \t406
33．4．3　查找兄弟元素 \t410
33．5　innerHTML和innerText \t411
33．6　練習(xí)題 \t414
第34章　 事件基礎(chǔ)
34．1　事件是什么 \t415
34．2　事件調(diào)用方式 \t416
34．2．1　在script標(biāo)簽中調(diào)用 \t416
34．2．2　在元素中調(diào)用事件 \t417
34．3　鼠標(biāo)事件 \t418
34．3．1　鼠標(biāo)單擊 \t419
34．3．2　鼠標(biāo)移入和鼠標(biāo)移出 \t421
34．3．3　鼠標(biāo)按下和鼠標(biāo)松開(kāi) \t422
34．4　鍵盤(pán)事件 \t423
34．5　表單事件 \t425
34．5．1　onfocus和onblur \t425
34．5．2　onselect \t427
34．5．3　onchange \t429
34．6　編輯事件 \t432
34．6．1　oncopy \t432
34．6．2　onselectstart \t433
34．6．3　oncontextmenu \t434
34．7　頁(yè)面事件 \t435
34．7．1　onload \t435
34．7．2　onbeforeunload \t437
34．8　練習(xí)題 \t438
第35章　事件進(jìn)階
35．1　事件監(jiān)聽(tīng)器 \t439
35．1．1　事件處理器 \t439
35．1．2　事件監(jiān)聽(tīng)器 \t440
35．2　event對(duì)象 \t447
35．2．1　type \t448
35．2．2　keyCode \t448
35．3　this \t451
35．4　練習(xí)題 \t454
第36章　window對(duì)象
36．1　window對(duì)象簡(jiǎn)介 \t455
36．2　窗口操作 \t457
36．2．1　打開(kāi)窗口 \t457
36．2．2　關(guān)閉窗口 \t462
36．3　對(duì)話(huà)框 \t464
36．3．1　alert() \t464
36．3．2　confirm() \t465
36．3．3　prompt() \t466
36．4　定時(shí)器 \t467
36．4．1　setTimeout()和clearTimeout() \t468
36．4．2　setInterval()和clearInterval() \t472
36．5　location對(duì)象 \t476
36．5．1　window．location．href \t476
36．5．2　window．location．search \t477
13．5．3　window．location．hash \t478
36．6　navigator對(duì)象 \t479
36．7　練習(xí)題 \t481
第37章　document對(duì)象
37．1　document對(duì)象簡(jiǎn)介 \t482
37．2　document對(duì)象屬性 \t482
37．2．1　document．URL \t483
37．2．2　document．referrer \t484
37．3　document對(duì)象方法 \t484
37．3．1　document．write() \t485
37．3．2　document．writeln() \t485
37．4　練習(xí)題 \t487
后記