內(nèi)容簡(jiǎn)介

《HTML5與CSS3入門經(jīng)典(第4版)》針對(duì)HTML5和CSS3的最新標(biāo)準(zhǔn)進(jìn)行及時(shí)的更新和修訂，包含的主題有：Internet和Web概念；創(chuàng)建HTML5網(wǎng)頁；用CSS配置顏色和文本；用CSS配置頁面布局；配置圖像和多媒體；探索新增的CSS3特性；應(yīng)用網(wǎng)頁設(shè)計(jì)最佳實(shí)踐；設(shè)計(jì)可訪問和可用的網(wǎng)頁；搜索引擎優(yōu)化設(shè)計(jì)；選擇域名；發(fā)布網(wǎng)站。

《HTML5與CSS3入門經(jīng)典(第4版)》適合所有對(duì)網(wǎng)頁設(shè)計(jì)感興趣的讀者閱讀，是一本理想的入門教程。

 

前言

《HTML5 與CSS3 入門經(jīng)典》適合網(wǎng)頁設(shè)計(jì)或開發(fā)初級(jí)課程。每個(gè)主題都用大約兩頁篇幅進(jìn)行講解，在指出關(guān)鍵知識(shí)點(diǎn)的同時(shí)，一般還包含動(dòng)手實(shí)作。全書覆蓋網(wǎng)頁設(shè)計(jì)師需要掌握的所有基礎(chǔ)知識(shí)，包括以下主題：

互聯(lián)網(wǎng)和萬維網(wǎng)的概念

用HTML5 創(chuàng)建網(wǎng)頁

用層疊樣式表(CSS) 配置文本、顏色和網(wǎng)頁布局

對(duì)網(wǎng)頁上的圖片和多媒體進(jìn)行配置

探索新的CSS3 屬性

網(wǎng)頁設(shè)計(jì)最佳實(shí)踐

對(duì)無障礙訪問、可用性和搜索引擎優(yōu)化的考量

取得域名和主機(jī)

發(fā)布到網(wǎng)上

本書中文版的學(xué)生文件可以從配套網(wǎng)站http://pan.baidu.com/s/1yd43W 下載，其中包括動(dòng)手實(shí)作的原始文件和解決方案，以及案例學(xué)習(xí)的原始文件。

在本書第3 版取得極大成功之后，第4 版新增了以下特色：

更豐富的動(dòng)手實(shí)作

全面更新了范例代碼、案例學(xué)習(xí)和網(wǎng)絡(luò)資源

更新了HTML5.1 元素和屬性

擴(kuò)充了網(wǎng)頁布局設(shè)計(jì)

擴(kuò)充了靈活響應(yīng)網(wǎng)頁設(shè)計(jì)技術(shù)和CSS 媒體查詢

擴(kuò)充了靈活響應(yīng)圖像技術(shù)，包括新的HTML5 元素picture

更新了HTML5 和CSS 參考資源

一個(gè)新的附錄討論了CSS 靈活布局模塊：Flexbox

本書特色

立足當(dāng)下，展望未來。本書采用獨(dú)特的教學(xué)方式，使學(xué)生在學(xué)習(xí)適合當(dāng)下的網(wǎng)頁設(shè)計(jì)技能的同時(shí)，掌握新的HTML5 編碼技術(shù)，迎接未來的挑戰(zhàn)。

精心挑選主題。本書既傳授“硬”技能，比如HTML5 和層疊樣式表( 第1 章和第2 章，第4 章~ 第11 章)，也傳授“軟”技能，比如網(wǎng)頁設(shè)計(jì)( 第3 章) 和發(fā)布到網(wǎng)上( 第12 章)。打下良好基礎(chǔ)之后，學(xué)生作為網(wǎng)頁設(shè)計(jì)師追尋自己的職業(yè)夢(mèng)想時(shí)，會(huì)更加得心應(yīng)手。使用本書的學(xué)生和老師會(huì)發(fā)現(xiàn)，我們這個(gè)課程變得更有趣了。

學(xué)生在創(chuàng)建網(wǎng)頁和網(wǎng)站時(shí)，可以一起討論、綜合和運(yùn)用軟硬技能。每個(gè)主題都用兩頁的篇幅來講解，除了快速提供需要掌握的知識(shí)點(diǎn)，還通過動(dòng)手實(shí)作來立即鞏固所學(xué)到的知識(shí)。

