HTML + CSS + JavaScript 網頁製作從入門到精通, 4/e

本書從零開始，全面講解開發網頁的全過程，使讀者能夠迅速掌握核心知識點及對應的編程能力。

本書共有17章內容，第1章～第7章介紹HTML中常用的標簽；第8章～第11章介紹了CSS中的常見樣式，其中包括浮動和定位兩種網頁佈局方式；第12章介紹了HTML5中的新增元素和屬性；第13章介紹了CSS3中的新增屬性；第14章介紹了flex佈局的用法，並用案例的方式講解了移動端網頁的實現方法；第15章和第16章講解了JavaScript的基礎知識並提供了大量示範案例；第17章以一個商業網站為案例，對全書重點內容進行綜合實戰練習，案例中使用了HTML+CSS+JavaScript的核心知識點。

本書提供配套視頻教程，並附有HTML、CSS、JavaScript的技巧精講。

書中提供的練習題和章節任務，可以幫助讀者及時進行自我檢測，查漏補缺。

本書知識點全面、講解詳細，適合零基礎的編程初學者閱讀，也適合具備基礎知識、想要提升編程能力的讀者閱讀。

史笑顏，前端工程師、產品經理。
已有作品《從零開始：HTML5+CSS3快速入門教程》被多所大中專院校採購為教材使用，在讀者群中被認為是“非常簡單易學的代碼書”。
擅長以純新手的視角看問題，語言風格淺顯易懂。
側重於將知識點簡單化處理，追求每一個知識點和案例都要讓初學者快速看懂。

第01章　創建一個HTML網頁
1．1　認識HTML． 2
1．2　HTML標籤． 2
1．3　HTML文件的基本結構3
1．4． Chrome的開發者工具3
1．5　在記事本中編寫HTML文件5
1．6．使用編輯器創建HTML文檔6
1．6．1．下載 Hbuilder X6
1．6．2．使用Hbuilder X． 8
1．7　編寫第 一個HTML網頁9
1．8　練習題11
1．9　章節任務11

第02章　HTML基本標籤
2．1． HTML文檔頭部13
2．2．網頁標題13
2．3．元信息13
2．3．1．設置網頁關鍵字14
2．3．2．設置網頁說明14
2．3．3．添加作者信息15
2．3．4．規定字符編碼15
2．3．5．設置網頁的定時跳轉15
2．4　HTML註釋 16
2．5　HTML標題 17
2．6　HTML段落 18
2．7　換行 19
2．8　水平線 20
2．9　文本格式化20
2．10． HTML字符實體22
2．10．1　不間斷的空格22
2．10．2　插入特殊符號23
2．11　練習題． 23
2．12．章節任務． 24

第03章　建立超鏈接
3．1　超鏈接的基礎知識26
3．1．1　絕對路徑26
3．1．2　相對路徑27
3．1．3　超鏈接27
3．2　在新窗口打開鏈接28
3．3　創建錨點鏈接29
3．3．1　錨點鏈接29
3．3．2　鏈接同一網頁中的錨點． 30
3．3．3　鏈接到其他網頁中的錨點31
3．4　外部鏈接33
3．4．1　鏈接到外部網站33
3．4．2　鏈接到E-mail． 34
3．4．3　鏈接到FTP34
3．4．4　鏈接到Telnet35
3．4．5　下載文件35
3．5　練習題35
3．6．章節任務36

第04章　使用圖像
4．1　圖像的格式38
4．1．1． GIF格式． 38
4．1．2． JPEG格式38
4．1．3． PNG格式38
4．2　 標籤基礎語法38
4．3　圖像的路徑src 39
4．4　圖像的提示文字alt ． 39
4．5　圖像的寬度（width）和高度（height）． 40
4．6　圖像的超鏈接40
4．6．1　圖像的超鏈接． 41
4．6．2　圖像熱區鏈接41
4．7　練習題43
4．8．章節任務43

第05章　使用列表
5．1　有序列表45
5．1．1　標籤45
5．1．2　有序列表的序號類型type． 46
5．1．3　有序列表的起始數值start． 47
5．2　無序列表48
5．3　定義列表． 49
5．4　列表的嵌套49
5．5　練習題50
5．6　章節任務50

