零基礎入門學習 Web 開發 (HTML5&CSS3)

第　1章 概述　1
1.1　Web開發是什麼　1
1.2　學習Web開發有前途嗎　1
1.3　Web的發展史　3

第　2章 網頁基礎　4
2.1　第 一個程序　4
2.2　img元素和a元素　6
2.3　“多才多藝”的meta元素　7
2.3.1　聲明文檔編碼　7
2.3.2　實現網頁自適應　9
2.3.3　搜索引擎優化　10
2.3.4　網頁自動跳轉　11
2.4　為網頁添加樣式　11
2.5　link元素　14
2.5.1　鏈接外部樣式表　14
2.5.2　鏈接網站圖標　16
2.6　**路徑和相對路徑　16
2.7　base元素　17
2.8　JavaScript初體驗　18
2.8.1　定義文檔內嵌腳本　18
2.8.2　引用外部腳本　18
2.8.3　延遲執行腳本　19
2.8.4　異步執行腳本　21
2.8.5　no元素　21

第3章　標記文字的元素　22
3.1　註釋　22
3.1.1　HTML的註釋　22
3.1.2　CSS的註釋　23
3.1.3　JavaScript的註釋　24
3.2　塊級元素和行內元素　25
3.3　pre元素　26
3.3.1　預格式化　27
3.3.2　字符實體　28
3.4　code元素　29
3.5　var、kbd、samp元素　30
3.6　q元素　30
3.7　blockquote元素　31
3.8　cite元素　33
3.9　abbr元素　33
3.10　dfn元素　34
3.11　address元素　34
3.12　ruby元素　35
3.13　bdo元素　35
3.14　strong元素和b元素　36
3.15　em元素和i元素　36
3.16　使用CSS代替b元素和i元素　37
3.17　del元素和ins元素　38
3.18　s元素　38
3.19　mark元素　39
3.20　sup元素和sub元素　39
3.21　small元素　39

第4章　列表　41
4.1　ul元素　41
4.2　ol元素　41
4.3　兩個與列表相關的CSS屬性　43
4.4　列表嵌套　45
4.5　定義列表　46

第5章　表格　48
5.1　實現表格　48
5.2　給表格添加邊框　49
5.3　給表格添加標題　50
5.4　分割表格　52

第6章　表單　57
6.1　form元素　57
6.2　button元素　58
6.3　一些常用的功能　59
6.3.1　自動填充　59
6.3.2　指定目標顯示位置　61
6.3.3　設置默認值　61
6.3.4　自動聚焦　61
6.3.5　禁用元素　61
6.4　label元素　62
6.5　fieldset元素　63
6.6　legend元素　64
6.7　select元素和option元素　64
6.8　optgroup元素　65

第7章　“**”的input元素　67
7.1　按鈕　67
7.2　單選框　68
7.3　複選框　68
7.4　時間和日期　69
7.5　搜索框　70
7.6　顏色選擇框　70
7.7　圖像按鈕　71
7.8　隱藏input元素　72
7.9　上傳文件　73
7.10　限定數字輸入　75
7.11　限定數值範圍　76
7.12　數值滾動條　76
7.13　郵箱、電話號碼和網址　77
7.14　placeholder屬性　78
7.15　required屬性　78
7.16　size屬性　79
7.17　maxlength屬性　79
7.18　list屬性和datalist元素　80

第8章　其他表單元素　81
8.1　輸出計算結果　81
8.2　接收多行文本輸入　81

第9章　div和語義化佈局　84
9.1　div元素　84
9.2　語義化佈局　88

第　10章 嵌入　92
10.1　嵌入圖片　92
10.1.1　map和area元素　92
10.1.2　picture和source元素　93
10.1.3　figure和figcaption元素　94
10.2　嵌入視頻　94
10.2.1　video元素　94
10.2.2　播放控件和自動播放　95
10.2.3　視頻預加載　96
10.2.4　視頻封面　96
10.2.5　多個視頻文件　97
10.3　嵌入音頻　97
10.4　嵌入字幕　97
10.5　嵌入網頁　98
10.6　meter元素和progress元素　100