每個(gè)主題兩頁篇幅。每個(gè)主題都用簡(jiǎn)潔的、兩頁篇幅的一個(gè)小節(jié)進(jìn)行講述。許多小節(jié)還包含馬上就可以開始的動(dòng)手實(shí)作，旨在幫助鞏固新學(xué)的技能或概念。這種精心設(shè)計(jì)對(duì)學(xué)業(yè)沉重的學(xué)生尤其有用，因?yàn)樗麄冃枰�立即搞清楚關(guān)鍵的概念。

動(dòng)手實(shí)作。網(wǎng)頁開發(fā)是一門技能，只有通過動(dòng)手實(shí)作才能更好地掌握。本書十分強(qiáng)調(diào)實(shí)際動(dòng)手能力的培養(yǎng)，體現(xiàn)在每章的動(dòng)手實(shí)作練習(xí)題、章末練習(xí)題以及通過真實(shí)的案例學(xué)習(xí)來完成網(wǎng)站的開發(fā)。

網(wǎng)站案例學(xué)習(xí)。從第2 章開始，案例學(xué)習(xí)將貫穿全書。它的作用是鞏固每章所學(xué)的技能。教師資源中心提供了案例的示例解決方案，網(wǎng)址是http://www.pearsonhighered.com/irc。

聚焦網(wǎng)頁設(shè)計(jì)。大多數(shù)章都提供額外的活動(dòng)來探索與本章有關(guān)的網(wǎng)頁設(shè)計(jì)主題。這些活動(dòng)可以用于鞏固、擴(kuò)展和增強(qiáng)課程主題。

FAQ。在我的網(wǎng)頁開發(fā)課堂中，學(xué)生經(jīng)常會(huì)問到一些同樣的問題。書中列出了這些問題，并用FAQ 標(biāo)志注明。

聚焦于無障礙設(shè)計(jì)。開發(fā)無障礙網(wǎng)頁的重要性日益增強(qiáng)，所以無障礙網(wǎng)頁設(shè)計(jì)技術(shù)將貫穿全書。這個(gè)特殊標(biāo)記可以讓您更方便地找到這些信息。

聚焦于道德與倫理。本書使用特殊的道德規(guī)范標(biāo)記注明與網(wǎng)頁開發(fā)有關(guān)的道德規(guī)范話題。

簡(jiǎn)明提示。提供有用的背景資料，或者幫助提高生產(chǎn)力。

深入探索。這個(gè)特殊標(biāo)記代表可供深入探索的網(wǎng)絡(luò)資源，方便學(xué)生對(duì)當(dāng)前的主題進(jìn)行深入學(xué)習(xí)。

參考資料。附錄提供了豐富的參考資料，包括HTML5 參考、CSS 參考、HTML5和XHTML 的比較、WCAG 2.0 快速參考、ARIA Landmark Roles 概述以及CSS Flexible Box Layout (Flexbox) 簡(jiǎn)介。

視頻講解(Video Note) 講解關(guān)鍵編程概念和技術(shù)，演示從設(shè)計(jì)到編碼來解決問題的過程。視頻講解方便學(xué)生自學(xué)自己感興趣的主題，支持選擇、播放、倒退、快進(jìn)和暫停。每當(dāng)看到 這樣的圖標(biāo)，就表示視頻講解，都表明當(dāng)前主題有對(duì)應(yīng)的視頻講解。視頻列表可從本書中文版配套網(wǎng)站獲取，網(wǎng)址是http://pan.baidu.com/s/1yd43W。注意，由于是英文視頻，所以為了方便索引，書中保留了這些視頻的英文名稱。

補(bǔ)充材料

學(xué)生資源。本書中文版讀者請(qǐng)?jiān)L問http://pan.baidu.com/s/1yd43W 獲取學(xué)生資源（含視頻講解）。

教師資源。以下補(bǔ)充資源僅供認(rèn)證教師使用，詳情請(qǐng)發(fā)送電子郵件到coo@netease.com。

章末練習(xí)題答案

案例學(xué)習(xí)作業(yè)答案

試題

PPT 演示文稿

示范教學(xué)大綱

作者網(wǎng)站。除了出版社為本書提供的配套網(wǎng)站，作者另外建了一個(gè)網(wǎng)站，網(wǎng)址為http://www.webdevbas ics.net。該網(wǎng)站擁有許多額外的資源，包括調(diào)色板和學(xué)習(xí)/ 復(fù)習(xí)游戲，還為每一章都單獨(dú)建了一個(gè)網(wǎng)頁，提供這一章的示例、鏈接和更新信息。該網(wǎng)站由作者自行維護(hù)，和出版商無利益關(guān)系。

