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

第一部分　HTML基礎
第01章　HTML簡介
1．1　前端技術簡介 \t2
1．1．1　從“網(wǎng)頁制作”到“前端開發(fā)” \t2
1．1．2　從“前端開發(fā)”到“后端開發(fā)” \t3
1．1．3　學習路線 \t5
1．2　什么是HTML \t5
1．3　教程介紹 \t6
1．3．1　教程簡介 \t6
1．3．2　初學者比較關心的問題\t7
第02章　開發(fā)工具
2．1　開發(fā)工具 \t8
2．2　使用Hbuilder \t9
第03章　基本標簽
3．1　HTML結(jié)構(gòu) \t11
3．2　head標簽 \t12
3．2．1　title標簽 \t13
3．2．2　meta標簽 \t13
3．2．3　style標簽 \t15
3．2．4　script標簽 \t15
3．2．5　link標簽 \t16
3．2．6　base標簽 \t16
3．3　body標簽 \t16
3．4　HTML注釋 \t17
3．5　練習題 \t18
第04章　文本
4．1　文本簡介 \t19
4．1．1　頁面組成元素 \t19
4．1．2　HTML文本 \t20
4．2　標題標簽 \t21
4．3　段落標簽 \t22
4．3．1　段落標簽： \t22
4．3．2　換行標簽：
\t23
4．4　文本標簽 \t25
4．4．1　粗體標簽 \t25
4．4．2　斜體標簽 \t26
4．4．3　上標標簽 \t26
4．4．4　下標標簽 \t27
4．4．5　中劃線標簽 \t27
4．4．6　下劃線標簽 \t28
4．4．7　大字號標簽和小字號標簽 \t28
4．5　水平線標簽 \t29
4．6　div標簽 \t30
4．7　自閉合標簽 \t31
4．8　塊元素和行內(nèi)元素 \t32
4．8．1　塊元素 \t33
4．8．2　行內(nèi)元素 \t34
4．9　特殊符號 \t35
4．9．1　網(wǎng)頁中的“空格” \t35
4．9．2　網(wǎng)頁中的“特殊符號” \t36
4．10　練習題 \t38
第05章　列表
5．1　列表簡介 \t39
5．2　有序列表 \t40
5．2．1　有序列表簡介 \t40
5．2．2　type屬性 \t41
5．3　無序列表 \t42
5．3．1　無序列表簡介 \t42
5．3．2　type屬性 \t43
5．3．3　深入無序列表 \t44
5．4　定義列表 \t46
5．5　HTML語義化 \t47
5．6　練習題 \t48
第06章　表格
6．1　表格簡介 \t49
6．2　基本結(jié)構(gòu) \t49
6．3　完整結(jié)構(gòu) \t51
6．3．1　表格標題：caption \t51
6．3．2　表頭單元格：th \t52
6．4　語義化 \t54
6．5　合并行：rowspan \t56
6．6　合并列：colspan \t57
6．7　練習題 \t58
第07章　圖片
7．1　圖片標簽 \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　練習題 \t67
第08章　超鏈接
8．1　超鏈接簡介 \t68
8．1．1　a標簽 \t69
8．1．2　target屬性 \t70
8．2　內(nèi)部鏈接 \t70
8．3　錨點鏈接 \t72
8．4　練習題 \t74
第09章　表單
9．1　表單簡介 \t75
9．1．1　表單是什么\t75
9．1．2　表單標簽 \t76
9．2　form標簽 \t76
9．2．1　form標簽簡介 \t76
9．2．2　form標簽屬性 \t77
9．3　input標簽 \t78
9．4　單行文本框 \t79
9．4．1　單行文本框簡介 \t79
9．4．2　單行文本框?qū)傩?\t79
9．5　密碼文本框 \t81
9．5．1　密碼文本框簡介 \t81
9．5．2　密碼文本框?qū)傩?\t82
9．6　單選框 \t83
9．6．1　單選框簡介 \t83
9．6．2　忽略點 \t84
9．7　復選框 \t86
9．8　按鈕 \t87
9．8．1　普通按鈕button \t88
9．8．2　提交按鈕submit \t89
9．8．3　重置按鈕reset \t89
9．8．4　button標簽 \t91
9．9　文件上傳 \t91
9．10　多行文本框 \t92
9．11　下拉列表 \t93
9．11．1　下拉列表簡介 \t93
9．11．2　select標簽屬性 \t94
9．11．3　option標簽屬性 \t95
9．12　練習題 \t97
第10章 　框架
10．1　iframe標簽 \t99
10．2　練習題 \t100
第二部分　CSS基礎
第11章　CSS簡介
11．1　CSS簡介 \t102
11．1．1　CSS是什么 \t102
11．1．2　CSS和CSS3 \t102
11．2　教程簡介 \t103
11．3　CSS引入方式 \t103
11．3．1　外部樣式表 \t103
11．3．2　內(nèi)部樣式表 \t104
11．3．3　行內(nèi)樣式表 \t105
11．4　練習題 \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　練習題 \t116
第13章　字體樣式
13．1　字體樣式簡介 \t118
13．2　字體類型（font-family）\t119
13．3　字體大?。╢ont-size）\t120
13．3．1　px是什么 \t120
13．3．2　采用px為單位 \t121
13．4　字體粗細（font-weight）\t122
13．5　字體風格（font-style）\t123
13．6　字體顏色（color）\t125
13．6．1　關鍵字 \t125
13．6．2　16進制RGB值 \t125
13．7　CSS注釋 \t126
13．8　練習題 \t128
第14章　文本樣式
14．1　文本樣式簡介 \t129
14．2　首行縮進（text-indent）\t129
14．3　水平對齊（text-align）\t130
14．4　文本修飾（text-decoration）\t131
14．4．1　text-decoration屬性 \t131
14．4．2　三種劃線的用途分析 \t133
14．5　大小寫（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　練習題 \t137
第15章　邊框樣式
15．1　邊框樣式簡介 \t139
15．2　整體樣式 \t140
15．2．1　邊框?qū)傩?\t140
15．2．2　簡寫形式 \t142
15．3　局部樣式 \t142
15．4　練習題 \t145
第16章　列表樣式
16．1　列表項符號（list-style-type）\t146
16．1．1　定義列表項符號 \t146
16．1．2　去除列表項符號 \t148
16．2　列表項圖片（list-style-image）\t149
16．3　練習題 \t150
第17章　表格樣式
17．1　表格標題位置（caption-side）\t151
17．2　表格邊框合并（border-collapse）\t152
17．3　表格邊框間距（border-spacing）\t154
17．4　練習題 \t155
第18章　圖片樣式
18．1　圖片大小 \t156
18．2　圖片邊框 \t157
18．3　圖片對齊 \t158
18．3．1　水平對齊 \t158
18．3．2　垂直對齊 \t159
18．4　文字環(huán)繞——初識float \t162
18．5　練習題 \t163
第19章　背景樣式
19．1　背景樣式簡介 \t164
19．2　背景顏色（background-color）\t164
19．3　背景圖片樣式（background-image）\t166
19．4　背景圖片重復（background-repeat）\t167
19．5　背景圖片位置（background-position）\t169
19．5．1　像素值 \t169
19．5．2　關鍵字 \t170
19．6　背景圖片固定（background-attachment）\t172
19．7　練習題 \t173
第20章　超鏈接樣式
20．1　超鏈接偽類 \t174
20．1．1　超鏈接偽類簡介 \t174
20．1．2　深入了解超鏈接偽類 \t175
20．2　深入了解：hover \t177
20．3　鼠標樣式 \t178
20．3．1　瀏覽器鼠標樣式 \t178
20．3．2　自定義鼠標樣式 \t180
20．4　練習題 \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簡寫形式 \t189
21．5　外邊距（margin）\t191
21．5．1　margin局部樣式\t191
21．5．2　margin簡寫形式 \t194
21．5．3　瀏覽器審查元素 \t195
21．6　練習題 \t196
第22章　浮動布局
22．1　文檔流簡介 \t197
22．1．1　正常文檔流 \t197
22．1．2　脫離文檔流 \t198
22．2　浮動 \t200
22．3　清除浮動 \t202
22．4　練習題 \t204
第23章　定位布局
23．1　定位布局簡介 \t205
23．2　固定定位：fixed \t206
23．3　相對定位：relative \t207
23．4　絕對定位：absolute \t209
23．5　靜態(tài)定位：static \t211
23．6　練習題 \t211
第三部分　JavaScript基礎
第24章　JavaScript簡介
24．1　JavaScript是什么\t214
24．1．1　JavaScript簡介 \t214
24．1．2　教程介紹 \t215
24．2　JavaScript開發(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　一個簡單的JavaScript程序 \t221
24．5　練習題 \t222
第25章　語法基礎
25．1　語法簡介 \t223
25．2　變量與常量 \t224
25．2．1　變量 \t225
25．2．2　常量 \t229
25．3　數(shù)據(jù)類型 \t229
25．3．1　數(shù)字 \t229
25．3．2　字符串 \t230
25．3．3　布爾值 \t232
25．3．4　未定義值 \t233
25．3．5　空值 \t234
25．4　運算符 \t234
25．4．1　算術運算符 \t235
25．4．2　賦值運算符 \t239
25．4．3　比較運算符 \t240
25．4．4　邏輯運算符 \t241
25．4．5　條件運算符 \t244
25．5　表達式與語句 \t245
25．6　類型轉(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　練習題 \t253
第26章　流程控制
26．1　流程控制簡介 \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語句的嵌套 \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　練習題 \t276
第27章　初識函數(shù)
27．1　函數(shù)是什么？ \t278
27．2　函數(shù)的定義 \t280
27．2．1　沒有返回值的函數(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　在表達式中調(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　求出任意五個數(shù)最大值 \t292
27．8　練習題 \t292
第28章　字符串對象
28．1　內(nèi)置對象簡介 \t294
28．2　獲取字符串長度 \t295
28．3　大小寫轉(zhuǎn)換 \t296
28．4　獲取某一個字符 \t297
28．5　截取字符串 \t298
28．6　替換字符串 \t300
28．7　分割字符串 \t302
28．8　檢索字符串的位置 \t304
28．9　統(tǒng)計某一個字符的個數(shù) \t306
28．10　統(tǒng)計字符串中有多少個數(shù)字\t307
28．11　練習題 \t308
第29章　數(shù)組對象
29．1　數(shù)組是什么 \t309
29．2　數(shù)組的創(chuàng)建 \t310
29．3　數(shù)組的獲取 \t310
29．4　數(shù)組的賦值 \t311
29．5　獲取數(shù)組長度 \t312
29．6　截取數(shù)組某部分 \t315
29．7　為數(shù)組添加元素 \t316
29．7．1　在數(shù)組開頭添加元素：unshift() \t316
29．7．2　在數(shù)組結(jié)尾添加元素：push() \t318
29．8　刪除數(shù)組元素 \t319
29．8．1　刪除數(shù)組中第一個元素：shift() \t319
29．8．2　刪除數(shù)組最后一個元素：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　計算面積與體積，返回一個數(shù)組 \t326
29．14　練習題 \t327
第30章　時間對象
30．1　日期對象簡介 \t329
30．2　操作年、月、日 \t331
30．2．1　獲取年、月、日 \t331
30．2．2　設置年、月、日 \t333
30．3　操作時、分、秒 \t334
30．3．1　獲取時、分、秒 \t334
30．3．2　設置時、分、秒 \t335
30．4　獲取星期幾 \t336
30．5　練習題 \t338
第31章　數(shù)學對象
31．1　數(shù)學對象簡介 \t339
31．2　Math對象的屬性 \t339
31．3　Math對象的方法 \t341
31．4　最大值與最小值 \t341
31．5　取整運算 \t342
31．5．1　向下取整：floor() \t342
31．5．2　向上取整：ceil() \t343
31．6　三角函數(shù) \t344
31．7　生成隨機數(shù) \t346
31．7．1　隨機生成某個范圍內(nèi)的“任意數(shù)” \t346
31．7．2　隨機數(shù)生成某個范圍內(nèi)的“整數(shù)” \t347
31．8　生成隨機驗證碼 \t347
31．9　生成隨機顏色值 \t348
31．10　練習題 \t349
第32章　DOM基礎
32．1　核心技術簡介 \t350
32．2　DOM是什么 \t351
32．2．1　DOM對象 \t351
32．2．2　DOM結(jié)構(gòu) \t351
32．3　節(jié)點類型 \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　復制元素 \t376
32．9　替換元素 \t377
32．10　練習題 \t378
第33章　DOM進階
33．1　HTML屬性操作（對象屬性） \t380
33．1．1　獲取HTML屬性值 \t380
33．1．2　設置HTML屬性值 \t386
33．2　HTML屬性操作（對象方法） \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　設置CSS屬性值 \t396
33．3．3　最后一個問題 \t401
33．4　DOM遍歷 \t404
33．4．1　查找父元素 \t404
33．4．2　查找子元素 \t406
33．4．3　查找兄弟元素 \t410
33．5　innerHTML和innerText \t411
33．6　練習題 \t414
第34章　 事件基礎
34．1　事件是什么 \t415
34．2　事件調(diào)用方式 \t416
34．2．1　在script標簽中調(diào)用 \t416
34．2．2　在元素中調(diào)用事件 \t417
34．3　鼠標事件 \t418
34．3．1　鼠標單擊 \t419
34．3．2　鼠標移入和鼠標移出 \t421
34．3．3　鼠標按下和鼠標松開 \t422
34．4　鍵盤事件 \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　頁面事件 \t435
34．7．1　onload \t435
34．7．2　onbeforeunload \t437
34．8　練習題 \t438
第35章　事件進階
35．1　事件監(jiān)聽器 \t439
35．1．1　事件處理器 \t439
35．1．2　事件監(jiān)聽器 \t440
35．2　event對象 \t447
35．2．1　type \t448
35．2．2　keyCode \t448
35．3　this \t451
35．4　練習題 \t454
第36章　window對象
36．1　window對象簡介 \t455
36．2　窗口操作 \t457
36．2．1　打開窗口 \t457
36．2．2　關閉窗口 \t462
36．3　對話框 \t464
36．3．1　alert() \t464
36．3．2　confirm() \t465
36．3．3　prompt() \t466
36．4　定時器 \t467
36．4．1　setTimeout()和clearTimeout() \t468
36．4．2　setInterval()和clearInterval() \t472
36．5　location對象 \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對象 \t479
36．7　練習題 \t481
第37章　document對象
37．1　document對象簡介 \t482
37．2　document對象屬性 \t482
37．2．1　document．URL \t483
37．2．2　document．referrer \t484
37．3　document對象方法 \t484
37．3．1　document．write() \t485
37．3．2　document．writeln() \t485
37．4　練習題 \t487
后記