HTML5與CSS網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)（第6版 知識(shí)點(diǎn)+案例+習(xí)題+視頻）

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