HTML5與CSS3入門經典（第4版）

內容簡介

《HTML5與CSS3入門經典(第4版)》針對HTML5和CSS3的最新標準進行及時的更新和修訂，包含的主題有：Internet和Web概念；創建HTML5網頁；用CSS配置顏色和文本；用CSS配置頁面布局；配置圖像和多媒體；探索新增的CSS3特性；套用網頁設計最佳實踐；設計可訪問和可用的網頁；搜尋引擎最佳化設計；選擇域名；發布網站。

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

圖書目錄

第1章雄頸網際網路和全球資訊網基礎1

1.1　互霸槳簽聯網和全球資訊網2

網際網路2

網際網路的誕生2

網際網路的發展霉虹閥2

全球資訊網的誕生2

第一個圖形化瀏覽器3

各種技術的聚合3

1.2　網頁標準和無障礙訪問4

W3C推薦標準4

網頁標準和無障礙訪問4

無障礙訪問和法律4

網頁通用設計5

1.3　瀏覽器和伺服器6

網路概述6

客戶端/伺服器模型6

客戶端7

服腳市雄務器7

1.4　Internet協定8

電子郵件協定8

超文本傳輸協定8

檔案傳輸協定8

傳輸控制協定/Internet協定8

IP位址9

1.5　統一資源標識符(URI)和域名10

URI和URL10

域名10

頂級域名10

通用頂級域名11

國家代碼頂級域名12

域名系統DNS13

1.6　網上的信息14

使用網上信息時的道德規範15

1.7　HTML概述16

什麼是HTML16

什麼是XML17

什麼是XHTML17

HTML的最新版本HTML517

1.8　網頁幕後揭秘18

文檔類型定義(DTD)18

網頁模板18

html元素18

頁頭區域19

主體區域19

1.9　第一個網頁20

動手實作1.120

保存檔案22

複習和練習24

複習題24

動手練習24

網上調研25

聚焦網頁設計26

第2章HTML基礎27

2.1　標題元素28

動手實作2.128

無障礙訪問和標題29

HTML5更多的標題選項29

2.2　段落元素30

動手實作2.230

對齊31

2.3　換行和水平標尺32

換行元素32

水平標尺元素32

動手實作2.332

動手實作2.433

2.4　塊引用元素34

動手實作2.535

2.5　短語元素36

2.6　有序列表38

type屬性、start屬性和reversed

屬性38

動手實作2.639

2.7　無序列表40

動手實作2.741

2.8　描述列表42

動手實作2.843

2.9　特殊字元44

動手實作2.944

2.10　HTML語法校驗46

動手實作2.1046

2.11　結構元素48

div元素48

header元素48

nav元素48

main元素48

footer元素48

動手實作2.1149

2.12　練習使用結構元素50

動手實作2.1250

2.13　錨元素52

動手實作2.1352

連結目標53

絕對連結53

相對連結53

blockanchor53

無障礙訪問和超連結53

2.14　練習使用連結54

站點地圖54

動手實作2.1454

2.15　電子懂蜜元郵件連結58

動手實作2.1559

複習和練習60

複習題60

動手練習61

聚焦網頁設計61

案例學習61

度假村案例學習：

PacificTrailsResort62

瑜珈館案例學習：

PathofLightYogaStudio65

第3章懂微晚遙網頁設計基礎71

3.1　為目標客群設計72

瀏覽器73

螢幕解析度73

3.2　網站的組織74

分級式組織74

線性組織75

隨機組織75

3.3　視覺設計原則76

重複：在整個設計中重複視覺

元素76

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

注意力77

近似：分組相關項目77

對齊：對齊陵享己諒元素實現視覺上的

統一77

3.4　提供無障礙訪問78

通用設計和增強無障礙訪問的

受益者78

無障礙設計有助於提高在搜尋

引擎中的排名78

法律規定79

無障礙設計的熱潮79

3.5　文本的使用80

文本設計的注意事項80

3.6　調色板82

十六進制顏色值82

網頁安全色83

無障礙設計和顏色83

3.7　針對目標客群進行設計84

面向兒童84

面向年輕人84

面向所有人85

面向老年人85

3.8　選擇顏色方案86

以一張圖片為基礎的方案86

色輪86

變深、變淺和變灰87

單色88

相似色88

互補色88

分散互補色89

三色89

四色89

實現顏色方案89

3.9　使用圖片和多媒體90