第06章　使用表格
6．1　創建表格52
6．1．1　表格的基本構成、、52
6．1．2　設置表格的標題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　表格內文字與邊框間距cellpadding57
6．3　表格的行屬性58
6．3．1　行內文字的水平對齊方式align58
6．3．2　行內文字的垂直對齊方式valign． 59
6．4　單元格屬性59
6．4．1　單元格跨列colspan ． 60
6．4．2　單元格跨行rowspan61
6．5　表格結構61
6．6　練習題62

第07章　使用表單
7．1　form元素創建表單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　複選框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　數值number72
7．3．2．時間選擇器DatePicker73
7．4　下拉菜單74
7．5　文本域textarea． 75
7．6　創建表單案例75
7．7　練習題78
7．8　章節任務78

第08章　使用CSS樣式表
8．1　CSS基礎語法80
8．1．1　認識CSS80
8．1．2． CSS語法結構80
8．1．3． CSS選擇器81
8．2　添加CSS的方法82
8．2．1．鏈接外部樣式表82
8．2．2．內部樣式表82
8．2．3．導入外部樣式表83
8．2．4．內嵌樣式83
8．3　字體屬性83
8．3．1　字體font-family． 83
8．3．2　字號font-size． 84
8．3．3　字體樣式font-style85
8．3．4　加粗字體font-weight86
8．3．5　小寫字母轉為大寫字母font-variant． 87
8．3．6　字體複合屬性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　背景重複background-repeat93
8．5．5　背景位置background-position． 94
8．5．6　背景附件background-attachment． 96
8．5．7　背景複合屬性background97
8．6　段落屬性98
8．6．1　單詞間隔word-spacing98
8．6．2　字符間隔letter-spacing． 99
8．6．3　文字修飾text-decoration． 100
8．6．4　水平對齊方式text-align． 101
8．6．5　垂直對齊方式vertical-align102
8．6．6　文本轉換text-transform103
8．6．7　文本縮進text-indent104
8．6．8　文本行高line-height105
8．6．9　處理空白white-space106
8．7　練習題． 107
8．8　章節任務． 107

第09章　盒模型佈局
9．1　認識盒模型109
9．1．1．盒模型的構成109
9．1．2．查看元素的盒模型． 109
9．2．內容區content． 110
9．3．邊框border112
9．3．1　邊框樣式border-style112
9．3．2　邊框寬度border-width113
9．3．3　邊框顏色border-color114
9．4．內邊距padding． 114
9．4．1．分別設置4個方向的內邊距． 115
9．4．2　內邊距的複合屬性padding116
9．5．外邊距margin119
9．5．1　分別設置4個方向的外邊距． 119
9．5．2　外邊距複合屬性margin121
9．6．盒模型的大小． 123
9．7　塊元素和內聯元素124
9．7．1．塊元素和內聯元素的特點124
9．7．2． display屬性規定元素的類型126
9．8．初始化頁面樣式127
9．9．練習題． 128
9．10 章節任務． 128

第 10章　浮動與定位
10．1．文檔流131
10．2　浮動屬性float131
10．3．圖文環繞134
10．4　清除浮動clear． 135
10．5　定位方式position139
10．6　元素位置top、right、bottom、left139
10．7．相對定位140
10．8．絕對定位142
10．9．固定定位143
10．10．層疊順序z-index． 144
10．11　練習題． 146
10．12．章節任務． 147

第 11章　Web標準與CSS網頁佈局實例
11．1　Web標準149
11．2　DIV+CSS佈局網頁基礎． 149
11．2．1　認識DIV149
11．2．2　一列固定寬度149
11．2．3　一列自適應152
11．2．4　兩列固定寬度153
11．2．5　兩列寬度自適應155
11．2．6　兩列佈局右列寬度自適應． 156
11．3　使用CSS設計網站導航欄157
11．3．1　有鼠標指針移入效果的導航欄157
11．3．2　橫嚮導航159
11．4　使用CSS設計表單樣式161
11．4．1　改變按鈕的背景顏色和文字顏色． 161
11．4．2　設計文本框的樣式． 162
11．4．3　設計文本框中的提示文字． 163
11．5　使用CSS設計表格樣式164
11．5．1．折疊邊框165
11．5．2．設計表格的字體樣式． 166
11．6　使用CSS設置鏈接樣式167
11．6．1　去掉超鏈接的下畫線167
11．6．2　改變鼠標指針的類型． 167
11．6．3　設置超鏈接不同狀態的樣式． 168
11．7　練習題169
11．8．章節任務170

