HTML5與CSS3入門經(jīng)典（第4版）

目錄

第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和URL10

域名10

頂級(jí)域名10

通用頂級(jí)域名11

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

域名系統(tǒng)DNS13

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

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

1.7　HTML概述16

什么是HTML16

什么是XML17

什么是XHTML17

HTML的最新版本HTML517

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.120

保存文件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.128

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

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

2.2　段落元素30

動(dòng)手實(shí)作2.230

對齊31

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

換行元素32

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

動(dòng)手實(shí)作2.332

動(dòng)手實(shí)作2.433

2.4　塊引用元素34

動(dòng)手實(shí)作2.535

2.5　短語元素36

2.6　有序列表38

type屬性、start屬性和reversed

屬性38

動(dòng)手實(shí)作2.639

2.7　無序列表40

動(dòng)手實(shí)作2.741

2.8　描述列表42

動(dòng)手實(shí)作2.843

2.9　特殊字符44

動(dòng)手實(shí)作2.944

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

動(dòng)手實(shí)作2.1046

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

div元素48

header元素48

nav元素48

main元素48

footer元素48

動(dòng)手實(shí)作2.1149

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

動(dòng)手實(shí)作2.1250

2.13　錨元素52

動(dòng)手實(shí)作2.1352

鏈接目標(biāo)53

絕對鏈接53

相對鏈接53

blockanchor53

無障礙訪問和超鏈接53

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

站點(diǎn)地圖54

動(dòng)手實(shí)作2.1454

2.15　電子郵件鏈接58

動(dòng)手實(shí)作2.1559

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

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

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

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

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

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

PacificTrailsResort62

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

PathofLightYogaStudio65

第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

對比：添加視覺刺激和吸引

注意力77

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

對齊：對齊元素實(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　針對目標(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)CSS118

style屬性118

動(dòng)手實(shí)作4.1118

4.5　配置嵌入CSS120

style元素120

動(dòng)手實(shí)作4.2120

4.6　配置外部CSS122

link元素122

動(dòng)手實(shí)作4.3122

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

class選擇符124

id選擇符124

后代選擇符124

動(dòng)手實(shí)作4.4125

4.8　span元素126

span元素126

動(dòng)手實(shí)作4.5126

4.9　練習(xí)使用CSS128

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

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

動(dòng)手實(shí)作4.6128

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

4.10　層疊130

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

動(dòng)手實(shí)作4.7132

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

動(dòng)手實(shí)作4.8134

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

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

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

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

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

PacificTrailsResort138

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

PathofLightYogaStudio141

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

5.1　圖片144

GIF格式的圖片144

JPEG格式的圖片144

PNG格式的圖片145

5.2　img元素146

動(dòng)手實(shí)作5.1146

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

5.3　圖片鏈接148

動(dòng)手實(shí)作5.2148

無障礙訪問和圖片鏈接149

5.4　配置背景圖片150

background-image屬性150

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

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

background-attachment屬性151

5.5　定位背景圖片152

background-repeat屬性152

定位背景圖片152

動(dòng)手實(shí)作5.3153

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

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

動(dòng)手實(shí)作5.4155

5.7　用CSS配置字體156

font-family屬性156

動(dòng)手實(shí)作5.5156

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.6160

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

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

動(dòng)手實(shí)作5.7163

5.11　收藏圖標(biāo)164

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

動(dòng)手實(shí)作5.8165

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í)：

PacificTrailsResort170

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

PathofLightYogaStudio173

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

6.1　寬度和高度178

width屬性178

min-width屬性178

max-width屬性179

height屬性179

動(dòng)手實(shí)作6.1179

目錄｜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.2185

6.5　圓角186

動(dòng)手實(shí)作6.3187

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

動(dòng)手實(shí)作6.4188

6.7　CSS3的邊框和文本陰影190

CSS3的box-shadow屬性190

CSS3的text-shadow屬性191

動(dòng)手實(shí)作6.5191

6.8　背景圖片192

CSS3background-clip屬性192