檔案大小和圖片尺寸90

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

只使用必要的多媒體91

提供替代文本91

3.10　更多設計考慮92

感覺到的載入時間93

第一屏93

適當留白93

水平滾動93

3.11　導航設計94

網站要易於導航94

導航欄94

麵包屑導航94

圖片導航95

動態導航95

站點地圖95

站點搜尋功能95

3.12　線框和頁面布局96

3.13　固定布局和流動布局98

固定布局98

流動布局98

3.14　為行動網路設計100

三種方式100

移動設備設計考慮100

桌面和移動網站的例子101

移動設計小結101

3.15　靈活回響的網頁設計102

3.16　網頁設計最佳實踐104

複習和練習106

複習題106

動手練習107

聚焦網頁設計108

網頁項目案例學習108

項目里程碑108

第4章CSS基礎111

4.1　CSS概述112

層疊樣式表的優點112

配置CSS的方法113

層疊樣式表的“層疊”113

4.2　CSS選擇符和聲明114

CSS語法基礎114

background-color屬性114

color屬性115

配置背景色和文本色115

4.3　CSS顏色值語法116

4.4　配置內聯CSS118

style屬性118

動手實作4.1118

4.5　配置嵌入CSS120

style元素120

動手實作4.2120

4.6　配置外部CSS122

link元素122

動手實作4.3122

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

class選擇符124

id選擇符124

後代選擇符124

動手實作4.4125

4.8　span元素126

span元素126

動手實作4.5126

4.9　練習使用CSS128

將嵌入CSS轉換為外部CSS128

將網頁與外部CSS檔案關聯128

動手實作4.6128

VIII|HTML5與CSS3入門經典(第4版)

4.10　層疊130

4.11　練習使用層疊132

動手實作4.7132

4.12　CSS語法校驗134

動手實作4.8134

複習和練習136

複習題136

動手練習137

聚焦網頁設計137

度假村案例學習：

PacificTrailsResort138

瑜珈館案例學習：

PathofLightYogaStudio141

第5章圖形和文本樣式基礎143

5.1　圖片144

GIF格式的圖片144

JPEG格式的圖片144

PNG格式的圖片145

5.2　img元素146

動手實作5.1146

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

5.3　圖片連結148

動手實作5.2148

無障礙訪問和圖片連結149

5.4　配置背景圖片150

background-image屬性150

同時使用背景顏色和背景圖片150

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

background-attachment屬性151

5.5　定位背景圖片152

background-repeat屬性152

定位背景圖片152

動手實作5.3153

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

漸進式增強154

動手實作5.4155

5.7　用CSS配置字型156

font-family屬性156

動手實作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　練習配置圖形和文本160

動手實作5.6160

5.10　用CSS配置列表符號162

用圖片代替列表符號163

動手實作5.7163

5.11　收藏圖示164

配置收藏圖示164

動手實作5.8165

5.12　圖像映射166

map元素166

area元素166

探索矩形圖像映射166

5.13　複習和練習168

複習題168

動手練習169

聚焦網頁設計170

度假村案例學習：

PacificTrailsResort170

瑜珈館案例學習：

PathofLightYogaStudio173

第6章CSS進階177

6.1　寬度和高度178

width屬性178

min-width屬性178

max-width屬性179

height屬性179

動手實作6.1179

|IX

6.2　框模型180

內容180

填充180

框線180

邊距181

框模型實例181

6.3　邊距和填充182

margin屬性182

padding屬性182

6.4　框線184

動手實作6.2185

6.5　圓角186

動手實作6.3187

6.6　頁面內容居中188

動手實作6.4188

6.7　CSS3的框線和文本陰影190

CSS3的box-shadow屬性190

CSS3的text-shadow屬性191

動手實作6.5191

6.8　背景圖片192

CSS3background-clip屬性192

CSS3background-origin屬性193

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

6.10　練習使用CSS3屬性196

動手實作6.6196

6.11　CSS3的opacity屬性198

動手實作6.7198

6.12　CSS3RGBA顏色200

動手實作6.8200

6.13　CSS3HSLA顏色202

色調、飽和度、亮度和alpha202

HSLA顏色示例202

動手實作6.9203

6.14　CSS3的漸變204

線性漸變語法204

輻射漸變語法204

CSS3漸變和漸進式增強204

動手實作6.10205

複習和練習206

複習題206

動手練習207

聚焦網頁設計207

度假村案例學習：

