學習 HTML5 (第7版) 学习HTML5(第7版)

作者：Terry Felke-Morris（美）

Terry Felke-Morris 
她一名計算機信息系統教授，來自伊利諾斯州帕拉廷市的威廉雷尼哈珀學院。她擁有教育博士學位、信息系統理科碩士學位，以及包括Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster、 MicrosoftCertified Professional、Master CIW Designer，和CIW Certified Instructor在內的眾多認證證書。
Felke-Morris博士獲得過威廉雷尼哈珀學院頒發的教學技術Glenn A. Reich紀念獎，以表彰她在學院的網頁開發程序與課程中的設計工作。2006年，她因為在教學中出色地運用互聯網技術而榮獲Blackboard Greenhouse的在線教學示範將。Felke-Morris博士在2008年收穫了兩個國際獎項：教學技術委員會的電子教學傑出能力獎以及MERLOT的在線教學資源示範獎。
因其在商務與工業領域超過25年的信息技術經驗，Felke-Morris博士於1996年開通了她的第一個個人網站，並且維護至今。她長期致力於萬維網標準的提升，已經成為萬維網標準項目教育任務項目組的成員。Felke-Morris博士是威廉雷尼哈珀學院網頁開發認證與學位認定項目組的資深成員。

潘玉琪
同濟修智能交通，學成後入行IT，與數據深交多年，業餘時間不是窩在書房裡看看寫寫畫畫，就是鑽到廚房裡折騰鍋碗瓢盆，被譽為“交通圈裡最會做菜的IT攻城獅”，實為一枚如假包換的程序媛。平生最大的願望是一路逛吃逛吃走飯遍天下，然後回家山寨克隆另立門派。熱愛美食與電影，業餘在“小築飯” 碼字寫隨筆。代表譯著有《極客趣談I：創意料理語營養美食》與《SQL Server 2012從入門到精通》。

第1章互聯網與萬維網介紹1 

1.1互聯網與萬維網2 
互聯網2 
互聯網的誕生2 
互聯網的發展2 
萬維網的誕生2 
第一個圖形化瀏覽器3 
技術融合3 
誰在運行互聯網？3 
內聯網和外部網4 
1.2萬維網標準與無障礙訪問5 
W3C推薦標準5 
萬維網標準與無障礙訪問5 
無障礙訪問與法律5 
萬維網通用設計6 
1.3萬維網上的信息7 
網絡信息與可靠性7 
有道德地使用網上的信息8 
自測題1.1 9 
1.4網絡概述9 
1.5客戶端/服務器模型10 
1.6互聯網協議11 
文件傳輸協議(FTP) 12 
電子郵件協議12 
超文本傳輸協議(HTTP) 12 
傳輸控制協議/互聯網協議
(TCP/IP) 12 
1.7統一資源定位符和域名14 
URI和URL 14 
域名14 
1.8標記語言16 
標准通用標記語言(SGML) 17 
超文本標記語言(HTML) 17
可擴展標記語言(XML) 17 
可擴展超文本標記語言
(XHMTL) 17 
HTML5-HTML語言的最新版本17 
自測題1.2 18 
1.9萬維網上的流行應用18 
電子商務18 
移動接入18 
博客18 
維基19 
社交網絡19 
雲計算20 
RSS 20 
播客20 
Web 2.0 20 
本章小結22 
關鍵術語22 
複習題23 
動手練習24 
網站實例研究24 
關注網頁設計25 

第2章HTML基礎27 