致謝

特別感謝Addison-Wesley 的工作人員，包括Matt Goldstein，Kristy Alaura 和Erin Ault。

感謝我的家人，尤其是我的“另一半”，感謝他的耐心、關(guān)愛、支持和鼓勵(lì)。最后還要特別獻(xiàn)給我的父親，我們永遠(yuǎn)懷念他。

 

目錄

第1 章  互聯(lián)網(wǎng)和萬維網(wǎng)基礎(chǔ)                   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

第一個(gè)圖形化瀏覽器          3

各種技術(shù)的聚合              3

1.2　網(wǎng)頁標(biāo)準(zhǔn)和無障礙訪問             4

W3C 推薦標(biāo)準(zhǔn)               4

網(wǎng)頁標(biāo)準(zhǔn)和無障礙訪問        4

無障礙訪問和法律            4

網(wǎng)頁通用設(shè)計(jì)                5

1.3　瀏覽器和服務(wù)器                   6

網(wǎng)絡(luò)概述                    6

客戶端/ 服務(wù)器模型               6

客戶端                      7

服務(wù)器                      7

1.4　Internet 協(xié)議                 8

電子郵件協(xié)議                8

超文本傳輸協(xié)議              8

文件傳輸協(xié)議                8

傳輸控制協(xié)議/Internet 協(xié)議    8

IP 地址                          9

1.5　統(tǒng)一資源標(biāo)識(shí)符(URI) 和域名      10

URI 和URL                     10

域名                       10

頂級(jí)域名                   10

通用頂級(jí)域名               11

國(guó)家代碼頂級(jí)域名           12

域名系統(tǒng)DNS                   13

1.6　網(wǎng)上的信息                      14

使用網(wǎng)上信息時(shí)的道德規(guī)范   15

1.7　HTML 概述                      16

什么是HTML               16

什么是XML                17

什么是XHTML                  17

HTML 的最新版本HTML5        17

1.8　網(wǎng)頁幕后揭秘                    18

文檔類型定義(DTD)         18

網(wǎng)頁模板                   18

html 元素                  18

頁頭區(qū)域                   19

主體區(qū)域                   19

1.9　第一個(gè)網(wǎng)頁                      20

動(dòng)手實(shí)作1.1                20

保存文件                   22

復(fù)習(xí)和練習(xí)                      24

復(fù)習(xí)題                     24

動(dòng)手練習(xí)                   24

網(wǎng)上調(diào)研                   25

聚焦網(wǎng)頁設(shè)計(jì)               26

第2 章  HTML 基礎(chǔ)                     27

2.1　標(biāo)題元素                        28

動(dòng)手實(shí)作2.1                28

無障礙訪問和標(biāo)題           29

HTML5 更多的標(biāo)題選項(xiàng)     29

2.2　段落元素                        30

動(dòng)手實(shí)作2.2                30

對(duì)齊                       31

2.3　換行和水平標(biāo)尺                  32

換行元素                   32

水平標(biāo)尺元素               32

動(dòng)手實(shí)作2.3                32

動(dòng)手實(shí)作2.4                33

2.4　塊引用元素                      34

動(dòng)手實(shí)作2.5                35

2.5　短語元素                        36

2.6　有序列表                        38

type 屬性、start 屬性和reversed

屬性                       38

動(dòng)手實(shí)作2.6                39

2.7　無序列表                        40

動(dòng)手實(shí)作2.7                41

2.8　描述列表                        42

動(dòng)手實(shí)作2.8                43

2.9　特殊字符                        44

動(dòng)手實(shí)作2.9                44

2.10　HTML 語法校驗(yàn)                 46

動(dòng)手實(shí)作2.10               46

2.11　結(jié)構(gòu)元素                       48

div 元素                    48

header 元素                 48

nav 元素                        48

main 元素                       48

footer 元素                      48

動(dòng)手實(shí)作2.11               49

2.12　練習(xí)使用結(jié)構(gòu)元素               50

動(dòng)手實(shí)作2.12               50

2.13　錨元素                         52

動(dòng)手實(shí)作2.13               52

鏈接目標(biāo)                   53

絕對(duì)鏈接                   53

相對(duì)鏈接                   53

block anchor                     53

無障礙訪問和超鏈接         53

2.14　練習(xí)使用鏈接                   54

站點(diǎn)地圖                   54

動(dòng)手實(shí)作2.14               54

2.15　電子郵件鏈接                   58

動(dòng)手實(shí)作2.15               59