第　11章 CSS語法　102
11.1　什麼是CSS　102
11.2　CSS基礎語法　103
11.2.1　內聯樣式　103
11.2.2　內部樣式表　104
11.2.3　外部樣式表　104

第　12章 基本選擇器與復合選擇器　106
12.1　基本選擇器　106
12.1.1　通用選擇器　107
12.1.2　元素選擇器　107
12.1.3　類選擇器　109
12.1.4　id選擇器　110
12.2　複合選擇器　110
12.2.1　交集選擇器　111
12.2.2　並集選擇器　111
12.2.3　後代選擇器　112
12.2.4　子元素選擇器　113
12.2.5　相鄰兄弟選擇器　113
12.2.6　通用兄弟選擇器　114

第　13章 偽元素選擇器　115
13.1　::first-line選擇器　115
13.2　::first-letter選擇器　116
13.3　::before選擇器和::after選擇器　117
13.4　::selection選擇器　118

第　14章 動態偽類選擇器和UI偽類選擇器　119
14.1　動態偽類選擇器　119
14.2　UI偽類選擇器　122

第　15章 結構偽類選擇器和其他偽類選擇器　128
15.1　結構偽類選擇器　128
15.2　其他偽類選擇器　134
15.3　如何區分偽類選擇器和偽元素選擇器　136

第　16章 屬性選擇器　139
16.1　使用屬性選擇器精確匹配　139
16.2　使用屬性選擇器模糊匹配　142

第　17章 顏色和背景　144
17.1　顏色　144
17.1.1　前景色　144
17.1.2　RGB　145
17.1.3　HEX和HSL　145
17.1.4　RGBA和HSLA　146
17.2　背景　146
17.2.1　背景色　146
17.2.2　背景圖像　147
17.2.3　重複背景圖像　148
17.2.4　背景圖像的位置　149
17.2.5　背景圖像的尺寸　150
17.2.6　背景圖像的附著方式　151
17.2.7　背景圖像的起始位置和顯示區域　151
17.2.8　background屬性的簡寫形式　153

第　18章 盒子模型　154
18.1　邊框　154
18.1.1　邊框樣式　154
18.1.2　邊框寬度　155
18.1.3　邊框顏色　156
18.1.4　border屬性的簡寫形式　156
18.1.5　為邊框設置樣式、寬度、顏色　157
18.1.6　圓角邊框　158
18.1.7　圖像邊框　160
18.2　內邊距　162
18.3　外邊距　163
18.4　水平居中　164
18.5　外邊距塌陷　165
18.6　設置元素的尺寸　167
18.7　設置元素的*小尺寸和*大尺寸　168
18.8　處理溢出問題　169
18.9　輪廓　171
18.10　陰影　174

第　19章 經典網頁佈局（上）　176
19.1　設置元素的顯示類型　176
19.1.1　塊級元素　177
19.1.2　行內元素　178
19.1.3　行內塊元素　180
19.1.4　隱藏元素　181
19.1.5　控制元素的可見性　182
19.2　浮動　184
19.3　利用float實現多列佈局　187
19.4　清除浮動　190
19.5　定位　192
19.6　z-index屬性　195
19.7　利用position實現多列佈局　196
19.8　BFC　197
19.8.1　BFC的對齊方式　197
19.8.2　創建一個新的BFC　198
19.8.3　外邊距塌陷　199
19.8.4　容納浮動元素　201
19.8.5　阻止文本環繞　204
19.9　多列佈局　204

第　20章 經典網頁佈局（下）　211
20.1　居中　211
20.2　單列佈局　215
20.3　兩列佈局　217
20.4　三列佈局　219
20.4.1　浮動法　219
20.4.2　**定位法　220
20.4.3　負外邊距法　220
20.5　雙飛翼佈局　223
20.6　杯狀佈局　224
20.7　瀑布流佈局　225

第　21章 彈性盒佈局　229
21.1　彈性容器和彈性元素　229
21.2　主軸和垂軸　235
21.3　主軸上的對齊方式　239
21.4　垂軸上的對齊方式　240
21.5　多行彈性元素的對齊方式　243
21.6　order屬性　244
21.7　彈性盒佈局“彈”的到底是什麼呢　245
21.8　設置彈性元素的壓縮比例　247
21.9　設置彈性元素的放大比例　249
21.10　設置彈性元素的初始尺寸　250
21.11　彈性元素的特徵　251