2.1 HTML概覽28 
HTML 28 
XML 28 
XHTML 29 
HTML5 29 
2.2文檔類型定義30 
2.3網頁模板30 
2.4 HTML元素30 
2.5四大元素head、title、meta 
和body 31 
頭部(Head) 31 
主體(Body) 31 
2.6你的第一張網頁32 
動手實踐2.1 32 
自測題2.1 35
2.7標題元素36 
動手實踐2.2 36 
無障礙訪問與標題37 
2.8段落元素38 
動手實踐2.3 38 
對齊39 
2.9換行元素39 
動手實踐2.4 40 
2.10塊引用元素40 
動手實踐2.5 41 
2.11短語元素42 
2.12有序列表43 
類型(Type)、起始值(Start)和
倒序*(Reversed)屬性44 
動手實踐2.6 44 
2.13無序列表45 
動手實踐2.7 46 
2.14描述列表47 
動手實踐2.8 47 
自測題2.2 48 
2.15特殊字符49 
動手實踐2.9 49 
2.16結構元素51 
分區元素(Div) 51 
HTML結構性元素51 
頁眉元素(Header) 51 
導航鏈接元素(Nav) 51 
主體元素(Main) 51 
頁腳元素(Footer) 52 
動手實踐2.10 52 
2.17錨元素53 
動手實踐2.11 54 
絕對超鏈接54 
相對超鏈接55 
網站地圖55
動手實踐2.12 55 
電子郵件超鏈接(E-Mail) 58 
動手實踐2.13 59 
無障礙訪問與超鏈接60 
塊級錨60 
自測題2.3 61 
2.18 HTML驗證61 
動手實踐2.14 61 
本章小結64 
關鍵術語64 
複習題65 
學以致用66 
動手練習67 
萬維網探秘68 
網站實例研究68 

第3章用層疊樣式表CSS配置顏色

與文本81 
3.1層疊樣式表概覽82 
層疊樣式表的優點82 
配置層疊樣式表83 
樣式選擇器與聲明83 
背景顏色屬性83 
顏色屬性84 
配置背景顏色與文本顏色84 
3.2為網頁配色86 
十六進制的顏色碼86 
網頁安全色87 
配色的CSS語法87 
3.3帶樣式屬性的內聯CSS 88 
樣式屬性(Style ) 88 
動手實踐3.1 88 
3.4帶樣式元素的內嵌CSS 90 
樣式(Style)元素90 
動手實踐3.2 91 
自測題3.1 93 
3.5用CSS配置文本93
字體系列屬性(font-family) 93 
更多的CSS字體屬性95 
CSS3文本陰影屬性97 
動手實踐3.3 97 
3.6 CSS類、id與派生選擇器100 
類選擇器100 
id選擇器101 
動手實踐3.4 101 
派生選擇器102 
3.7 Span元素103 
動手實踐3.5 103 
3.8使用外部樣式表104 
鏈接元素104 
動手實踐3.6 105 
動手實踐3.7 106 
自測題3.2 108 
3.9用CSS實現HTML元素居中109 
動手實踐3.8 110 
3.10層疊111 
動手實踐3.9 112 
3.12 CSS驗證113 
動手實踐3.10 114 
本章小結116 
關鍵術語116 
複習題116 
動手練習119 
萬維網探秘121 
關注網頁設計121 
網站實例研究122 

第4章視覺元素與圖像131 

