零基礎入門學習 Web 開發 (HTML5&CSS3)
內容描述
本書首先講解Web開發的基礎知識,以及HTML5的語法、標記方法、元素;
然後講解CSS中經典屬性的用法,CSS3中的選擇器、背景、邊框、盒子模型、佈局方式、動畫、濾鏡,
以及針對多種瀏覽器應該怎樣在代碼中設置各種屬性等。
本書適合想要學習Web開發和從事Web開發工作的讀者閱讀,
也可作為高等院校相關專業師生的學習用書和培訓學校的教材。
目錄大綱
第 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