復(fù)習(xí)和練習(xí)                      60

復(fù)習(xí)題                     60

動(dòng)手練習(xí)                   61

聚焦網(wǎng)頁設(shè)計(jì)               61

案例學(xué)習(xí)                   61

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort               62

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio      65

第3 章  網(wǎng)頁設(shè)計(jì)基礎(chǔ)                   71

3.1　為目標(biāo)受眾設(shè)計(jì)                  72

瀏覽器                     73

屏幕分辨率                 73

3.2　網(wǎng)站的組織                      74

分級(jí)式組織                 74

線性組織                   75

隨機(jī)組織                   75

3.3　視覺設(shè)計(jì)原則                    76

重復(fù)：在整個(gè)設(shè)計(jì)中重復(fù)視覺

元素                       76

對(duì)比：添加視覺刺激和吸引

注意力                     77

近似：分組相關(guān)項(xiàng)目         77

對(duì)齊：對(duì)齊元素實(shí)現(xiàn)視覺上的

統(tǒng)一                       77

3.4　提供無障礙訪問                  78

通用設(shè)計(jì)和增強(qiáng)無障礙訪問的

受益者                     78

無障礙設(shè)計(jì)有助于提高在搜索

引擎中的排名               78

法律規(guī)定                   79

無障礙設(shè)計(jì)的熱潮           79

3.5　文本的使用                      80

文本設(shè)計(jì)的注意事項(xiàng)         80

3.6　調(diào)色板                          82

十六進(jìn)制顏色值             82

網(wǎng)頁安全色                 83

無障礙設(shè)計(jì)和顏色           83

3.7　針對(duì)目標(biāo)受眾進(jìn)行設(shè)計(jì)            84

面向兒童                   84

面向年輕人                 84

面向所有人                 85

面向老年人                 85

3.8　選擇顏色方案                    86

以一張圖片為基礎(chǔ)的方案     86

色輪                       86

變深、變淺和變灰           87

單色                       88

相似色                     88

互補(bǔ)色                     88

分散互補(bǔ)色                 89

三色                       89

四色                       89

實(shí)現(xiàn)顏色方案               89

3.9　使用圖片和多媒體                90

文件大小和圖片尺寸         90

抗鋸齒/ 鋸齒化文本的問題        90

只使用必要的多媒體         91

提供替代文本               91

3.10　更多設(shè)計(jì)考慮                   92

感覺到的加載時(shí)間           93

第一屏                     93

適當(dāng)留白                   93

水平滾動(dòng)                   93

3.11　導(dǎo)航設(shè)計(jì)                       94

網(wǎng)站要易于導(dǎo)航             94

導(dǎo)航欄                     94

面包屑導(dǎo)航                 94

圖片導(dǎo)航                   95

動(dòng)態(tài)導(dǎo)航                   95

站點(diǎn)地圖                   95

站點(diǎn)搜索功能               95

3.12　線框和頁面布局                 96

3.13　固定布局和流動(dòng)布局             98

固定布局                   98

流動(dòng)布局                   98

3.14　為移動(dòng)網(wǎng)絡(luò)設(shè)計(jì)                100

三種方式                  100

移動(dòng)設(shè)備設(shè)計(jì)考慮          100

桌面和移動(dòng)網(wǎng)站的例子      101

移動(dòng)設(shè)計(jì)小結(jié)              101

3.15　靈活響應(yīng)的網(wǎng)頁設(shè)計(jì)            102

3.16　網(wǎng)頁設(shè)計(jì)最佳實(shí)踐              104

復(fù)習(xí)和練習(xí)                     106

復(fù)習(xí)題                    106

動(dòng)手練習(xí)                  107

聚焦網(wǎng)頁設(shè)計(jì)              108

網(wǎng)頁項(xiàng)目案例學(xué)習(xí)          108

項(xiàng)目里程碑                108

第4 章  CSS 基礎(chǔ)                      111

4.1　CSS 概述                       112

層疊樣式表的優(yōu)點(diǎn)          112

配置CSS 的方法                113

層疊樣式表的“層疊”      113

4.2　CSS 選擇符和聲明               114

CSS 語法基礎(chǔ)              114

background-color 屬性       114

color 屬性                      115

配置背景色和文本色        115

4.3　CSS 顏色值語法                 116

4.4　配置內(nèi)聯(lián)CSS                   118

style 屬性                      118

動(dòng)手實(shí)作4.1               118

4.5　配置嵌入CSS                   120

style 元素                      120

動(dòng)手實(shí)作4.2               120