4.1配置線條與邊框132 
水平分隔線元素132 
動手實踐4.1 132 
邊框屬性與間距屬性132
動手實踐4.2 136 
自測題4.1 138 
4.2圖像類型138 
圖像互換格式(GIF)圖片138 
聯合照片專家小組(JPEG)圖像139 
可移植網絡圖形格式(PNG) 
圖像141 
新型的WebP圖像格式141 
4.3圖像元素141 
無障礙訪問和圖像143 
圖像超鏈接143 
動手實踐4.3 143 
優化Web圖像145 
動手實踐4.4 146 
4.4 HTML5視覺元素147 
HTML5 Figure元素147 
HTML5 Figcaption元素148 
動手實踐4.5 148 
HTML5 Meter元素149 
HTML5 Progress元素150 
4.5背景圖像151 
background-image屬性151 
同時配置背景色和背景圖151 
瀏覽器顯示背景圖151 
background-repeat屬性151 
background-position屬性153 
動手實踐4.6 153 
background-attachment屬性154 
自測題4.2 155 
4.6更多有關圖像的知識155
圖像映射155 
映射元素155 
區域元素155 
探索矩形圖像映射156 
收藏圖標157 
配置收藏圖標157 
動手實踐4.7 158 
圖像切割158 
CSS精靈159 
4.7圖片來源與使用原則159 
圖片來源159 
圖像使用指導原則160 
無障礙訪問和視覺元素161 
自測題4.3 161 
4.8 CSS3視覺效果162 
CSS3 background-clip屬性162 
CSS3 background-origin屬性163 
CSS3 background-size屬性163 
CSS3中對多張背景圖像的處理165 
動手實踐4.8 166 
CSS3圓角效果166 
動手實踐4.9 167 
CSS3 box-shadow屬性168 
動手實踐4.10 169 
CSS3的opacity屬性170 
動手實踐4.11 171 
CS3 RGBA顏色172 
動手實踐4.12 174 
CSS3 HSLA顏色174 
動手實踐4.13 176 
CSS3漸變177 
本章小結180
關鍵術語180 
複習題181 
學以致用182 
動手練習183 
萬維網探秘184 
關注網頁設計184 
網站實例研究185 

第5章網頁設計197 

5.1為目標受眾群體而設計198 
5.2網站的組織結構199 
分層結構199 
線性結構200 
隨機結構201 
5.3視覺效果設計原則201 
重複：在整個設計中重複使用
視覺組件201 
對比：提升視覺刺激效果，吸引
注意力202 
鄰近：組合相關的項目202 
對齊：將元素對齊形成視覺上的
統一效果203 
5.4無障礙訪問設計203 
誰將從通用設計與無障礙訪問
設計中獲益？203 
無障礙訪問設計有利於被搜索引擎
檢索到204 
做正確的事：提供無障礙訪問204 
5.5適合於Web的寫作風格205 
精心組織內容205 
字體選擇205 
字體大小206 
字體粗細206 
文字顏色對比206 
文本行的長度206 
對齊206
超鏈接中的文本206 
閱讀級別207 
拼寫和語法207 
5.6顏色的使用207 
基於圖像的配色方案207 
色輪208 
基於色輪的配色方案209 
對配色方案進行補充210 
無障礙訪問與顏色211 
顏色與目標受眾211 
自測題5.1 214 
5.7圖片與多媒體的應用214 
圖像的文件大小和尺寸214 
多媒體中的抗鋸齒或鋸齒文字215 
僅使用必要的多媒體215 
提供替代文本215 
5.8更多設計方面的注意事項216 
加載時間216 
首屏217 
充分留白217 
避免水平滾動217 
瀏覽器217 
屏幕分辨率218 
5.9導航設計218 
易於導航218 
導航欄218 
麵包屑導航218 
利用圖形實現導航219 
跳過重複導航鏈接219 
動態導航220 
站點地圖220 
站內檢索功能221 
5.10頁面佈局設計221 
線框和頁面佈局221 
頁面佈局設計技術223
5.11設計適應於移動設備的Web 225 
三種方法226 
設計移動設備端網站時需要考慮
的因素226 
桌面網站與移動網站示例226 
響應式網頁設計228 
5.12網頁設計最佳實踐核對清單230 
自測題5.2 232 
本章小結233 
關鍵術語233 
複習題234 
萬維網探秘236 
關注網頁設計237 
網站實例研究238 
Web項目239 

第6章頁面佈局241 