PacificTrailsResort207

瑜珈館案例學習：

PathofLightYogaStudio211

第7章頁面布局基礎215

7.1　正常流動216

動手實作7.1216

7.2　浮動218

float屬性218

浮動元素和正常流動219

動手實作7.2219

7.3　清除浮動220

clear屬性220

用換行清除浮動220

7.4　溢出222

overflow屬性222

用overflow屬性清除浮動222

對比clear屬性與overflow屬性.223

用overflow屬性配置滾動條223

7.5　CSS屬性box-sizing224

7.6　基本雙欄布局226

動手實作7.3226

雙欄布局的例子229

7.7　用無序列表實現垂直導航230

用CSS配置無序列表230

用CSStext-decoration屬性消除

下畫線230

動手實作7.4231

7.8　用無序列表實現水平導航232

CSS的display屬性232

動手實作7.5233

7.9　用偽類實現CSS互動性234

動手實作7.6234

7.10　練習CSS雙欄布局236

動手實作7.7236

7.11　用CSS進行定位238

static定位238

fixed定位238

相對定位238

絕對定位239

7.12　練習定位240

動手實作7.8240

7.13　CSS精靈242

動手實作7.9242

複習和練習244

複習題244

動手練習245

聚焦網頁設計245

度假村案例學習：

PacificTrailsResort245

瑜珈館案例學習：

PathofLightYogaStudio247

第8章

連結、布局和移動開發進階249

8.1　相對連結的更多知識250

相對連結的例子250

動手實作8.1250

8.2　區段標識符252

動手實作8.2253

8.3　figure元素和figcaption元素254

figure元素254

figcaption元素254

添加圖題254

動手實作8.3255

8.4　圖片浮動練習256

動手實作8.4256

8.5　更多HTML5元素258

section元素258

article元素258

aside元素258

time元素258

動手實作8.5258

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

配置CSS塊顯示260

動手實作8.6260

8.7　CSS對列印的支持262

列印樣式最佳實踐262

動手實作8.7263

8.8　移動網頁設計264

移動網頁設計要考慮的問題264

為移動使用最佳化布局264

最佳化移動導航265

最佳化移動圖片265

最佳化移動文本265

為OneWeb而設計265

8.9　viewportmeta標記266

8.10　CSS3媒體查詢268

什麼是媒體查詢268

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

使用@media規則的媒體

查詢示例269

8.11　練習媒體查詢270

動手實作8.8270

8.12　靈活圖像274

動手實作8.9274

8.13　picture元素276

source元素276

動手實作8.10276

8.14　靈活img元素屬性278

sizes屬性278

srcset屬性278

動手實作8.11278

8.15　測試移動顯示280

用桌面瀏覽器測試280

針對專業開發人員281

複習和練習282

複習題282

動手練習283

聚焦網頁設計283

度假村案例學習：

PacificTrailsResort283

瑜珈館案例學習：

PathofLightYogaStudio287

第9章表格基礎291

9.1　表格概述292

table元素292

border屬性292

表格標題293

9.2　表行、單元格和表頭294

動手實作9.1295

9.3　跨行和跨列296

動手實作9.2296

9.4　配置無障礙訪問表格298

9.5　用CSS配置表格樣式300

動手實作9.3300

9.6　CSS3結構性偽類302

動手實作9.4302

配置首字母303

9.7　配置表格區域304

複習和練習306

複習題306

動手練習307

聚焦網頁設計307

度假村案例學習：

PacificTrailsResort308

瑜珈館案例學習：

PathofLightYogaStudio309

第10章表單基礎311

10.1　概述312

form元素313

表單控制項313

10.2　文本框314

10.3　提交按鈕和重置按鈕316

提交按鈕316

重置按鈕316

示例表單316

動手實作10.1316

10.4　複選框和單選鈕318

複選框318

單選鈕319

10.5　隱藏欄位和密碼框320

隱藏欄位320

密碼框320

10.6　textarea元素322

動手實作10.2323

10.7　select元素和option元素324

select元素324

option元素324

10.8　label元素326

動手實作10.3327

10.9　fieldset元素和legend元素328

fieldset元素328

legend元素328

用CSS配置fieldset分組樣式329

無障礙訪問與表單329

10.10　用CSS配置表單樣式330

動手實作10.4330

屬性選擇符331

10.11　伺服器端處理332

隱私和表單333

10.12　練習創建表單334

動手實作10.5334