4.6　配置外部CSS                   122

link 元素                       122

動(dòng)手實(shí)作4.3               122

4.7　CSS 的class、ID 和后代選擇符    124

class 選擇符                    124

id 選擇符                  124

后代選擇符                124

動(dòng)手實(shí)作4.4               125

4.8　span 元素                       126

span 元素                 126

動(dòng)手實(shí)作4.5               126

4.9　練習(xí)使用CSS                   128

將嵌入CSS 轉(zhuǎn)換為外部CSS      128

將網(wǎng)頁與外部CSS 文件關(guān)聯(lián)      128

動(dòng)手實(shí)作4.6               128

VIII ｜ HTML5 與CSS3 入門經(jīng)典( 第4 版)

4.10　層疊                          130

4.11　練習(xí)使用層疊                  132

動(dòng)手實(shí)作4.7               132

4.12　CSS 語法校驗(yàn)                  134

動(dòng)手實(shí)作4.8               134

復(fù)習(xí)和練習(xí)                     136

復(fù)習(xí)題                    136

動(dòng)手練習(xí)                  137

聚焦網(wǎng)頁設(shè)計(jì)              137

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              138

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     141

第5 章  圖形和文本樣式基礎(chǔ)                 143

5.1　圖片                           144

GIF 格式的圖片            144

JPEG 格式的圖片           144

PNG 格式的圖片                145

5.2　img 元素                   146

動(dòng)手實(shí)作5.1               146

用alt 屬性提供無障礙訪問   147

5.3　圖片鏈接                       148

動(dòng)手實(shí)作5.2               148

無障礙訪問和圖片鏈接      149

5.4　配置背景圖片                   150

background-image 屬性           150

同時(shí)使用背景顏色和背景圖片150

瀏覽器如何顯示背景圖片    150

background-attachment 屬性       151

5.5　定位背景圖片                   152

background-repeat 屬性           152

定位背景圖片              152

動(dòng)手實(shí)作5.3               153

5.6　用CSS3 配置多張背景圖片   154

漸進(jìn)式增強(qiáng)                154

動(dòng)手實(shí)作5.4              155

5.7　用CSS 配置字體            156

font-family 屬性                 156

動(dòng)手實(shí)作5.5               156

5.8　CSS 文本屬性                   158

font-size 屬性                   158

font-weight 屬性            158

font-style 屬性             159

line-height 屬性            159

text-align 屬性             159

text-decoration 屬性              159

text-indent 屬性            159

text-transform 屬性          159

letter-spacing 屬性               159

5.9　練習(xí)配置圖形和文本             160

動(dòng)手實(shí)作5.6               160

5.10　用CSS 配置列表符號(hào)       162

用圖片代替列表符號(hào)        163

動(dòng)手實(shí)作5.7               163

5.11　收藏圖標(biāo)                      164

配置收藏圖標(biāo)              164

動(dòng)手實(shí)作5.8               165

5.12　圖像映射                      166

map 元素                  166

area 元素                  166

探索矩形圖像映射          166

5.13　復(fù)習(xí)和練習(xí)                    168

復(fù)習(xí)題                    168

動(dòng)手練習(xí)                  169

聚焦網(wǎng)頁設(shè)計(jì)              170

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              170

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     173

第6 章  CSS 進(jìn)階                     177

6.1　寬度和高度                     178

width 屬性                 178

min-width 屬性             178

max-width 屬性            179

height 屬性                     179

動(dòng)手實(shí)作6.1               179

目錄 ｜ IX

6.2　框模型                         180

內(nèi)容                      180

填充                      180

邊框                      180

邊距                      181

框模型實(shí)例                181

6.3　邊距和填充                     182

margin 屬性                182

padding 屬性               182

6.4　邊框                           184

動(dòng)手實(shí)作6.2               185

6.5　圓角                           186

動(dòng)手實(shí)作6.3               187

6.6　頁面內(nèi)容居中                   188

動(dòng)手實(shí)作6.4               188

6.7　CSS3 的邊框和文本陰影          190

CSS3 的box-shadow 屬性    190

CSS3 的text-shadow 屬性    191

動(dòng)手實(shí)作6.5               191

6.8　背景圖片                       192

CSS3 background-clip 屬性       192

CSS3 background-origin 屬性      193

6.9　背景圖片的大小和縮放           194

6.10　練習(xí)使用CSS3 屬性        196

動(dòng)手實(shí)作6.6               196

6.11　CSS3 的opacity 屬性            198