CSS3background-origin屬性193

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

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

動(dòng)手實(shí)作6.6196

6.11　CSS3的opacity屬性198

動(dòng)手實(shí)作6.7198

6.12　CSS3RGBA顏色200

動(dòng)手實(shí)作6.8200

6.13　CSS3HSLA顏色202

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

HSLA顏色示例202

動(dòng)手實(shí)作6.9203

6.14　CSS3的漸變204

線性漸變語法204

輻射漸變語法204

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

動(dòng)手實(shí)作6.10205

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

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

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

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

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

PacificTrailsResort207

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

PathofLightYogaStudio211

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

7.1　正常流動(dòng)216

動(dòng)手實(shí)作7.1216

7.2　浮動(dòng)218

float屬性218

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

動(dòng)手實(shí)作7.2219

7.3　清除浮動(dòng)220

clear屬性220

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

7.4　溢出222

overflow屬性222

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

對比clear屬性與overflow屬性.223

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

7.5　CSS屬性box-sizing224

7.6　基本雙欄布局226

動(dòng)手實(shí)作7.3226

雙欄布局的例子229

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

用CSS配置無序列表230

用CSStext-decoration屬性消除

下畫線230

動(dòng)手實(shí)作7.4231

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

CSS的display屬性232

動(dòng)手實(shí)作7.5233

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

動(dòng)手實(shí)作7.6234

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

動(dòng)手實(shí)作7.7236

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

static定位238

fixed定位238

相對定位238

絕對定位239

7.12　練習(xí)定位240

動(dòng)手實(shí)作7.8240

7.13　CSS精靈242

動(dòng)手實(shí)作7.9242

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

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

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

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

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

PacificTrailsResort245

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

PathofLightYogaStudio247

第8章

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

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

相對鏈接的例子250

動(dòng)手實(shí)作8.1250

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

動(dòng)手實(shí)作8.2253

8.3　figure元素和figcaption元素254

figure元素254

figcaption元素254

添加圖題254

動(dòng)手實(shí)作8.3255

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

動(dòng)手實(shí)作8.4256

8.5　更多HTML5元素258

section元素258

article元素258

aside元素258

time元素258

動(dòng)手實(shí)作8.5258

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

配置CSS塊顯示260

動(dòng)手實(shí)作8.6260

8.7　CSS對打印的支持262

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

動(dòng)手實(shí)作8.7263

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

為OneWeb而設(shè)計(jì)265

8.9　viewportmeta標(biāo)記266

8.10　CSS3媒體查詢268

什么是媒體查詢268

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

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

查詢示例269

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

動(dòng)手實(shí)作8.8270

8.12　靈活圖像274

動(dòng)手實(shí)作8.9274

8.13　picture元素276

source元素276

動(dòng)手實(shí)作8.10276

8.14　靈活img元素屬性278

sizes屬性278

srcset屬性278

動(dòng)手實(shí)作8.11278

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

用桌面瀏覽器測試280

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

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

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

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

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

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

PacificTrailsResort283

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

PathofLightYogaStudio287

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

9.1　表格概述292

table元素292

border屬性292

表格標(biāo)題293

9.2　表行、單元格和表頭294

動(dòng)手實(shí)作9.1295

9.3　跨行和跨列296

動(dòng)手實(shí)作9.2296

9.4　配置無障礙訪問表格298

9.5　用CSS配置表格樣式300

動(dòng)手實(shí)作9.3300

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

動(dòng)手實(shí)作9.4302

配置首字母303

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

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

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

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

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

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

PacificTrailsResort308

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

PathofLightYogaStudio309

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

10.1　概述312

form元素313

表單控件313

10.2　文本框314

10.3　提交按鈕和重置按鈕316

提交按鈕316

重置按鈕316

示例表單316

動(dòng)手實(shí)作10.1316

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

復(fù)選框318

單選鈕319

10.5　隱藏字段和密碼框320

隱藏字段320

密碼框320

10.6　textarea元素322

動(dòng)手實(shí)作10.2323

10.7　sel