第 12章　HTML5新增元素
12．1　認識HTML5 172
12．2　HTML5與HTML4的區別． 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新增的結構元素． 176
12．5　HTML5新增的多媒體元素． 178
12．5．1．視頻元素video178
12．5．2　鏈接不同的視頻文件． 179
12．5．3．音頻元素audio181
12．6　HTML5新增的畫布元素canvas181
12．6．1．創建canvas元素181
12．6．2　繪製矩形183
12．6．3　繪製路徑184
12．6．4．顏色漸變185
12．7．練習題187
12．8．章節任務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　背景圖像定位區域background-origin195
13．2．3　背景繪製區域background-clip． 198
13．3　文本201
13．3．1　文本陰影text-shadow201
13．3．2　強制換行word-wrap． 202
13．3．3　文本溢出text-overflow． 203
13．4　多列． 204
13．4．1　創建多列column-count205
13．4．2　列的寬度column-width206
13．4．3　列的間隔column-gap206
13．4．4　列的規則column-rule207
13．5　2D轉換208
13．5．1　移動translate()208
13．5．2　旋轉rotate()209
13．5．3　縮放scale()． 210
13．6　過渡212
13．7　動畫213
13．7．1　@keyframes規則聲明動畫． 213
13．7．2　animation動畫214
13．8　用戶界面215
13．8．1　box-sizing． 216
13．8．2　resize218
13．9　實例應用219
13．9．1．使用移動方法實現完全居中219
13．9．2　照片牆效果221
13．10　練習題223
13．11．章節任務223

第 14章　移動端網頁
14．1． flex佈局225
14．1．1． flex相關概念225
14．1．2． flex佈局225
14．2．移動端基本概念231
14．2．1．兩種像素231
14．2．2．移動端的3個視口231
14．2．3．設備像素比． 233
14．3．移動端開發234
14．3．1．移動端單位——vw適配234
14．3．2．開發一個移動端網頁238
14．4．媒體查詢247
14．5　練習題． 250
14．6．章節任務251

第 15章　JavaScript腳本基礎
15．1　JavaScript簡介253
15．2　JavaScript基本語法254
15．2．1　常量和變量． 254
15．2．2．數據類型． 255
15．2．3　表達式和運算符256
15．2．4　基本語句． 257
15．2．5． JavaScript註釋263
15．2．6． JavaScript代碼調試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對象． 272
15．4．1． DOM元素對象獲取頁面中的元素． 272
15．4．2． DOM屬性對象修改元素的屬性274
15．5　瀏覽器的其他內部對象275
15．5．1　navigator對象276
15．5．2　windows對象276
15．5．3　location對象． 278
15．5．4　history對象279
15．6　練習題． 280
15．7．章節任務281

第 16章　JavaScript 網頁特效
16．1　時間特效283
16．1．1　顯示當前時間． 283
16．1．2　顯示當前日期． 285
16．1．3．製作倒計時特效． 287
16．2　圖像特效289
16．2．1　圖像閃爍效果． 289
16．2．2　圖像輪播． 290
16．3　窗口特效291
16．3．1　打開新窗口291
16．3．2　定時關閉窗口． 293
16．4　鼠標指針特效294
16．4．1　返回鼠標指針的位置信息294
16．4．2　跟隨鼠標指針移動的圖像295
16．5　練習題． 296
16．6．章節任務297

第 17章　PC端實戰——製作購物網頁
17．1．項目結構299
17．2．製作網頁前的準備301
17．2．1．分辨率301
17．2．2．內容居中301
17．3．項目佈局302
17．4．部分難點講解304
17．4．1．佈局． 304
17．4．2．圖文對齊． 305
17．5．部分難點講解308
17．5．1．佈局308
17．5．2．複雜網頁的選擇器使用． 310
17．6．實現圖像的 JavaScript 動效311
17．6．1．圖像的切換311
17．6．2．收藏和取消312
17．7．總結313