第　22章 柵格佈局　253
22.1　創建柵格容器　255
22.2　定義柵格軌道　256
22.3　定義柵格區域　257
22.4　定義柵格間距　260
22.5　一些關鍵字和函數　261
22.5.1　fr　261
22.5.2　auto　261
22.5.3　min-content和max-content　262
22.5.4　repeat()　262
22.5.5　auto-fill　262
22.5.6　minmax()　262
22.5.7　auto-fit　263
22.5.8　fit-content()　263
22.6　柵格佈局的對齊方式　264
22.6.1　justify-content屬性　265
22.6.2　align-content屬性　265
22.6.3　justify-items屬性　266
22.6.4　align-items屬性　267
22.6.5　justify-self和align-self屬性　267
22.6.6　place-content、place-items和place-self屬性　268
22.7　柵格線　269
22.7.1　命名柵格線　269
22.7.2　grid-column-start、grid-column-end和grid-row-start、grid-row-end屬性　270
22.7.3　grid-column和grid-row屬性　272
22.7.4　grid-area屬性　272
22.7.5　修改重疊的順序　273
22.8　定義柵格元素的放置規則　274
22.8.1　grid-auto-flow屬性　274
22.8.2　grid-auto-columns和grid-auto-rows屬性　276
22.9　grid屬性　277
22.10　柵格元素的特性　278

第　23章 文本樣式和字體　280
23.1　設置文本對齊　280
23.2　保留空白字符　281
23.3　設置文本的方向　282
23.4　設置縮進　283
23.5　設置間距　284
23.6　縱向對齊文本　285
23.7　創建文本陰影　286
23.8　控制斷詞　287
23.9　控製文本溢出　288
23.10　裝飾文本　289
23.11　轉換大小寫　290
23.12　設置字體　291
23.12.1　font-family屬性　291
23.12.2　font-size屬性　293
23.12.3　font-weight、font-style和font-variant屬性　293
23.13　使用Web字體　295

第　24章 過渡、變形和動畫　296
24.1　過渡　296
24.2　變形　300
24.2.1　旋轉　300
24.2.2　移動　301
24.2.3　縮放　302
24.2.4　傾斜　303
24.2.5　變形原點　304
24.2.6　3D變形方式　305
24.2.7　修改視域　306
24.2.8　處理元素的背面　308
24.3　動畫　309
24.3.1　關鍵幀　309
24.3.2　讓元素動起來　311
24.3.3　指定動畫開始前的延遲　311
24.3.4　指定動畫循環的次數　312
24.3.5　指定動畫的方向　312
24.3.6　指定動畫的速度曲線　313
24.3.7　重複關鍵幀屬性　314
24.3.8　指定動畫的填充模式　315
24.3.9　簡寫　316

第　25章 濾鏡、混合模式、裁剪和遮罩　317
25.1　濾鏡　317
25.1.1　blue()　317
25.1.2　brightness()　318
25.1.3　contrast()　318
25.1.4　saturate()　319
25.1.5　grayscale()　319
25.1.6　sepia()　320
25.1.7　hue-rotate()　320
25.1.8　invert()　321
25.1.9　opacity()　321
25.1.10　drop-shadow()　322
25.1.11　應用多個濾鏡　322
25.1.12　SVG濾鏡　323
25.2　混合模式　324
25.2.1　變暗、正片疊底和顏色加深　324
25.2.2　變亮、濾色和顏色減淡　326
25.2.3　疊加、柔光和強光　327
25.2.4　差值和排除　328
25.2.5　色相、飽和度、顏色和明度　329
25.2.6　多張背景圖像的混合　330
25.3　裁剪　331
25.4　蒙版　333
25.5　置換元素的填充與定位　334

第　26章 其他CSS特性　336
26.1　優先級　336
26.2　透明度　339
26.3　漸變　340
26.3.1　線性漸變　340
26.3.2　徑向漸變　343
26.4　CSS變量　344
26.5　CSS計數器　345
26.6　媒體查詢　347