HTML5與CSS網(wǎng)頁設計基礎（第6版 知識點+案例+習題+視頻）

第1 章　互聯(lián)網(wǎng)和萬維網(wǎng)基礎    1
第2 章　HTML 基礎       29
第3 章　網(wǎng)頁設計基礎      75
第4 章　CSS 基礎       117
第5 章　圖形和文本樣式基礎        151
第6 章　CSS 進階       191
第7 章　頁面布局基礎       231
第8 章　靈活響應布局基礎        279
第9 章　表格基礎         341
第10 章　表單基礎       363
第11 章　媒體和交互性基礎      413
第12 章　Web 發(fā)布基礎       447
詳細目錄
第1 章 　互聯(lián)網(wǎng)和萬維網(wǎng)基礎        1
1.1　互聯(lián)網(wǎng)和萬維網(wǎng)     2
互聯(lián)網(wǎng)      2
互聯(lián)網(wǎng)的誕生     2
互聯(lián)網(wǎng)的發(fā)展       2
萬維網(wǎng)的誕生     2
第一個圖形化瀏覽器      3
各種技術的融合    3
1.2　網(wǎng)頁標準和無障礙訪問   4
W3C 推薦標準       4
網(wǎng)頁標準和無障礙訪問       4
無障礙訪問和法律       4
網(wǎng)頁通用設計     5
網(wǎng)絡概述     5
客戶端/ 服務器模型       6
客戶端      7
服務器      7
1.3　Internet 協(xié)議      8
電子郵件協(xié)議     8
超文本傳輸協(xié)議    8
文件傳輸協(xié)議     8
傳輸控制協(xié)議/Internet 協(xié)議   8
IP 地址      9
1.4　統(tǒng)一資源標識符(URI)
和域名      10
URI 和URL       10
域名     10
頂級域名    11
通用頂級域名       11
國家代碼頂級域名     12
域名系統(tǒng)DNS     13
1.5　網(wǎng)上的信息     14
網(wǎng)上的信息可靠嗎？    14
網(wǎng)上的信息是最新的嗎？    14
有沒有指向額外資源的鏈接？    14
是維基百科嗎？      15
使用網(wǎng)上信息時的道德規(guī)范     15
1.6　HTML 概述     16
什么是HTML      16
什么是XML      17
什么是XHTML   17
HTML 的最新版本HTML5       17
1.7　網(wǎng)頁幕后揭秘       18
文檔類型定義(DTD)    18
網(wǎng)頁模板   18
html 元素   19
頁頭區(qū)域   19
主體區(qū)域   19
1.8　第一個網(wǎng)頁     20
新建文件夾       20
保存文件   21
測試網(wǎng)頁   23
復習和練習      24
第2 章　HTML 基礎        29
2.1　標題元素    30
無障礙訪問和標題     31
HTML5 更多的標題選項      31
2.2　段落元素    32
對齊     33
2.3　換行和水平標尺   34
換行元素   34
水平標尺元素      35
2.4　塊引用元素     36
2.5　短語元素    38
2.6　有序列表    40
type 屬性、start 屬性和reversed屬性     40
2.7　無序列表    42
2.8　描述列表    44
2.9　特殊實體字符       46
2.10　HTML 語法校驗     48
2.11　結構元素   50
div 元素     50
header 元素     50
nav 元素     50
main 元素       50
footer 元素      50
2.12　練習使用結構元素       52
2.13　更多結構元素     54
section 元素       54
article 元素     54
aside 元素       54
time 元素   54
2.14　錨元素      56
鏈接目標   57
絕對鏈接   57
相對鏈接   57
將整個塊作為錨      57
無障礙訪問和超鏈接    57
2.15　練習使用鏈接     58
站點地圖   58
2.16　電子郵件鏈接     62
復習和練習      64
第3 章　網(wǎng)頁設計基礎    75
3.1　為目標受眾設計   76
瀏覽器       77
屏幕分辨率       77
3.2　網(wǎng)站組織    78
分級式組織       78
線性組織   79
隨機組織   79
3.3　視覺設計原則       80
重復：在整個設計中重復視覺元素     80
對比：添加視覺刺激和吸引注意力     81
近似：分組相關項目    81
對齊：對齊元素實現(xiàn)視覺上的統(tǒng)一     81
3.4　提供無障礙訪問   82
通用設計和增強無障礙訪問的受益者       82
無障礙設計有助于提高在搜索引擎中的排名      82
法律規(guī)定   83
無障礙設計的熱潮     83
3.5　文本的使用     84
文本設計的注意事項    84
3.6　調色板     86
十六進制顏色值      86
網(wǎng)頁安全色       87
無障礙設計和顏色     87
3.7　針對目標受眾進行設計      88
面向所有人       88
面向老年人       88
面向兒童   89
面向年輕人       89
3.8　選擇顏色方案       90
以一張圖片為基礎的方案    90
色輪     90
變深、變淺和變灰     91
單色     91
相似色       92
互補色       92
分散互補色       92
三色     93
四色     93
實現(xiàn)顏色方案      93
3.9　使用圖片和多媒體      94
文件大小和圖片尺寸    94
抗鋸齒/ 鋸齒化文本的問題      94
只使用必要的多媒體    95
提供替代文本      95
3.10　更多設計考慮     96
移動設備   96
適當留白   96
視差滾動   97
目前的扁平化網(wǎng)頁設計趨勢     97
3.11　導航設計   98
網(wǎng)站要易于導航      98
導航欄       98
面包屑導航       98
圖片導航   99
動態(tài)導航   99
站點地圖   99
站點搜索功能      99
3.12　線框和頁面布局      100
3.13　固定和流動布局      102
固定布局      102
流動布局      102
3.14　為移動網(wǎng)絡設計      104
移動設備設計考慮      104
為移動優(yōu)化布局       104
為移動優(yōu)化導航       105
為移動優(yōu)化圖片       105
為移動優(yōu)化文本       105
3.15　靈活響應的網(wǎng)頁設計      106
3.16　網(wǎng)頁設計最佳實踐     108
復習和練習        110
第4 章　CSS 基礎        117
4.1　CSS 概述        118
層疊樣式表的優(yōu)點       118
配置CSS 的方法       119
層疊樣式表的“層疊”       119
4.2　CSS 選擇符和聲明       120
CSS 語法基礎    120
background-color 屬性      120
color 屬性     121
配置背景色和文本色       121
4.3　CSS 顏色值語法     122
4.4　配置內聯(lián)CSS     124
style 屬性      124
4.5　配置嵌入CSS     126
style 元素      126
4.6　配置外部CSS     128
link 元素       128
4.7　CSS 的class、id 和
后代選擇符       130
class 選擇符     130
id 選擇符      130
后代選擇符     130
4.8　span 元素       132
span 元素      132
第一部分      132
第二部分      133
4.9　練習使用CSS     134
4.10　層疊     136
4.11　練習使用層疊    138
4.12　CSS 語法校驗   140
復習和練習       142
第5 章　圖形和文本樣式基礎        151
5.1　圖片       152
GIF 圖片       152
JPEG 圖片       153
PNG 圖片     153
WebP 圖片格式      154
流行圖形處理軟件      155
5.2　img 元素   156
用alt 屬性提供無障礙訪問     157
5.3　圖片鏈接       158
無障礙訪問和圖片鏈接      159
5.4　配置背景圖片     160
background-image 屬性       160
同時使用背景顏色和背景圖片     160
瀏覽器如何顯示背景圖片       160
background-attachment 屬性     161
5.5　定位背景圖片     162
background-repeat 屬性       162
定位背景圖片    162
5.6　配置多張背景圖片       164
5.7　用CSS 配置字體       166
font-family 屬性     166
5.8　CSS 文本屬性     168
font-size 屬性     168
font-weight 屬性     168
font-style 屬性    169
line-height 屬性      169
text-align 屬性    169
text-decoration 屬性     169
text-indent 屬性      169
text-transform 屬性      169
letter-spacing 屬性     169
5.9　練習配置圖形和文本   170
5.10　用CSS 配置列表符號     172
圖片作為列表符號      173
5.11　收藏圖標      174
配置收藏圖標    174
5.12　圖像映射     176
map 元素      176
area 元素       176
探索矩形圖像映射      176
5.13　figure 元素和figcaption 元素     178
figure 元素       178
figcaption 元素   178
復習和練習       180
第6 章　CSS 進階        191
6.1　寬度和高度      192
width 屬性       192
min-width 屬性   192
max-width 屬性      193
height 屬性      193
6.2　框模型      194
內容      194
填充      194
邊框      195
邊距      195
框模型實例     195
6.3　邊距和填充      196
margin 屬性     196
padding 屬性      196
6.4　邊框       198
6.5　CSS 圓角       200
6.6　頁面內容居中     202
6.7　CSS 邊框陰影和文本陰影   204
CSS box-shadow 屬性       204
CSS text-shadow 屬性       205
6.8　CSS 屬性background-clip
和background-origin    206
CSS 屬性background-clip   206
CSS 屬性background-origin    207
6.9　background-size 屬性    208
6.10　練習使用CSS 的屬性     210
6.11　CSS 的opacity 屬性    212
6.12　CSS RGBA 顏色      214
6.13　CSS HSLA 顏色       216
色調、飽和度、亮度和alpha     216
HSLA 顏色示例     216
6.14　CSS 漸變     218
線性漸變語法    218
輻射漸變語法    218
CSS 的漸變和漸進式增強       218
復習和練習       220
第7 章　頁面布局基礎       231
7.1　正常流動       232
CSS 布局屬性    233
7.2　浮動       234
float 屬性      234
7.3　清除浮動       236
7.4　溢出       238
overflow 屬性     238
用overflow 屬性清除浮動       238
對比clear 屬性與overflow 屬性   238
用overflow 屬性配置滾動條      239
7.5　CSS 的屬性box-sizing      240
7.6　基本雙欄布局     242
雙欄布局的例子       245
7.7　用無序列表      246
用CSS 的配置無序列表     246
用CSS text-decoration 屬性消除
下劃線     246
7.8　用無序列表實現(xiàn)水平導航   248
CSS 的display 屬性     248
用CSS 配置       248
7.9　用偽類實現(xiàn)CSS 交互性      250
7.10　練習CSS 雙欄布局    252
7.11　用CSS 控制打印     254
打印樣式最佳實踐      254
7.12　CSS 精靈     256
7.13　用CSS 進行定位     258
static 定位     258
fixed 定位     258
相對定位      258
粘性定位      259
絕對定位      260
z-index 屬性       260
7.14　固定位置的導航欄     262
7.15　區(qū)段標識符       264
區(qū)段標識符和FAQ     264
區(qū)段標識符和無障礙訪問      265
使用區(qū)段標識符      265
7.16　單頁網(wǎng)站     266
復習和練習       268
第8 章　靈活響應布局基礎        279
8.1　CSS 靈活框布局     280
配置靈活容器    280
display 屬性     280
flex-wrap 屬性    281
flex-direction 屬性     281
8.2　靈活容器的更多知識   282
流向      282
justify-content 屬性      282
align-items 屬性     283
flex-flow 屬性     283
靈活框和gap 屬性       283
8.3　靈活框圖片庫     284
8.4　配置靈活項      286
比例靈活項     286
order 屬性     287
8.5　練習靈活框技術     288
8.6　CSS 網(wǎng)格布局     290
配置網(wǎng)格容器    290
display 屬性     290
設計網(wǎng)格      290
配置網(wǎng)格列和網(wǎng)格行       291
8.7　網(wǎng)格列、行和間隙       292
網(wǎng)絡布局和gap 屬性   292
order 屬性     292
8.8　雙欄網(wǎng)格頁面布局       294
配置網(wǎng)格列和行       294
配置網(wǎng)格項     295
網(wǎng)格行編號     295
8.9　使用網(wǎng)格區(qū)域的布局   298
grid-area 屬性     298
grid-template-areas 屬性      298
配置帶空白區(qū)域的網(wǎng)格      299
grid-template 屬性     301
8.10　漸進式增強網(wǎng)格      302
CSS 特性查詢    302
8.11　用靈活框和網(wǎng)格來居中      304
8.12　viewport meta 標記     306
8.13　CSS 媒體查詢   308
什么是媒體查詢       308
使用link 元素的媒體查詢例子     308
使用@media 規(guī)則的媒體查詢示例    309
移動優(yōu)先      309
8.14　用媒體查詢實現(xiàn)靈活響應的布局   310
8.15　用媒體查詢實現(xiàn)靈活響應的網(wǎng)格
布局     316
8.16　用CSS 實現(xiàn)靈活圖像     320
8.17　picture 元素       322
source 元素      322
8.18　靈活img 元素屬性     324
sizes 屬性      324
srcset 屬性       324
loading 屬性       325
8.19　測試移動顯示   326
用桌面瀏覽器測試      326
靈活測試工具    326
瀏覽器內置工具       327
更多移動測試工具      327
復習和練習       328
第9 章　表格基礎       341
9.1　表格概述       342
table 元素      342
border 屬性      342
表題      343
9.2　表行、單元格和表頭   344
9.3　跨行和跨列      346
9.4　配置無障礙訪問表格   348
headers 屬性和id 屬性     349
scope 屬性       349
9.5　用CSS 配置表格樣式       350
9.6　CSS 結構性偽類     352
配置首字母     353
9.7　配置表格區(qū)域     354
復習和練習       356
第10 章　表單基礎        363
10.1　表單概述     364
form 元素      364
表單控件      365
10.2　input 元素和文本框    366
文本框     366
10.3　提交按鈕和重置按鈕      368
提交按鈕      368
重置按鈕      368
示例表單      368
10.4　復選框和單選鈕      370
復選框     370
單選鈕     371
10.5　textarea 元素      372
10.6　select 元素和option 元素   374
select 元素       374
option 元素      374
10.7　label 元素     376
10.8　fieldset 和legend 元素     378
fieldset 元素     378
legend 元素      378
無障礙訪問和表單      379
10.9　用CSS 配置表單樣式     380
屬性選擇符     381
10.10　CSS 網(wǎng)格布局表單   382
10.11　服務器端處理      384
隱私和表單     385
10.12　表單練習      386
10.13　密碼、隱藏和文件上傳控件   388
密碼框     388
隱藏輸入控件    388
文件上傳控件    388
10.14　更多文本表單控件   390
E-mail 地址輸入表單控件  390
URL 表單輸入控件     390
電話號碼表單輸入控件     391
搜索詞輸入表單控件       391
10.15　datalist 元素     392
10.16　表單輸入控件     394
slider 表單輸入控件    394
spinner 表單輸入控件       394
漸進式增強     395
10.17　日歷和顏色池控件   396
日期和時間表單控件       396
顏色池表單控件       397
10.18　更多表單練習     398
復習和練習       400
第11 章　媒體和交互性基礎      413
11.1　音頻和視頻入門       414
多媒體和瀏覽器兼容問題       414
容器和codec      414
11.2　audio 和source      416
audio 元素    416
source 元素      416
音頻和無障礙訪問      417
11.3　video 和source      418
video 元素    418
source 元素      418
視頻和無障礙訪問      419
11.4　練習視頻      420
我可以使用網(wǎng)上找到的任何
東西嗎？      421
11.5　iframe 元素     422
iframe 元素      422
11.6　CSS 屬性transform     424
CSS 旋轉變換    424
CSS 的伸縮變換       424
11.7　CSS 屬性transition     426
11.8　練習使用過渡    428
11.9　練習使用CSS 下拉菜單    430
11.10　details 和summary    432
details 元素      432
summary 元素    432
11.11　JavaScript 和jQuery       434
JavaScript      434
jQuery      435
11.12　HTML5 的API       436
地理位置      436
Web 存儲      436
漸進式Web 應用程序      436
用canvas 元素繪圖     437
復習和練習       438
第12 章　Web 發(fā)布基礎       447
12.1　文件組織     448
相對鏈接的例子       448
12.2　注冊域名     450
選擇域名      450
注冊域名      451
12.3　選擇Web 主機      452
選擇虛擬主機    452
12.4　安全套接字層(SSL)   454
數(shù)字證書      455
12.5　用FTP 發(fā)布       456
FTP 應用程序    456
用FTP 連接       456
使用FTP       456
啟動和登錄     456
文件上傳、下載和刪除      457
進一步探索     457
12.6　提交到搜索引擎      458
搜索引擎的組成       458
機器人     458
數(shù)據(jù)庫     458
搜索表單      458
在搜索引擎中列出自己的網(wǎng)站     459
12.7　搜索引擎優(yōu)化   460
關鍵字     460
網(wǎng)頁標題      460
標題標記      460
描述      460
meta 標記      460
鏈接      461
文件名     461
HTTPS 協(xié)議       461
圖片和多媒體    461
有效代碼      461
有價值的內容    461
12.8　無障礙訪問測試      462
通用設計和無障礙訪問      462
Web 無障礙訪問標準       462
Section 508 條款       462
WCAG     462
測試無障礙設計相容性      463
自動無障礙設計測試       463
手動無障礙測試       463
12.9　可用性測試       464
進行可用性測試       464
復習和練習       466
附錄       473
附錄A　HTML5 速查表      474
附錄B　CSS 速查表   478
附錄C　WCAG 2.1 快速參考      484
附錄D　ARIA 地標角色      486
附錄E　Web 安全調色板     488