動(dòng)手實(shí)作6.7               198

6.12　CSS3 RGBA 顏色               200

動(dòng)手實(shí)作6.8               200

6.13　CSS3 HSLA 顏色               202

色調(diào)、飽和度、亮度和alpha    202

HSLA 顏色示例            202

動(dòng)手實(shí)作6.9               203

6.14　CSS3 的漸變                   204

線性漸變語法              204

輻射漸變語法              204

CSS3 漸變和漸進(jìn)式增強(qiáng)     204

動(dòng)手實(shí)作6.10              205

復(fù)習(xí)和練習(xí)                     206

復(fù)習(xí)題                    206

動(dòng)手練習(xí)                  207

聚焦網(wǎng)頁設(shè)計(jì)              207

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              207

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     211

第7 章  頁面布局基礎(chǔ)                  215

7.1　正常流動(dòng)                       216

動(dòng)手實(shí)作7.1               216

7.2　浮動(dòng)                           218

fl oat 屬性                  218

浮動(dòng)元素和正常流動(dòng)        219

動(dòng)手實(shí)作7.2               219

7.3　清除浮動(dòng)                       220

clear 屬性                      220

用換行清除浮動(dòng)            220

7.4　溢出                           222

overfl ow 屬性                   222

用overfl ow 屬性清除浮動(dòng)    222

對(duì)比clear 屬性與overfl ow 屬性   .223

用overfl ow 屬性配置滾動(dòng)條  223

7.5　CSS 屬性box-sizing              224

7.6　基本雙欄布局                   226

動(dòng)手實(shí)作7.3               226

雙欄布局的例子            229

7.7　用無序列表實(shí)現(xiàn)垂直導(dǎo)航         230

用CSS 配置無序列表            230

用CSS text-decoration 屬性消除

下畫線                    230

動(dòng)手實(shí)作7.4               231

7.8　用無序列表實(shí)現(xiàn)水平導(dǎo)航         232

CSS 的display 屬性         232

動(dòng)手實(shí)作7.5               233

7.9　用偽類實(shí)現(xiàn)CSS 交互性      234

動(dòng)手實(shí)作7.6               234

7.10　練習(xí)CSS 雙欄布局         236

動(dòng)手實(shí)作7.7               236

7.11　用CSS 進(jìn)行定位           238

static 定位                 238

fi xed 定位                      238

相對(duì)定位                  238

絕對(duì)定位                  239

7.12　練習(xí)定位                      240

動(dòng)手實(shí)作7.8               240

7.13　CSS 精靈                      242

動(dòng)手實(shí)作7.9               242

復(fù)習(xí)和練習(xí)                     244

復(fù)習(xí)題                    244

動(dòng)手練習(xí)                  245

聚焦網(wǎng)頁設(shè)計(jì)              245

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              245

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     247

第8 章

鏈接、布局和移動(dòng)開發(fā)進(jìn)階       249

8.1　相對(duì)鏈接的更多知識(shí)             250

相對(duì)鏈接的例子            250

動(dòng)手實(shí)作8.1               250

8.2　區(qū)段標(biāo)識(shí)符                     252

動(dòng)手實(shí)作8.2               253

8.3　fi gure 元素和fi gcaption 元素       254

fi gure 元素                254

fi gcaption 元素                  254

添加圖題                  254

動(dòng)手實(shí)作8.3               255

8.4　圖片浮動(dòng)練習(xí)                   256

動(dòng)手實(shí)作8.4               256

8.5　更多HTML5 元素           258

section 元素               258

article 元素                     258

aside 元素                      258

time 元素                  258

動(dòng)手實(shí)作8.5               258

8.6　HTML5 與舊瀏覽器的兼容性      260

配置CSS 塊顯示                260

動(dòng)手實(shí)作8.6               260

8.7　CSS 對(duì)打印的支持               262

打印樣式最佳實(shí)踐          262

動(dòng)手實(shí)作8.7               263

8.8　移動(dòng)網(wǎng)頁設(shè)計(jì)                   264

移動(dòng)網(wǎng)頁設(shè)計(jì)要考慮的問題  264

為移動(dòng)使用優(yōu)化布局        264

優(yōu)化移動(dòng)導(dǎo)航              265

優(yōu)化移動(dòng)圖片              265

優(yōu)化移動(dòng)文本              265

為One Web 而設(shè)計(jì)              265

8.9　viewport meta 標(biāo)記               266

8.10　CSS3 媒體查詢                 268

什么是媒體查詢            268

使用link 元素的媒體查詢例子268