6.1盒模型242 
內容242 
內邊距242 
邊框242 
外邊距242 
Margin屬性243 
盒模型的作用243 
6.2正常流244 
動手實踐6.1 245 
6.3 CSS浮動247 
動手實踐6.2 248 
浮動元素和正常流248 
6.4 CSS：清除浮動249 
clear屬性249 
overflow屬性250 
自測題6.1 252 
6.5 CSS雙欄頁面佈局252 
左欄為導航的雙欄佈局252 
雙欄頁面，頂部是頁眉，左側
為導航254 
百尺竿頭還需更進一步255 
6.6無序列表中的超鏈接255 
用CSS配置列表標記256 
用無序列表組織垂直導航區域257 
用無序列表組織水平導航區域258 
6.7用CSS偽類增加交互效果259 
動手實踐6.3 260 
6.8 CSS雙欄佈局實戰262 
動手實踐6.4 262 
6.9頁眉文本圖像替換265 
改進的頁眉文本圖像替換技術266 
動手實踐6.5 266 
6.10實戰圖片庫267 
動手實踐6.6 267 
6.11利用CSS進行定位269 
靜態定位270 
固定定位270 
相對定位270 
絕對定位271 
動手實踐6.7 272 
6.12 CSS調試技術274 
驗證HTML語法是否正確274 
驗證CSS語法是否正確274 
設置臨時背景顏色274 
設置臨時邊框274 
使用註釋查找意想不到的重疊274 
6.13更多HTML5結構元素275 
section元素275 
article元素276 
aside元素276 
time元素276
動手實踐6.8 276 
6.14舊瀏覽器的HTML5兼容性278 
配置CSS塊顯示279 
HTML5 Shim 279 
動手實踐6.9 279 
自測題6.2 280 
本章小結281 
關鍵術語281 
複習題281 
學以致用282 
動手練習285 
萬維網探秘286 
網站實例研究286 
Web項目298 

第7章深入了解超鏈接、列表

和移動端網頁設計299 
7.1換個角度看看超鏈接300 
有關相對超鏈接的更多知識300 
相對鏈接示例300 
動手實踐7.1 301 
區段標識符302 
動手實踐7.2 303 
ARIA的標誌角色305 
target屬性305 
動手實踐7.3 306 
塊級錨點306 
電話與短信超鏈接306 
7.2 CSS精靈306 
動手實踐7.4 307 
自測題4.1 309 
7.3三欄式CSS頁面佈局309 
動手實踐7.5 310 
7.4 CSS打印樣式316 
打印樣式最佳實踐316 
動手實踐7.6 319
7.5設計顯示於移動設備上的網頁321 
移動網頁設計最佳實踐322 
7.6視窗的meta標籤324 
7.7 CSS3多媒體查詢325 
什麼是多媒體查詢？326 
使用link元素的多媒體查詢
示例326 
使用@media規則的多媒體查詢
示例327 
動手實踐7.7 329 
7.8彈性圖像332 
動手實踐7.8 333 
7.9測試在移動設備上的顯示效果335 
用桌面電腦的瀏覽器進行測試336 
僅限於特別專業的開發者337 
多媒體查詢與Internet Explorer 
瀏覽器337 
移動設備優先337 
7.10 CSS3彈性盒佈局338 
配置一個彈性容器338 
配置彈性項目339 
動手實踐7.9 340 
自測題7.2 343 
本章小結344 
關鍵術語344 
複習題344 
學以致用345 
動手練習348 
萬維網探秘349 
關注網頁設計349 
網站實例研究350 
Web項目363 

第8章表格365 

8.1表格概覽366
表格元素366 
border屬性367 
表格標題367 
8.2表格行、單元格與表頭368 
表格行元素368 
表格數據元素368 
表格表頭元素369 
動手實踐8.1 370 
8.3跨行和跨列370 
colspan屬性370 
rowspan屬性371 
動手實踐8.2 371 
8.4配置一張可無障礙訪問的表格372 
自測題8.1 374 
8.5用CSS設置表格樣式374 
動手實踐8.3 375 
8.6 CSS3結構化偽類377 
動手實踐8.4 378 
8.7配置表格中的各個部分379 
自測題8.2 380 
本章小結381 
關鍵術語381 
複習題381 
學以致用382 
動手練習384 
萬維網探秘385 
關注網頁設計385 
網站實例研究385 
Web項目390 

第9章表單391 