10.13　HTML5文本表單控制項336

E-mail地址輸入表單控制項336

URL表單輸入控制項336

電話號碼錶單輸入控制項337

搜尋詞輸入表單控制項337

HTML5文本框表單控制項的

有效屬性337

10.14　HTML5的datalist元素338

10.15　HTML5的slider控制項和

spinner控制項340

slider表單輸入控制項340

spinner表單輸入控制項340

HTML5和漸進式增強341

10.16　HTML5日曆和顏色池控制項342

日曆輸入表單控制項342

顏色池表單控制項343

10.17　練習創建HTML5表單344

動手實作10.6344

XII|HTML5與CSS3入門經典(第4版)

複習和練習346

複習題346

動手練習347

聚焦網頁設計347

度假村案例學習：

PacificTrailsResort348

瑜珈館案例學習：

PathofLightYogaStudio351

第11章媒體和互動性基礎355

11.1　外掛程式、容器和codec356

輔助應用程式和外掛程式356

11.2　配置音頻和視頻358

訪問音頻或視頻檔案358

動手實作11.1358

多媒體和無障礙訪問359

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

11.3　Flash和HTML5元素embed360

embed元素360

動手實作11.2361

11.4　HTML5元素audio和source362

audio元素362

source元素362

動手實作11.3363

11.5　HTML5video元素和source364

video元素364

source元素364

11.6　練習HTML5視頻366

動手實作11.4366

11.7　iframe元素368

動手實作11.5369

11.8　CSS3屬性transform370

CSS3旋轉變換370

CSS3伸縮變換370

動手實作11.6371

11.9　CSS3屬性transition372

動手實作11.7373

11.10　練習CSS過渡374

動手實作11.8374

11.11　CSS下拉選單376

動手實作11.9376

11.12　HTML5元素details和

Summary378

details元素378

summary元素378

details和summarywidget378

動手實作11.10379

11.13　JavaScript和jQuery380

JavaScript380

jQuery381

11.14　HTML5API382

地理位置382

Web存儲382

離線Web套用382

用canvas元素繪圖383

複習和練習384

複習題384

動手練習385

聚焦網頁設計385

度假村案例學習：

PacificTrailsResort385

瑜珈館案例學習：

PathofLightYogaStudio387

第12章Web發布基礎391

12.1　註冊域名392

選擇域名392

註冊域名393

12.2　選擇主機394

主機的類型394

選擇虛擬主機394

12.3　用FTP發布396

FTP應用程式396

用FTP連線396

使用FTP396

12.4　提交到搜尋引擎398

搜尋引擎的組成398

在搜尋引擎中列出你的網站399

|XIII

12.5　搜尋引擎最佳化400

關鍵字400

網頁標題400

標題標記400

描述400

meta標記400

連結401

圖片和多媒體401

有效代碼401

有價值的內容401

12.6　無障礙訪問測試402

通用設計和無障礙訪問402

Web無障礙訪問標準402

Section508條款402

WCAG402

測試無障礙設計相容性403

12.7　可用性測試404

進行可用性測試404

動手實作12.1405

複習和練習406

複習題406

動手練習407

聚焦網頁設計407

度假村案例學習：

PacificTrailsResort408

咖啡館案例學習：

JavaJamCoffeeHouse408

附錄409

附錄A　複習和練習答案410

附錄B　HTML5速查表411

附錄C　CSS速查表416

附錄D　對比XHTML和HTML5421

附錄E　WCAG2.0快速參考427

附錄F　ARIA地標角色429

附錄G　CSSflexbox模型430

附錄H　Web安全調色板435

視頻講解

視頻講解：EvolutionoftheWeb2

視頻講解：YourFirstWebPage20

視頻講解：TMLValidation46

視頻講解：PrinciplesofVisualDesign76

視頻講解：ExternalStyleSheets122

視頻講解：CSSValidation134

視頻講解：BackgroundImages152

視頻講解：CSSRoundedCorners186

視頻講解：InteractivitywithCSSPseudo-Classes234

視頻講解：LinkingtoaNamedFragment252

視頻講解：ConfigureaTable294

視頻講解：ConnectaformtoServer-sideProcessing332

視頻講解：HTML5Video364

視頻講解：ConfigureanInlineFrame369

視頻講解：ChoosingaDomainName392

HTML5與CSS3入門經典（第4版）

基本介紹

內容簡介

圖書目錄

相關詞條

熱門詞條