使用@media 規(guī)則的媒體

查詢示例                  269

8.11　練習(xí)媒體查詢                  270

動(dòng)手實(shí)作8.8               270

8.12　靈活圖像                      274

動(dòng)手實(shí)作8.9               274

8.13　picture 元素                    276

source 元素                    276

動(dòng)手實(shí)作8.10              276

8.14　靈活img 元素屬性              278

sizes 屬性                      278

srcset 屬性                 278

動(dòng)手實(shí)作8.11              278

8.15　測(cè)試移動(dòng)顯示                  280

用桌面瀏覽器測(cè)試              280

針對(duì)專業(yè)開發(fā)人員          281

復(fù)習(xí)和練習(xí)                     282

復(fù)習(xí)題                    282

動(dòng)手練習(xí)                  283

聚焦網(wǎng)頁設(shè)計(jì)              283

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              283

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     287

第9 章  表格基礎(chǔ)                          291

9.1　表格概述                       292

table 元素                 292

border 屬性                    292

表格標(biāo)題                  293

9.2　表行、單元格和表頭             294

動(dòng)手實(shí)作9.1               295

9.3　跨行和跨列                     296

動(dòng)手實(shí)作9.2               296

9.4　配置無障礙訪問表格             298

9.5　用CSS 配置表格樣式        300

動(dòng)手實(shí)作9.3               300

9.6　CSS3 結(jié)構(gòu)性偽類                302

動(dòng)手實(shí)作9.4               302

配置首字母                303

9.7　配置表格區(qū)域                   304

復(fù)習(xí)和練習(xí)                     306

復(fù)習(xí)題                    306

動(dòng)手練習(xí)                  307

聚焦網(wǎng)頁設(shè)計(jì)              307

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              308

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     309

第10 章  表單基礎(chǔ)                           311

10.1　概述                          312

form 元素                      313

表單控件                  313

10.2　文本框                        314

10.3　提交按鈕和重置按鈕            316

提交按鈕                  316

重置按鈕                  316

示例表單                  316

動(dòng)手實(shí)作10.1              316

10.4　復(fù)選框和單選鈕                318

復(fù)選框                    318

單選鈕                    319

10.5　隱藏字段和密碼框              320

隱藏字段                  320

密碼框                    320

10.6　textarea 元素                   322

動(dòng)手實(shí)作10.2              323

10.7　select 元素和option 元素         324

select 元素                 324

option 元素                     324

10.8　label 元素                 326

動(dòng)手實(shí)作10.3              327

10.9　fi eldset 元素和legend 元素   328

fi eldset 元素                    328

legend 元素                328

用CSS 配置fi eldset 分組樣式     329

無障礙訪問與表單          329

10.10　用CSS 配置表單樣式      330

動(dòng)手實(shí)作10.4             330

屬性選擇符               331

10.11　服務(wù)器端處理                 332

隱私和表單               333

10.12　練習(xí)創(chuàng)建表單                 334

動(dòng)手實(shí)作10.5             334

10.13　HTML5 文本表單控件          336

E-mail 地址輸入表單控件   336

URL 表單輸入控件             336

電話號(hào)碼表單輸入控件     337

搜索詞輸入表單控件       337

HTML5 文本框表單控件的

有效屬性                 337

10.14　HTML5 的datalist 元素         338

10.15　HTML5 的slider 控件和

spinner 控件              340

slider 表單輸入控件            340

spinner 表單輸入控件      340

HTML5 和漸進(jìn)式增強(qiáng)         341

10.16　HTML5 日歷和顏色池控件      342

日歷輸入表單控件             342

顏色池表單控件               343

10.17　練習(xí)創(chuàng)建HTML5 表單     344

動(dòng)手實(shí)作10.6                 344

XII ｜ HTML5 與CSS3 入門經(jīng)典( 第4 版)

復(fù)習(xí)和練習(xí)                     346

復(fù)習(xí)題                    346

動(dòng)手練習(xí)                  347

聚焦網(wǎng)頁設(shè)計(jì)              347

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              348

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     351

第11 章  媒體和交互性基礎(chǔ)                   355

11.1　插件、容器和codec             356

輔助應(yīng)用程序和插件        356

11.2　配置音頻和視頻                358

訪問音頻或視頻文件        358

動(dòng)手實(shí)作11.1              358

多媒體和無障礙訪問        359

多媒體和瀏覽器兼容問題    359

11.3　Flash 和HTML5 元素embed 360

embed 元素                360

動(dòng)手實(shí)作11.2              361