9.1表單概述392 
表單元素393 
表單控件394 
9.2輸入元素表單控件394 
文本框394
提交按鈕396 
重置按鈕396 
動手實踐9.1 397 
多選框398 
單選按鈕399 
隱藏輸入控件400 
密碼框401 
9.3滾動文本框401 
動手實踐9.2 402 
9.4選擇列表404 
選擇元素404 
選項元素405 
自測題9.1 406 
9.5圖像按鈕和按鈕元素406 
圖像按鈕407 
按鈕元素407 
9.6無障礙訪問與表單408 
標籤元素408 
動手實踐9.3 409 
Fieldset和Legend元素409 
動手實踐9.4 410 
tabindex屬性411 
accesskey屬性412 
自測題9.2 412 
9.7用CSS定義表單樣式413 
9.8服務器端的處理414 
動手實踐9.5 415 
隱私和表單417 
服務器端處理的資源417 
探索服務器端處理技術418 
自測題9.3 418 
9.9 HTML5表單控件418 
電子郵件地址輸入419 
URL輸入控件419 
電話號碼輸入控件420
搜索字段輸入控件420 
數據列表表單控件421 
滑塊表單控件422 
微調器表單控件423 
日曆表單控件424 
拾色器表單控件425 
動手實踐9.6 425 
HTML5與漸進式提升427 
本章小結428 
關鍵術語428 
複習題428 
學以致用430 
動手練習431 
萬維網探秘433 
關注網頁設計434 
網站實例研究434 
Web項目444 

第10章網站開發445 

10.1大型項目的成功開發446 
項目工作角色446 
確定項目人選的標準447 
10.2開發流程448 
概念形成450 
分析450 
設計451 
開發452 
測試453 
自動測試工具和校驗器454 
啟用456 
維護456 
評估456 
自測題10.1 457 
10.3域名概述457 
挑選域名457 
註冊域名458 
10.4主機寄存458 
主機供應商459
寄存的類型459 
10.5選擇虛擬主機460 
自測題10.2 462 
本章小結463 
關鍵術語463 
複習題463 
動手練習465 
萬維網探秘466 
關注網頁設計467 
網站實例研究467 
Web項目467 

第11章多媒體與交互性469 

11.1插件、容器和編解碼器470 
11.2開啟音頻與視頻之旅472 
提供超鏈接472 
動手實踐11.1 472 
與網上的多媒體打交道473 
多媒體與無障礙訪問475 
瀏覽器兼容性問題475 
11.3 Adobe Flash 475 
HTML5內嵌元素476 
動手實踐11.2 477 
Flash資源477 
自測題11.1 478 
11.4 HTML5音頻和視頻元素478 
音頻元素479 
源元素479 
網頁上的HTML5音頻479 
動手實踐11.3 480 
視頻元素481 
源元素482 
網頁上的HTML5視頻482 
動手實踐11.4 483 
11.5多媒體文件與版權法律484
11.6 CSS3和交互性485 
CSS圖片庫485 
動手實踐11.5 485 
CSS3Transform屬性487 
CSS3 Rotate變換488 
動手實踐11.6 488 
CSS Transition屬性490 
動手實踐11.7 490 
練習應用過渡效果492 
動手實踐11.8 492 
11.7 Java 494 
在網頁上添加Java小程序495 
Java小程序資源497 
自測題11.1 497 
11.8 JavaScript 497 
JavaScript資源499 
11.9 Ajax 499 
Ajax資源501 
11.10 jQuery 501 
jQuery資源502 
11.11 HTML5 API 502 
地理位置502 
網絡存儲502 
離線應用503 
用Canvas元素繪圖503 
HTML5 API資源505 
自測題11.3 505 
11.12無障礙與多媒體/交互性505 
本章小結507 
關鍵術語507 
複習題508 
學以致用509 
動手練習510
萬維網探秘511 
關注網頁設計511 
網站實例研究512 
Web項目517 

第12章電子商務概述519 

