第1 章互聯網和萬維網基礎    1
第2 章HTML 基礎       29
第3 章網頁設計基礎      75
第4 章CSS 基礎       117
第5 章圖形和文本樣式基礎        151
第6 章CSS 進階       191
第7 章頁面布局基礎       231
第8 章靈活響應布局基礎        279
第9 章表格基礎         341
第10 章表單基礎       363
第11 章媒體和交互性基礎      413
第12 章Web 發布基礎       447

詳細目錄
第1 章 互聯網和萬維網基礎        1
1.1互聯網和萬維網     2
互聯網      2
互聯網的誕生     2
互聯網的發展       2
萬維網的誕生     2
個圖形化瀏覽器      3
各種技術的融合    3
1.2網頁標準和無障礙訪問   4
W3C 推薦標準       4
網頁標準和無障礙訪問       4
無障礙訪問和法律       4
網頁通用設計     5
網絡概述     5
客戶端/ 服務器模型       6
客戶端      7
服務器      7
1.3Internet 協議      8
電子郵件協議     8
超文本傳輸協議    8
文件傳輸協議     8
傳輸控制協議/Internet 協議   8
IP 地址      9
1.4統一資源標識符(URI)
和域名      10
URI 和URL       10
域名     10
域名    11
通用域名       11
國家代碼域名     12
域名繫統DNS     13
1.5網上的信息     14
網上的信息可靠嗎？    14
網上的信息是的嗎？    14
有沒有指向額外資源的鏈接？    14
是維基百科嗎？      15
使用網上信息時的道德規範     15
1.6HTML 概述     16
什麼是HTML      16
什麼是XML      17
什麼是XHTML   17
HTML 的版本HTML5       17
1.7網頁幕後揭秘       18
文檔類型定義(DTD)    18
網頁模板   18
ht素   19
頁頭區域   19
主體區域   19
1.8個網頁     20
新建文件夾       20
保存文件   21
測試網頁   23
復習和練習      24
第2 章HTML 基礎        29
2.1素    30
無障礙訪問和標題     31
HTML5 更多的標題選項      31
2.2素    32
對齊     33
2.3換行和水平標尺   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.10HTML 語法校驗     48
2.11素   50
d素     50
head素     50
n素     50
ma素       50
foot素      50
2.12練習使素       52
2.13更素     54
secti素       54
artic素     54
asi素       54
ti素   54
2.1素      56
鏈接目標   57
鏈接   57
相對鏈接   57
將整個塊作為錨      57
無障礙訪問和超鏈接    57
2.15練習使用鏈接     58
站點地圖   58
2.16電子郵件鏈接     62
復習和練習      64
第3 章網頁設計基礎    75
3.1為目標受眾設計   76
瀏覽器       77
屏幕分辨率       77
3.2網站組織    78
分級式組織       78
線性組織   79
隨機組織   79
3.3視覺設計原則       80
重復：在整個設計中重素     80
對比：添加視覺刺激和吸引注意力     81
近似：分組相關項目    81
對齊素實現視覺上的統一     81
3.4提供無障礙訪問   82
通用設計和增強無障礙訪問的受益者       82
無障礙設計有助於提高在搜索引擎中的排名      82
法律規定   83
無障礙設計的熱潮     83
3.5文本的使用     84
文本設計的注意事項    84
3.6調色板     86
十六進制顏色值      86
網頁安全色       87
無障礙設計和顏色     87
3.7針對目標受眾進行設計      88
面向所有人       88
面向老年人       88
面向兒童   89
面向年輕人       89
3.8選擇顏色方案       90
以一張圖片為基礎的方案    90
色輪     90
變深、變淺和變灰     91
單色     91
相似色       92
互補色       92
分散互補色       92
三色     93
四色     93
實現顏色方案      93
3.9使用圖片和多媒體      94
文件大小和圖片尺寸    94
抗鋸齒/ 鋸齒化文本的問題      94
隻使用必要的多媒體    95
提供替代文本      95
3.10更多設計考慮     96
移動設備   96
適當留白   96
視差滾動   97
目前的扁平化網頁設計趨勢     97
3.11導航設計   98
網站要易於導航      98
導航欄       98
面包屑導航       98
圖片導航   99
動態導航   99
站點地圖   99
站點搜索功能      99
3.12線框和頁面布局      100
3.13固定和流動布局      102
固定布局      102
流動布局      102
3.14為移動網絡設計      104
移動設備設計考慮      104
為移動優化布局       104
為移動優化導航       105
為移動優化圖片       105
為移動優化文本       105
3.15靈活響應的網頁設計      106
3.16網頁設計實踐     108
復習和練習        110
第4 章CSS 基礎        117
4.1CSS 概述        118
層疊樣式表的優點       118
配置CSS 的方法       119
層疊樣式表的“層疊”       119
4.2CSS 選擇符和聲明       120
CSS 語法基礎    120
background-color 屬性      120
color 屬性     121
配置背景色和文本色       121
4.3CSS 顏色值語法     122
4.4配置內聯CSS     124
style 屬性      124
4.5配置嵌入CSS     126
sty素      126
4.6配置外部CSS     128
li素       128
4.7CSS 的class、id 和
後代選擇符       130
class 選擇符     130
id 選擇符      130
後代選擇符     130
4.8sp素       132
sp素      132
部分      132
第二部分      133
4.9練習使用CSS     134
4.10層疊     136
4.11練習使用層疊    138
4.12CSS 語法校驗   140
復習和練習       142
第5 章圖形和文本樣式基礎        151
5.1圖片       152
GIF 圖片       152
JPEG 圖片       153
PNG 圖片     153
WebP 圖片格式      154
流行圖形處理軟件      155
5.2i素   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.8CSS 文本屬性     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
m素      176
ar素       176
探索矩形圖像映射      176
5.13figu素和figcapti素     178
figu素       178
figcapti素   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.5CSS 圓角       200
6.6頁面內容居中     202
6.7CSS 邊框陰影和文本陰影   204
CSS box-shadow 屬性       204
CSS text-shadow 屬性       205
6.8CSS 屬性background-clip
和background-origin    206
CSS 屬性background-clip   206
CSS 屬性background-origin    207
6.9background-size 屬性    208
6.10練習使用CSS 的屬性     210
6.11CSS 的opacity 屬性    212
6.12CSS RGBA 顏色      214
6.13CSS HSLA 顏色       216
色調、飽和度、亮度和alpha     216
HSLA 顏色示例     216
6.14CSS 漸變     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.5CSS 的屬性box-sizing      240
7.6基本雙欄布局     242
雙欄布局的例子       245
7.7用無序列表      246
用CSS 的配置無序列表     246
用CSS text-decoration 屬性消除
下劃線     246
7.8用無序列表實現水平導航   248
CSS 的display 屬性     248
用CSS 配置       248
7.9用偽類實現CSS 交互性      250
7.10練習CSS 雙欄布局    252
7.11用CSS 控制打印     254
打印樣式實踐      254
7.12CSS 精靈     256
7.13用CSS 進行定位     258
static 定位     258
fixed 定位     258
相對定位      258
粘性定位      259
定位      260
z-index 屬性       260
7.14固定位置的導航欄     262
7.15區段標識符       264
區段標識符和FAQ     264
區段標識符和無障礙訪問      265
使用區段標識符      265
7.16單頁網站     266
復習和練習       268
第8 章靈活響應布局基礎        279
8.1CSS 靈活框布局     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.6CSS 網格布局     290
配置網格容器    290
display 屬性     290
設計網格      290
配置網格列和網格行       291
8.7網格列、行和間隙       292
網絡布局和gap 屬性   292
order 屬性     292
8.8雙欄網格頁面布局       294
配置網格列和行       294
配置網格項     295
網格行編號     295
8.9使用網格區域的布局   298
grid-area 屬性     298
grid-template-areas 屬性      298
配置帶空白區域的網格      299
grid-template 屬性     301
8.10漸進式增強網格      302
CSS 特性查詢    302
8.11用靈活框和網格來居中      304
8.12viewport meta 標記     306
8.13CSS 媒體查詢   308
什麼是媒體查詢       308
使用li素的媒體查詢例子     308
使用@media 規則的媒體查詢示例    309
移動優先      309
8.14用媒體查詢實現靈活響應的布局   310
8.15用媒體查詢實現靈活響應的網格
布局     316
8.16用CSS 實現靈活圖像     320
8.17pictu素       322
sour素      322
8.18靈活i素屬性     324
sizes 屬性      324
srcset 屬性       324
loading 屬性       325
8.19測試移動顯示   326
用桌面瀏覽器測試      326
靈活測試工具    326
瀏覽器內置工具       327
更多移動測試工具      327
復習和練習       328
第9 章表格基礎       341
9.1表格概述       342
tab素      342
border 屬性      342
表題      343
9.2表格和表頭   344
9.3跨行和跨列      346
9.4配置無障礙訪問表格   348
headers 屬性和id 屬性     349
scope 屬性       349
9.5用CSS 配置表格樣式       350
9.6CSS 結構性偽類     352
配置首字母     353
9.7配置表格區域     354
復習和練習       356
第10 章表單基礎        363
10.1表單概述     364
fo素      364
表單控件      365
10.2inp素和文本框    366
文本框     366
10.3提交按鈕和重置按鈕      368
提交按鈕      368
重置按鈕      368
示例表單      368
10.4復選框和單選鈕      370
復選框     370
單選鈕     371
10.5textar素      372
10.6sele素和opti素   374
sele素       374
opti素      374
10.7lab素     376
10.8fieldset 和lege素     378
fields素     378
lege素      378
無障礙訪問和表單      379
10.9用CSS 配置表單樣式     380
屬性選擇符     381
10.10CSS 網格布局表單   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.15datali素     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.2audio 和source      416
aud素    416
sour素      416
音頻和無障礙訪問      417
11.3video 和source      418
vid素    418
sour素      418
視頻和無障礙訪問      419
11.4練習視頻      420
我可以使用網上找到的任何
東西嗎？      421
11.5ifra素     422
ifra素      422
11.6CSS 屬性transform     424
CSS 旋轉變換    424
CSS 的伸縮變換       424
11.7CSS 屬性transition     426
11.8練習使用過渡    428
11.9練習使用CSS 下拉菜單    430
11.10details 和summary    432
detai素      432
summa素    432
11.11JavaScript 和jQuery       434
JavaScript      434
jQuery      435
11.12HTML5 的API       436
地理位置      436
Web 存儲      436
漸進式Web 應用程序      436
用canv素繪圖     437
復習和練習       438
第12 章Web 發布基礎       447
12.1文件組織     448
相對鏈接的例子       448
12.2注冊域名     450
選擇域名      450
注冊域名      451
12.3選擇Web 主機      452
選擇虛擬主機    452
12.4安全套接字層(SSL)   454
數字證書      455
12.5用FTP 發布       456
FTP 應用程序    456
用FTP 連接       456
使用FTP       456
啟動和登錄     456
文件上傳、下載和刪除      457
進一步探索     457
12.6提交到搜索引擎      458
搜索引擎的組成       458
機器人     458
數據庫     458
搜索表單      458
在搜索引擎中列出自己的網站     459
12.7搜索引擎優化   460
關鍵字     460
網頁標題      460
標題標記      460
描述      460
meta 標記      460
鏈接      461
文件名     461
HTTPS 協議       461
圖片和多媒體    461
有效代碼      461
有價值的內容    461
12.8無障礙訪問測試      462
通用設計和無障礙訪問      462
Web 無障礙訪問標準       462
Section 508 條款       462
WCAG     462
測試無障礙設計相容性      463
自動無障礙設計測試       463
手動無障礙測試       463
12.9可用性測試       464
進行可用性測試       464
復習和練習       466
附錄       473
附錄AHTML5 速查表      474
附錄BCSS 速查表   478
附錄CWCAG 2.1 快速參考      484
附錄DARIA 地標角色      486
附錄EWeb 安全調色板     488

