HTML+CSS+JavaScript網(wǎng)頁(yè)制作從入門到精通（第4版）

第01章　創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)
1．1　認(rèn)識(shí)HTML．2
1．2　HTML標(biāo)簽．2
1．3　HTML文件的基本結(jié)構(gòu)3
1．4．Chrome的開(kāi)發(fā)者工具3
1．5　在記事本中編寫HTML文件5
1．6．使用編輯器創(chuàng)建HTML文檔6
1．6．1．下載 Hbuilder X6
1．6．2．使用Hbuilder X．8
1．7　編寫第 一個(gè)HTML網(wǎng)頁(yè)9
1．8　練習(xí)題11
1．9　章節(jié)任務(wù)11
第02章　HTML基本標(biāo)簽
2．1．HTML文檔頭部13
2．2．網(wǎng)頁(yè)標(biāo)題13
2．3．元信息13
2．3．1．設(shè)置網(wǎng)頁(yè)關(guān)鍵字14
2．3．2．設(shè)置網(wǎng)頁(yè)說(shuō)明14
2．3．3．添加作者信息15
2．3．4．規(guī)定字符編碼15
2．3．5．設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)15
2．4　HTML注釋．16
2．5　HTML標(biāo)題~17
2．6　HTML段落 ．18
2．7　換行
19
2．8　水平線．20
2．9　文本格式化20
2．10．HTML字符實(shí)體22
2．10．1　不間斷的空格22
2．10．2　插入特殊符號(hào)23
2．11　練習(xí)題．23
2．12．章節(jié)任務(wù)．24
第03章　建立超鏈接
3．1　超鏈接的基礎(chǔ)知識(shí)26
3．1．1　絕對(duì)路徑26
3．1．2　相對(duì)路徑27
3．1．3　超鏈接27
3．2　在新窗口打開(kāi)鏈接28
3．3　創(chuàng)建錨點(diǎn)鏈接29
3．3．1　錨點(diǎn)鏈接29
3．3．2　鏈接同一網(wǎng)頁(yè)中的錨點(diǎn)．30
3．3．3　鏈接到其他網(wǎng)頁(yè)中的錨點(diǎn)31
3．4　外部鏈接33
3．4．1　鏈接到外部網(wǎng)站33
3．4．2　鏈接到E-mail．34
3．4．3　鏈接到FTP34
3．4．4　鏈接到Telnet35
3．4．5　下載文件35
3．5　練習(xí)題35
3．6．章節(jié)任務(wù)36
第04章　使用圖像
4．1　圖像的格式38
4．1．1．GIF格式．38
4．1．2．JPEG格式38
4．1．3．PNG格式38
4．2　標(biāo)簽基礎(chǔ)語(yǔ)法38
4．3　圖像的路徑src 39
4．4　圖像的提示文字alt ．39
4．5　圖像的寬度（width）和高度（height）．40
4．6　圖像的超鏈接40
4．6．1　圖像的超鏈接．41
4．6．2　圖像熱區(qū)鏈接41
4．7　練習(xí)題43
4．8．章節(jié)任務(wù)43
第05章　使用列表
5．1　有序列表45
5．1．1　標(biāo)簽45
5．1．2　有序列表的序號(hào)類型type．46
5．1．3　有序列表的起始數(shù)值start．47
5．2　無(wú)序列表48
5．3　定義列表．49
5．4　列表的嵌套49
5．5　練習(xí)題50
5．6　章節(jié)任務(wù)50
第06章　使用表格
6．1　創(chuàng)建表格52
6．1．1　表格的基本構(gòu)成、、52
6．1．2　設(shè)置表格的標(biāo)題53
6．1．3　表頭53
6．2　表格基本屬性54
6．2．1　表格寬度width．55
6．2．2　表格的邊框border．56
6．2．3　單元格間距cellspacing 57
6．2．4　表格內(nèi)文字與邊框間距cellpadding57
6．3　表格的行屬性58
6．3．1　行內(nèi)文字的水平對(duì)齊方式align58
6．3．2　行內(nèi)文字的垂直對(duì)齊方式valign．59
6．4　單元格屬性59
6．4．1　單元格跨列colspan ．60
6．4．2　單元格跨行rowspan61
6．5　表格結(jié)構(gòu)61
6．6　練習(xí)題62
第07章　使用表單
7．1　form元素創(chuàng)建表單65
7．1．1　提交表單action65
7．1．2　表單名稱name65
7．1．3　傳送方法method 66
7．2　插入input元素．66
7．2．1　文本框text 68
7．2．2　密碼框password ．69
7．2．3　單選按鈕radio 69
7．2．4　復(fù)選框checkbox 70
7．2．5　普通按鈕button ．70
7．2．6　提交按鈕submit 70
7．2．7　重置按鈕reset71
7．2．8　圖像域image ．72
7．3．HTML5新增輸入類型72
7．3．1　數(shù)值number72
7．3．2．時(shí)間選擇器DatePicker73
7．4　下拉菜單74
7．5　文本域textarea．75
7．6　創(chuàng)建表單案例75
7．7　練習(xí)題78
7．8　章節(jié)任務(wù)78
第08章　使用CSS樣式表
8．1　CSS基礎(chǔ)語(yǔ)法80
8．1．1　認(rèn)識(shí)CSS80
8．1．2．CSS語(yǔ)法結(jié)構(gòu)80
8．1．3．CSS選擇器81
8．2　添加CSS的方法82
8．2．1．鏈接外部樣式表82
8．2．2．內(nèi)部樣式表82
8．2．3．導(dǎo)入外部樣式表83
8．2．4．內(nèi)嵌樣式83
8．3　字體屬性83
8．3．1　字體font-family．83
8．3．2　字號(hào)font-size．84
8．3．3　字體樣式font-style85
8．3．4　加粗字體font-weight86
8．3．5　小寫字母轉(zhuǎn)為大寫字母font-variant．87
8．3．6　字體復(fù)合屬性88
8．4　顏色屬性color89
8．5　背景屬性90
8．5．1　背景顏色background-color90
8．5．2　背景圖像background-image91
8．5．3　背景大小background-size92
8．5．4　背景重復(fù)background-repeat93
8．5．5　背景位置background-position．94
8．5．6　背景附件background-attachment．96
8．5．7　背景復(fù)合屬性background97
8．6　段落屬性98
8．6．1　單詞間隔word-spacing98
8．6．2　字符間隔letter-spacing．99
8．6．3　文字修飾text-decoration．100
8．6．4　水平對(duì)齊方式text-align．101
8．6．5　垂直對(duì)齊方式vertical-align
102
8．6．6　文本轉(zhuǎn)換text-transform103
8．6．7　文本縮進(jìn)text-indent104
8．6．8　文本行高line-height105
8．6．9　處理空白white-space106
8．7　練習(xí)題．107
8．8　章節(jié)任務(wù)．107
第09章　盒模型布局
9．1　認(rèn)識(shí)盒模型109
9．1．1．盒模型的構(gòu)成109
9．1．2．查看元素的盒模型．109
9．2．內(nèi)容區(qū)content．110
9．3．邊框border112
9．3．1　邊框樣式border-style112
9．3．2　邊框?qū)挾萣order-width113
9．3．3　邊框顏色border-color114
9．4．內(nèi)邊距padding．114
9．4．1．分別設(shè)置4個(gè)方向的內(nèi)邊距．115
9．4．2　內(nèi)邊距的復(fù)合屬性padding116
9．5．外邊距margin119
9．5．1　分別設(shè)置4個(gè)方向的外邊距．119
9．5．2　外邊距復(fù)合屬性margin121
9．6．盒模型的大小．123
9．7　塊元素和內(nèi)聯(lián)元素124
9．7．1．塊元素和內(nèi)聯(lián)元素的特點(diǎn)124
9．7．2．display屬性規(guī)定元素的類型126
9．8．初始化頁(yè)面樣式127
9．9．練習(xí)題．128
9．10 章節(jié)任務(wù)．128
第 10章　浮動(dòng)與定位
10．1．文檔流131
10．2　浮動(dòng)屬性float131
10．3．圖文環(huán)繞134
10．4　清除浮動(dòng)clear．135
10．5　定位方式position139
10．6　元素位置top、right、bottom、left139
10．7．相對(duì)定位140
10．8．絕對(duì)定位142
10．9．固定定位143
10．10．層疊順序z-index．144
10．11　練習(xí)題．146
10．12．章節(jié)任務(wù)．147
第 11章　Web標(biāo)準(zhǔn)與CSS網(wǎng)頁(yè)布局實(shí)例
11．1　Web標(biāo)準(zhǔn)149
11．2　DIV+CSS布局網(wǎng)頁(yè)基礎(chǔ)．149
11．2．1　認(rèn)識(shí)DIV149
11．2．2　一列固定寬度149
11．2．3　一列自適應(yīng)152
11．2．4　兩列固定寬度153
11．2．5　兩列寬度自適應(yīng)155
11．2．6　兩列布局右列寬度自適應(yīng)．156
11．3　使用CSS設(shè)計(jì)網(wǎng)站導(dǎo)航欄157
11．3．1　有鼠標(biāo)指針移入效果的導(dǎo)航欄157
11．3．2　橫向?qū)Ш?59
11．4　使用CSS設(shè)計(jì)表單樣式161
11．4．1　改變按鈕的背景顏色和文字顏色．161
11．4．2　設(shè)計(jì)文本框的樣式．162
11．4．3　設(shè)計(jì)文本框中的提示文字．163
11．5　使用CSS設(shè)計(jì)表格樣式164
11．5．1．折疊邊框165
11．5．2．設(shè)計(jì)表格的字體樣式．166
11．6　使用CSS設(shè)置鏈接樣式167
11．6．1　去掉超鏈接的下畫線167
11．6．2　改變鼠標(biāo)指針的類型．167
11．6．3　設(shè)置超鏈接不同狀態(tài)的樣式．168
11．7　練習(xí)題169
11．8．章節(jié)任務(wù)170
第 12章　HTML5新增元素
12．1　認(rèn)識(shí)HTML5 172
12．2　HTML5與HTML4的區(qū)別．173
12．2．1　HTML5的文件特征173
12．2．2　HTML5的SEO．173
12．3　HTML5廢除的元素和屬性．174
12．3．1　廢除的元素174
12．3．2　廢除的屬性175
12．4　HTML5新增的結(jié)構(gòu)元素．176
12．5　HTML5新增的多媒體元素．178
12．5．1．視頻元素video178
12．5．2　鏈接不同的視頻文件．179
12．5．3．音頻元素audio181
12．6　HTML5新增的畫布元素canvas181
12．6．1．創(chuàng)建canvas元素181
12．6．2　繪制矩形183
12．6．3　繪制路徑184
12．6．4．顏色漸變185
12．7．練習(xí)題187
12．8．章節(jié)任務(wù)187
第 13章　CSS3新增屬性
13．1　邊框189
13．1．1　圓角邊框border-radius．189
13．1．2　邊框圖像border-image．191
13．1．3　邊框陰影box-shadow192
13．2　背景194
13．2．1　背景圖像尺寸background-size194
13．2．2　背景圖像定位區(qū)域background-origin195
13．2．3　背景繪制區(qū)域background-clip．198
13．3　文本201
13．3．1　文本陰影text-shadow201
13．3．2　強(qiáng)制換行word-wrap．202
13．3．3　文本溢出text-overflow．203
13．4　多列．204
13．4．1　創(chuàng)建多列column-count205
13．4．2　列的寬度column-width206
13．4．3　列的間隔column-gap206
13．4．4　列的規(guī)則column-rule207
13．5　2D轉(zhuǎn)換208
13．5．1　移動(dòng)translate()208
13．5．2　旋轉(zhuǎn)rotate()209
13．5．3　縮放scale()．210
13．6　過(guò)渡212
13．7　動(dòng)畫213
13．7．1　@keyframes規(guī)則聲明動(dòng)畫．213
13．7．2　animation動(dòng)畫214
13．8　用戶界面215
13．8．1　box-sizing．216
13．8．2　resize218
13．9　實(shí)例應(yīng)用219
13．9．1．使用移動(dòng)方法實(shí)現(xiàn)完全居中219
13．9．2　照片墻效果221
13．10　練習(xí)題223
13．11．章節(jié)任務(wù)223
第 14章　移動(dòng)端網(wǎng)頁(yè)
14．1．flex布局225
14．1．1．flex相關(guān)概念225
14．1．2．flex布局225
14．2．移動(dòng)端基本概念231
14．2．1．兩種像素231
14．2．2．移動(dòng)端的3個(gè)視口231
14．2．3．設(shè)備像素比．233
14．3．移動(dòng)端開(kāi)發(fā)234
14．3．1．移動(dòng)端單位——vw適配234
14．3．2．開(kāi)發(fā)一個(gè)移動(dòng)端網(wǎng)頁(yè)238
14．4．媒體查詢247
14．5　練習(xí)題．250
14．6．章節(jié)任務(wù)251
第 15章　JavaScript腳本基礎(chǔ)
15．1　JavaScript簡(jiǎn)介253
15．2　JavaScript基本語(yǔ)法254
15．2．1　常量和變量．254
15．2．2．?dāng)?shù)據(jù)類型．255
15．2．3　表達(dá)式和運(yùn)算符256
15．2．4　基本語(yǔ)句．257
15．2．5．JavaScript注釋263
15．2．6．JavaScript代碼調(diào)試263
15．3　JavaScript事件264
15．3．1　onclick事件264
15．3．2　onchange事件．265
15．3．3　onfocus事件．266
15．3．4　onblur事件267
15．3．5．onmouseover事件．268
15．3．6　onmouseout事件269
15．3．7　ondblclick事件 270
15．3．8　其他常用事件．271
15．4　HTML DOM對(duì)象．272
15．4．1．DOM元素對(duì)象獲取頁(yè)面中的元素．272
15．4．2．DOM屬性對(duì)象修改元素的屬性274
15．5　瀏覽器的其他內(nèi)部對(duì)象275
15．5．1　navigator對(duì)象276
15．5．2　windows對(duì)象276
15．5．3　location對(duì)象．278
15．5．4　history對(duì)象279
15．6　練習(xí)題．280
15．7．章節(jié)任務(wù)281
第 16章　JavaScript 網(wǎng)頁(yè)特效
16．1　時(shí)間特效283
16．1．1　顯示當(dāng)前時(shí)間．283
16．1．2　顯示當(dāng)前日期．285
16．1．3．制作倒計(jì)時(shí)特效．287
16．2　圖像特效289
16．2．1　圖像閃爍效果．289
16．2．2　圖像輪播．290
16．3　窗口特效291
16．3．1　打開(kāi)新窗口291
16．3．2　定時(shí)關(guān)閉窗口．293
16．4　鼠標(biāo)指針特效294
16．4．1　返回鼠標(biāo)指針的位置信息294
16．4．2　跟隨鼠標(biāo)指針移動(dòng)的圖像295
16．5　練習(xí)題．296
16．6．章節(jié)任務(wù)297
第 17章　PC端實(shí)戰(zhàn)——制作購(gòu)物網(wǎng)頁(yè)
17．1．項(xiàng)目結(jié)構(gòu)299
17．2．制作網(wǎng)頁(yè)前的準(zhǔn)備301
17．2．1．分辨率301
17．2．2．內(nèi)容居中301
17．3．項(xiàng)目布局302
17．4．部分難點(diǎn)講解304
17．4．1．布局．304
17．4．2．圖文對(duì)齊．305
17．5．部分難點(diǎn)講解308
17．5．1．布局308
17．5．2．復(fù)雜網(wǎng)頁(yè)的選擇器使用．310
17．6．實(shí)現(xiàn)圖像的 JavaScript 動(dòng)效311
17．6．1．圖像的切換311
17．6．2．收藏和取消312
17．7．總結(jié)313