12.1什麼是電子商務？520 
電子商務的優勢520 
電子商務的風險520 
12.2電子商務商業模式521 
12.3電子數據交換(EDI) 522 
12.4電子商務統計數據522 
12.5電子商務相關問題524 
12.6電子商務安全525 
加密525 
完整性526 
安全套接字層(SSL) 526 
數字證書527 
SSL和數字證書528 
自測題12.1 528 
12.7訂單和支付處理529 
現金模型529 
信用卡模型529 
智能卡模型529 
移動支付模型530 
12.8開設電子商務店舖的解決
方案530 
速成網店530 
現成的購物車軟件531 
定制解決方案531 
根據預算決定的半定制解決
方案531 
自測題12.2 532 
本章小結533 
關鍵術語533 
複習題533
動手練習535 
萬維網探秘535 
關注網頁設計536 
網站實例研究536 
Web項目547 

第13章網站推廣549 

13.1搜索引擎概述550 
13.2流行的搜索引擎550 
13.3搜索引擎組件550 
機器人551 
數據庫551 
搜索表單551 
13.4搜索引擎優化552 
關鍵字552 
網頁標題552 
標題標籤552 
描述552 
Description元標籤553 
鏈接553 
圖像和多媒體553 
有效的代碼554 
有價值的內容554 
13.5被搜索引擎收錄554 
合適的站點地圖555 
加盟556 
自測題13.1 556 
13.6監控搜索列表556 
13.7鏈接流行度558 
13.8社交媒體優化558 
博客和RSS源559 
社交網絡559 
13.9其他的網站推廣活動560 
快速反應(QR)碼560 
分銷聯盟計劃560 
橫幅廣告561 
橫幅廣告互換561
互惠鏈接協議562 
時事通訊562 
有“粘性”的網站功能562 
個人推薦562 
新聞組和郵件列表服務562 
傳統媒體廣告與現有的營銷
材料563 
自測題13.2 563 
13.10通過內聯框架提供動態內容563 
iframe元素563 
內聯框架中的YouTube視頻565 
動手實踐13.1 565 
本章小結567 
關鍵術語567 
複習題568 
動手練習569 
萬維網探秘569 
關注網頁設計569 
網站實例研究570 
Web項目572 

第14章JavaScript 573 

14.1 JavaScript概述574 
14.2 JavaScript的發展歷程574 
14.3 JavaScript的常見用途575 
警告消息575 
彈窗575 
跳轉菜單576 
鼠標移動技術576 
14.4在網頁中添加JavaScript 577 
Script元素577 
傳統JavaScript語句塊模板578 
警告消息框578 
動手實踐14.1 578
調試練習579 
自測題14.1 580 
14.5文檔對像模型概述580 
動手實踐14.2 581 
14.6事件與事件處理程序583 
動手實踐14.3 584 
自測題14.2 585 
14.7變量585 
在網頁中使用變量586 
動手實踐14.4 586 
使用輸入提示框獲取變量值588 
動手實踐14.5 588 
14.8編程概念介紹589 
算術運算符589 
判斷結構590 
動手實踐14.6 591 
函數593 
動手實踐14.7 594 
自測題14.3 595 
14.9表單處理595 
動手實踐14.8 596 
自測題14.4 601 
14.10無障礙訪問與JavaScript 601 
14.11 JavaScript資源601 
14.12 jQuery概述602 
14.13在網頁中添加jQuery 602 
下載jQuery 602 
通過內容分發網絡訪問jQuery 603 
Ready事件603 
動手實踐14.9 604 
14.14 jQuery選擇器605 
14.15 jQuery方法605
動手實踐14.10 606 
14.16 jQuery圖片庫608 
動手實踐14.11 609 
14.17 jQuery插件611 
動手實踐14.12 612 
動手實踐14.13 613 
14.18 jQuery資源615 
自測題14.5 616 
本章小結617 
關鍵術語617 
複習題618 
學以致用619 
動手練習620 
萬維網探秘621 
網站實例研究621 
Web項目630 
附錄網頁開發人員手冊631 
參考答案653