《HTML5 與CSS3 網頁設計基礎》適合網頁設計或前端開發初級課程。大多數主題都用兩頁篇幅進行講解，在指出關鍵點的同時，一般還包含動手實作。本書覆蓋網頁設計師需要掌握的基礎知識，具體涉及以下主題：
? 互聯網和萬維網的概念
? 用HTML5 創建網頁
? 用層疊樣式表(CSS) 配置文本、顏色和網頁布局
? 配置網頁上的圖片和多媒體
? 探索CSS Flexbox和CSS網格布局繫統
? 網頁設計實踐
? 創建在桌面和移動設備上都能良好顯示的網頁
? 對無障礙訪問、可用性和搜索引擎優化的考量
? 獲取域名和主機
? 發布到網上
本書中文版的學生文件可以從配套網站https://bookzhou.com 下載( 區分大小寫)，動手實作的原始文件和解決方案以及案例分析的原始文件都可以在此下載。
在本書第5 版取得極大成功之後，第6 版新增了以下特色：
? 更豐富的動手實作
? 全面更新了示例代碼、案例學習和網上資源
? 更新了HTM素和屬性
? 擴充了網頁布局設計和靈活響應網頁設計技術的內容
? 擴充了CSS靈活布局模塊(Flexbox) 和CSS網格布局的內容
? 擴充了靈活響應圖像技術的內容，加入了對延遲加載的介紹
? 更新了HTML5 和CSS參考資源
本書特色
立足於當下，展望未來。本書采用獨特的教學方式，使學生在學習網頁設計技能的同時，掌握新的HTML5 和CSS 編碼技術，以迎接未來的挑戰。
精心挑選主題。本書既傳授“硬”技能，比如HTML5 和層疊樣式表( 第1 章~ 第2 章，第4 章~ 第11 章)，也傳授“軟”技能，比如網頁設計( 第3 章) 和發布到網上( 第12 章)。打下良好的基礎之後，學生更容易實現自己的職業夢想成為一名網頁設計師。使用本書的學生和老師會發現，課程變得更有趣了。學生在創建網頁和網站時，可以一起討論、綜合和運用軟硬技能。大多數主題都用兩頁的篇幅來講解，除了快速提供需要掌握的知識點，還為學生及時提供動手實作來鞏固所學到的知識。
大多數主題隻有兩頁篇幅。大多數主題都用一個簡潔的、兩頁篇幅的小節進行講述。許多小節還包含馬上就可以開始練習的動手實作，旨在幫助鞏固新學的技能或概念。這種精心設計對學業沉重的學生尤其有用，因為他們需要在極短的時間內掌握關鍵概念。
動手實作。網頁開發是一門技能，隻有通過動手實作纔能更好地掌握。本書十分強調實際動手能力的培養，因而每章都有動手實作練習題、章末練習題以及真實的案例學習。
網站案例學習。從第2 章開始，案例學習將貫穿全書。它的作用是鞏固每章所學的技能。教師資源中心提供了案例的示例解決方案，網址是https://pearsonhighered.com/felke。
聚焦於網頁設計。大多數章都提供額外的活動來探索與本章有關的網頁設計主題。這些活動可用於鞏固、擴展和增強課程主題。
FAQ。在我的網頁開發課堂中，學生經常會問到一些同樣的問題，所以我在書中列出了這些問題，並用FAQ 標志來注明。
聚焦於無障礙設計。開發無障礙網頁的重要性日益增強，所以書中將穿插無障礙網頁提示，這個特殊標記可以讓您更方便地找到這些信息。
聚焦於道德與倫理。本書使用特殊的道德規範標記來注明與網頁開發有關的道德規範話題。
簡明提示。提供有用的背景資料或者幫助提高生產力。
深入探索。這個特殊標記代表可以進行深入探索的網絡資源，進一 步了解當前主題。
參考資料。附錄提供了豐富的參考資料，包括HTML5 參考、CSS 參考、WCAG 2.1快速參考以及ARIA 地標角色概述。
英文版視頻講解(Video Note)。講解關鍵編程概念和技術，演示從設計到編碼的問題解決過程。視頻講解有利於學生自學自己感興趣的主題，支持選擇、播放、倒退、快進和暫停。每當看到 這樣的圖標，就表示當前主題有對應的視頻講解。視頻列表可從本書中文版配套網站獲取，網址是http://pan.baidu.com/s/1yd43W。注意，由於是英文視頻，所以為了方便索引，書中保留了這些視頻的英文名稱。
補充材料
學生資源。本書中文版讀者請訪問https://bookzhou.com 獲取學生資源( 含視頻講解)。
作者網站。除了出版社為本書提供的配套網站，作者還專門創建了一個網站，網址為https://www.webdevbasics.net。該網站擁有許多額外資源，包括調色板和學習/ 復習遊戲，還為每一章都單獨建了一個網頁，提供這一章的示例、鏈接和更新信息。該網站由作者自行維護，和出版商無利益關繫。
致謝
特別感謝培生的工作伙伴，他們是特蕾·約翰遜、卡羅爾·施耐德、司各特·迪薩諾和艾琳·蘇利文。
感謝我的家人，尤其是我的“另一半”，感謝他的耐心、關愛、支持和鼓勵。後還要特別以此紀念我的父親，我們永遠想念他。
作者簡介
特麗• 安• 菲爾克- 莫裡斯(Terry Ann Felke-Morris) 博士是哈珀學院( 位於伊利諾伊州帕拉汀市) 的榮譽退休教授。她擁有教育學博士學位和信息繫統理學碩士學位，還通過了很多認證，包括Adobe 認證Dreamweaver 8 開發者、WOW 認證合作伙伴Webmaster、Microsoft 認證專家、Master CIW Designer 和CIW 認證講師。
為了表彰她在設計CIS 網頁開發大學項目與課程上的貢獻，哈珀學院授予她Glenn A.Reich 教育技術紀念獎。2006 年，她獲得了Blackboard Greenhouse Exemplary 網絡課程獎，以表彰她在學院積極使用互聯網技術。莫裡斯博士在2008 年獲得了兩個：教育技術委員會頒發的電子教學優秀員工獎和MERLOT 網上示範教學資源獎。
莫裡斯博士擁有二十多年的工商業及信息技術從業經歷。她於1996 年發布了自己的個網站，並從此與網絡結下不解之緣。作為網頁標準項目任務組的成員，她一直致力於網頁標準的推廣。她協助哈珀學院設立了網頁證書和學位課程，並擔任骨干教員。她還是另外一本經典教材《學習HTML5》繫列版本( 目前已到第10 版)的作者。有關她的更多信息，請訪問http://terrymorris.net。