11.4　HTML5 元素audio 和source 362

audio 元素                 362

source 元素                362

動(dòng)手實(shí)作11.3              363

11.5　HTML5 video 元素和source      364

video 元素                 364

source 元素                364

11.6　練習(xí)HTML5 視頻          366

動(dòng)手實(shí)作11.4              366

11.7　iframe 元素                368

動(dòng)手實(shí)作11.5              369

11.8　CSS3 屬性transform        370

CSS3 旋轉(zhuǎn)變換             370

CSS3 伸縮變換             370

動(dòng)手實(shí)作11.6              371

11.9　CSS3 屬性transition             372

動(dòng)手實(shí)作11.7              373

11.10　練習(xí)CSS 過渡            374

動(dòng)手實(shí)作11.8              374

11.11　CSS 下拉菜單                 376

動(dòng)手實(shí)作11.9                 376

11.12　HTML5 元素details 和

Summary                     378

details 元素                   378

summary 元素                 378

details 和summary widget   378

動(dòng)手實(shí)作11.10                379

11.13　JavaScript 和jQuery            380

JavaScript                380

jQuery                   381

11.14　HTML5 API                  382

地理位置                     382

Web 存儲(chǔ)                     382

離線Web 應(yīng)用            382

用canvas 元素繪圖        383

復(fù)習(xí)和練習(xí)                     384

復(fù)習(xí)題                    384

動(dòng)手練習(xí)                  385

聚焦網(wǎng)頁設(shè)計(jì)              385

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              385

瑜珈館案例學(xué)習(xí)：

Path of Light Yoga Studio     387

第12 章  Web 發(fā)布基礎(chǔ)                      391

12.1　注冊(cè)域名                      392

選擇域名                  392

注冊(cè)域名                  393

12.2　選擇主機(jī)                      394

主機(jī)的類型                394

選擇虛擬主機(jī)              394

12.3　用FTP 發(fā)布               396

FTP 應(yīng)用程序              396

用FTP 連接                    396

使用FTP                  396

12.4　提交到搜索引擎                398

搜索引擎的組成            398

在搜索引擎中列出你的網(wǎng)站  399

目錄 ｜ XIII

12.5　搜索引擎優(yōu)化                  400

關(guān)鍵字                    400

網(wǎng)頁標(biāo)題                  400

標(biāo)題標(biāo)記                  400

描述                      400

meta 標(biāo)記                      400

鏈接                      401

圖片和多媒體              401

有效代碼                  401

有價(jià)值的內(nèi)容              401

12.6　無障礙訪問測(cè)試                402

通用設(shè)計(jì)和無障礙訪問      402

Web 無障礙訪問標(biāo)準(zhǔn)            402

Section 508 條款          402

WCAG                    402

測(cè)試無障礙設(shè)計(jì)相容性      403

12.7　可用性測(cè)試                    404

進(jìn)行可用性測(cè)試            404

動(dòng)手實(shí)作12.1              405

復(fù)習(xí)和練習(xí)                     406

復(fù)習(xí)題                    406

動(dòng)手練習(xí)                  407

聚焦網(wǎng)頁設(shè)計(jì)              407

度假村案例學(xué)習(xí)：

Pacifi c Trails Resort              408

咖啡館案例學(xué)習(xí)：

JavaJam Coffee House            408

附錄                         409

附錄A　復(fù)習(xí)和練習(xí)答案         410

附錄B　HTML5 速查表          411

附錄C　CSS 速查表             416

附錄D　對(duì)比XHTML 和HTML5 421

附錄E　WCAG 2.0 快速參考          427

附錄F　ARIA 地標(biāo)角色          429

附錄G　CSS fl exbox 模型             430

附錄H　Web 安全調(diào)色板         435

視頻講解

視頻講解：Evolution of the Web                                        2

視頻講解：Your First Web Page                                  20

視頻講解：TML Validation                                            46

視頻講解：Principles of Visual Design                              76

視頻講解：External Style Sheets                                 122

視頻講解：CSS Validation                                           134

視頻講解：Background Images                                      152

視頻講解：CSS Rounded Corners                                186

視頻講解：Interactivity with CSS Pseudo-Classes                        234

視頻講解：Linking to a Named Fragment                               252

視頻講解：Confi gure a Table                                    294

視頻講解：Connect a form to Server-side Processing                 332

視頻講解：HTML5 Video                                            364

視頻講解：Confi gure an Inline Frame                                  369

視頻講解：Choosing a Domain Name                             392