内容简介

《HTML5与CSS3入门经典(第4版)》针对HTML5和CSS3的最新标准进行及时的更新和修订，包含的主题有：Internet和Web概念；创建HTML5网页；用CSS配置颜色和文本；用CSS配置页面布局；配置图像和多媒体；探索新增的CSS3特性；应用网页设计最佳实践；设计可访问和可用的网页；搜索引擎优化设计；选择域名；发布网站。

《HTML5与CSS3入门经典(第4版)》适合所有对网页设计感兴趣的读者阅读，是一本理想的入门教程。

 

前言

《HTML5 与CSS3 入门经典》适合网页设计或开发初级课程。每个主题都用大约两页篇幅进行讲解，在指出关键知识点的同时，一般还包含动手实作。全书覆盖网页设计师需要掌握的所有基础知识，包括以下主题：

互联网和万维网的概念

用HTML5 创建网页

用层叠样式表(CSS) 配置文本、颜色和网页布局

对网页上的图片和多媒体进行配置

探索新的CSS3 属性

网页设计最佳实践

对无障碍访问、可用性和搜索引擎优化的考量

取得域名和主机

发布到网上

本书中文版的学生文件可以从配套网站http://pan.baidu.com/s/1yd43W 下载，其中包括动手实作的原始文件和解决方案，以及案例学习的原始文件。

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

更丰富的动手实作

全面更新了范例代码、案例学习和网络资源

更新了HTML5.1 元素和属性

扩充了网页布局设计

扩充了灵活响应网页设计技术和CSS 媒体查询

扩充了灵活响应图像技术，包括新的HTML5 元素picture

更新了HTML5 和CSS 参考资源

一个新的附录讨论了CSS 灵活布局模块：Flexbox

本书特色

立足当下，展望未来。本书采用独特的教学方式，使学生在学习适合当下的网页设计技能的同时，掌握新的HTML5 编码技术，迎接未来的挑战。

精心挑选主题。本书既传授“硬”技能，比如HTML5 和层叠样式表( 第1 章和第2 章，第4 章~ 第11 章)，也传授“软”技能，比如网页设计( 第3 章) 和发布到网上( 第12 章)。打下良好基础之后，学生作为网页设计师追寻自己的职业梦想时，会更加得心应手。使用本书的学生和老师会发现，我们这个课程变得更有趣了。

学生在创建网页和网站时，可以一起讨论、综合和运用软硬技能。每个主题都用两页的篇幅来讲解，除了快速提供需要掌握的知识点，还通过动手实作来立即巩固所学到的知识。

每个主题两页篇幅。每个主题都用简洁的、两页篇幅的一个小节进行讲述。许多小节还包含马上就可以开始的动手实作，旨在帮助巩固新学的技能或概念。这种精心设计对学业沉重的学生尤其有用，因为他们需要立即搞清楚关键的概念。

动手实作。网页开发是一门技能，只有通过动手实作才能更好地掌握。本书十分强调实际动手能力的培养，体现在每章的动手实作练习题、章末练习题以及通过真实的案例学习来完成网站的开发。

网站案例学习。从第2 章开始，案例学习将贯穿全书。它的作用是巩固每章所学的技能。教师资源中心提供了案例的示例解决方案，网址是http://www.pearsonhighered.com/irc。

聚焦网页设计。大多数章都提供额外的活动来探索与本章有关的网页设计主题。这些活动可以用于巩固、扩展和增强课程主题。

FAQ。在我的网页开发课堂中，学生经常会问到一些同样的问题。书中列出了这些问题，并用FAQ 标志注明。

聚焦于无障碍设计。开发无障碍网页的重要性日益增强，所以无障碍网页设计技术将贯穿全书。这个特殊标记可以让您更方便地找到这些信息。

聚焦于道德与伦理。本书使用特殊的道德规范标记注明与网页开发有关的道德规范话题。

简明提示。提供有用的背景资料，或者帮助提高生产力。

深入探索。这个特殊标记代表可供深入探索的网络资源，方便学生对当前的主题进行深入学习。

参考资料。附录提供了丰富的参考资料，包括HTML5 参考、CSS 参考、HTML5和XHTML 的比较、WCAG 2.0 快速参考、ARIA Landmark Roles 概述以及CSS Flexible Box Layout (Flexbox) 简介。

视频讲解(Video Note) 讲解关键编程概念和技术，演示从设计到编码来解决问题的过程。视频讲解方便学生自学自己感兴趣的主题，支持选择、播放、倒退、快进和暂停。每当看到 这样的图标，就表示视频讲解，都表明当前主题有对应的视频讲解。视频列表可从本书中文版配套网站获取，网址是http://pan.baidu.com/s/1yd43W。注意，由于是英文视频，所以为了方便索引，书中保留了这些视频的英文名称。

补充材料

学生资源。本书中文版读者请访问http://pan.baidu.com/s/1yd43W 获取学生资源（含视频讲解）。

教师资源。以下补充资源仅供认证教师使用，详情请发送电子邮件到coo@netease.com。

章末练习题答案

案例学习作业答案

试题

PPT 演示文稿

示范教学大纲

作者网站。除了出版社为本书提供的配套网站，作者另外建了一个网站，网址为http://www.webdevbas ics.net。该网站拥有许多额外的资源，包括调色板和学习/ 复习游戏，还为每一章都单独建了一个网页，提供这一章的示例、链接和更新信息。该网站由作者自行维护，和出版商无利益关系。

致谢

特别感谢Addison-Wesley 的工作人员，包括Matt Goldstein，Kristy Alaura 和Erin Ault。

感谢我的家人，尤其是我的“另一半”，感谢他的耐心、关爱、支持和鼓励。最后还要特别献给我的父亲，我们永远怀念他。

 

目录

第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 和URL                     10

域名                       10

顶级域名                   10

通用顶级域名               11

国家代码顶级域名           12

域名系统DNS                   13

1.6　网上的信息                      14

使用网上信息时的道德规范   15

1.7　HTML 概述                      16

什么是HTML               16

什么是XML                17

什么是XHTML                  17

HTML 的最新版本HTML5        17

1.8　网页幕后揭秘                    18

文档类型定义(DTD)         18

网页模板                   18

html 元素                  18

页头区域                   19

主体区域                   19

1.9　第一个网页                      20

动手实作1.1                20

保存文件                   22

复习和练习                      24

复习题                     24

动手练习                   24

网上调研                   25

聚焦网页设计               26

第2 章  HTML 基础                     27

2.1　标题元素                        28

动手实作2.1                28

无障碍访问和标题           29

HTML5 更多的标题选项     29

2.2　段落元素                        30

动手实作2.2                30

对齐                       31

2.3　换行和水平标尺                  32

换行元素                   32

水平标尺元素               32

动手实作2.3                32

动手实作2.4                33

2.4　块引用元素                      34

动手实作2.5                35

2.5　短语元素                        36

2.6　有序列表                        38

type 属性、start 属性和reversed

属性                       38

动手实作2.6                39

2.7　无序列表                        40

动手实作2.7                41

2.8　描述列表                        42

动手实作2.8                43

2.9　特殊字符                        44

动手实作2.9                44

2.10　HTML 语法校验                 46

动手实作2.10               46

2.11　结构元素                       48

div 元素                    48

header 元素                 48

nav 元素                        48

main 元素                       48

footer 元素                      48

动手实作2.11               49

2.12　练习使用结构元素               50

动手实作2.12               50

2.13　锚元素                         52

动手实作2.13               52

链接目标                   53

绝对链接                   53

相对链接                   53

block anchor                     53

无障碍访问和超链接         53

2.14　练习使用链接                   54

站点地图                   54

动手实作2.14               54

2.15　电子邮件链接                   58

动手实作2.15               59

复习和练习                      60

复习题                     60

动手练习                   61

聚焦网页设计               61

案例学习                   61

度假村案例学习：

Pacifi c Trails Resort               62

瑜珈馆案例学习：

Path of Light Yoga Studio      65

第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　配置内联CSS                   118

style 属性                      118

动手实作4.1               118

4.5　配置嵌入CSS                   120

style 元素                      120

动手实作4.2               120

4.6　配置外部CSS                   122

link 元素                       122

动手实作4.3               122

4.7　CSS 的class、ID 和后代选择符    124

class 选择符                    124

id 选择符                  124

后代选择符                124

动手实作4.4               125

4.8　span 元素                       126

span 元素                 126

动手实作4.5               126

4.9　练习使用CSS                   128

将嵌入CSS 转换为外部CSS      128

将网页与外部CSS 文件关联      128

动手实作4.6               128

VIII ｜ HTML5 与CSS3 入门经典( 第4 版)

4.10　层叠                          130

4.11　练习使用层叠                  132

动手实作4.7               132

4.12　CSS 语法校验                  134

动手实作4.8               134

复习和练习                     136

复习题                    136

动手练习                  137

聚焦网页设计              137

度假村案例学习：

Pacifi c Trails Resort              138

瑜珈馆案例学习：

Path of Light Yoga Studio     141

第5 章  图形和文本样式基础                 143

5.1　图片                           144

GIF 格式的图片            144

JPEG 格式的图片           144

PNG 格式的图片                145

5.2　img 元素                   146

动手实作5.1               146

用alt 属性提供无障碍访问   147

5.3　图片链接                       148

动手实作5.2               148

无障碍访问和图片链接      149

5.4　配置背景图片                   150

background-image 属性           150

同时使用背景颜色和背景图片150

浏览器如何显示背景图片    150

background-attachment 属性       151

5.5　定位背景图片                   152

background-repeat 属性           152

定位背景图片              152

动手实作5.3               153

5.6　用CSS3 配置多张背景图片   154

渐进式增强                154

动手实作5.4              155

5.7　用CSS 配置字体            156

font-family 属性                 156

动手实作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　练习配置图形和文本             160

动手实作5.6               160

5.10　用CSS 配置列表符号       162

用图片代替列表符号        163

动手实作5.7               163

5.11　收藏图标                      164

配置收藏图标              164

动手实作5.8               165

5.12　图像映射                      166

map 元素                  166

area 元素                  166

探索矩形图像映射          166

5.13　复习和练习                    168

复习题                    168

动手练习                  169

聚焦网页设计              170

度假村案例学习：

Pacifi c Trails Resort              170

瑜珈馆案例学习：

Path of Light Yoga Studio     173

第6 章  CSS 进阶                     177

6.1　宽度和高度                     178

width 属性                 178

min-width 属性             178

max-width 属性            179

height 属性                     179

动手实作6.1               179

目录 ｜ IX

6.2　框模型                         180

内容                      180

填充                      180

边框                      180

边距                      181

框模型实例                181

6.3　边距和填充                     182

margin 属性                182

padding 属性               182

6.4　边框                           184

动手实作6.2               185

6.5　圆角                           186

动手实作6.3               187

6.6　页面内容居中                   188

动手实作6.4               188

6.7　CSS3 的边框和文本阴影          190

CSS3 的box-shadow 属性    190

CSS3 的text-shadow 属性    191

动手实作6.5               191

6.8　背景图片                       192

CSS3 background-clip 属性       192

CSS3 background-origin 属性      193

6.9　背景图片的大小和缩放           194

6.10　练习使用CSS3 属性        196

动手实作6.6               196

6.11　CSS3 的opacity 属性            198

动手实作6.7               198

6.12　CSS3 RGBA 颜色               200

动手实作6.8               200

6.13　CSS3 HSLA 颜色               202

色调、饱和度、亮度和alpha    202

HSLA 颜色示例            202

动手实作6.9               203

6.14　CSS3 的渐变                   204

线性渐变语法              204

辐射渐变语法              204

CSS3 渐变和渐进式增强     204

动手实作6.10              205

复习和练习                     206

复习题                    206

动手练习                  207

聚焦网页设计              207

度假村案例学习：

Pacifi c Trails Resort              207

瑜珈馆案例学习：

Path of Light Yoga Studio     211

第7 章  页面布局基础                  215

7.1　正常流动                       216

动手实作7.1               216

7.2　浮动                           218

fl oat 属性                  218

浮动元素和正常流动        219

动手实作7.2               219

7.3　清除浮动                       220

clear 属性                      220

用换行清除浮动            220

7.4　溢出                           222

overfl ow 属性                   222

用overfl ow 属性清除浮动    222

对比clear 属性与overfl ow 属性   .223

用overfl ow 属性配置滚动条  223

7.5　CSS 属性box-sizing              224

7.6　基本双栏布局                   226

动手实作7.3               226

双栏布局的例子            229

7.7　用无序列表实现垂直导航         230

用CSS 配置无序列表            230

用CSS text-decoration 属性消除

下画线                    230

动手实作7.4               231

7.8　用无序列表实现水平导航         232

CSS 的display 属性         232

动手实作7.5               233

7.9　用伪类实现CSS 交互性      234

动手实作7.6               234

7.10　练习CSS 双栏布局         236

动手实作7.7               236

7.11　用CSS 进行定位           238

static 定位                 238

fi xed 定位                      238

相对定位                  238

绝对定位                  239

7.12　练习定位                      240

动手实作7.8               240

7.13　CSS 精灵                      242

动手实作7.9               242

复习和练习                     244

复习题                    244

动手练习                  245

聚焦网页设计              245

度假村案例学习：

Pacifi c Trails Resort              245

瑜珈馆案例学习：

Path of Light Yoga Studio     247

第8 章

链接、布局和移动开发进阶       249

8.1　相对链接的更多知识             250

相对链接的例子            250

动手实作8.1               250

8.2　区段标识符                     252

动手实作8.2               253

8.3　fi gure 元素和fi gcaption 元素       254

fi gure 元素                254

fi gcaption 元素                  254

添加图题                  254

动手实作8.3               255

8.4　图片浮动练习                   256

动手实作8.4               256

8.5　更多HTML5 元素           258

section 元素               258

article 元素                     258

aside 元素                      258

time 元素                  258

动手实作8.5               258

8.6　HTML5 与旧浏览器的兼容性      260

配置CSS 块显示                260

动手实作8.6               260

8.7　CSS 对打印的支持               262

打印样式最佳实践          262

动手实作8.7               263

8.8　移动网页设计                   264

移动网页设计要考虑的问题  264

为移动使用优化布局        264

优化移动导航              265

优化移动图片              265

优化移动文本              265

为One Web 而设计              265

8.9　viewport meta 标记               266

8.10　CSS3 媒体查询                 268

什么是媒体查询            268

使用link 元素的媒体查询例子268

使用@media 规则的媒体

查询示例                  269

8.11　练习媒体查询                  270

动手实作8.8               270

8.12　灵活图像                      274

动手实作8.9               274

8.13　picture 元素                    276

source 元素                    276

动手实作8.10              276

8.14　灵活img 元素属性              278

sizes 属性                      278

srcset 属性                 278

动手实作8.11              278

8.15　测试移动显示                  280

用桌面浏览器测试              280

针对专业开发人员          281

复习和练习                     282

复习题                    282

动手练习                  283

聚焦网页设计              283

度假村案例学习：

Pacifi c Trails Resort              283

瑜珈馆案例学习：

Path of Light Yoga Studio     287

第9 章  表格基础                          291

9.1　表格概述                       292

table 元素                 292

border 属性                    292

表格标题                  293

9.2　表行、单元格和表头             294

动手实作9.1               295

9.3　跨行和跨列                     296

动手实作9.2               296

9.4　配置无障碍访问表格             298

9.5　用CSS 配置表格样式        300

动手实作9.3               300

9.6　CSS3 结构性伪类                302

动手实作9.4               302

配置首字母                303

9.7　配置表格区域                   304

复习和练习                     306

复习题                    306

动手练习                  307

聚焦网页设计              307

度假村案例学习：

Pacifi c Trails Resort              308

瑜珈馆案例学习：

Path of Light Yoga Studio     309

第10 章  表单基础                           311

10.1　概述                          312

form 元素                      313

表单控件                  313

10.2　文本框                        314

10.3　提交按钮和重置按钮            316

提交按钮                  316

重置按钮                  316

示例表单                  316

动手实作10.1              316

10.4　复选框和单选钮                318

复选框                    318

单选钮                    319

10.5　隐藏字段和密码框              320

隐藏字段                  320

密码框                    320

10.6　textarea 元素                   322

动手实作10.2              323

10.7　select 元素和option 元素         324

select 元素                 324

option 元素                     324

10.8　label 元素                 326

动手实作10.3              327

10.9　fi eldset 元素和legend 元素   328

fi eldset 元素                    328

legend 元素                328

用CSS 配置fi eldset 分组样式     329

无障碍访问与表单          329

10.10　用CSS 配置表单样式      330

动手实作10.4             330

属性选择符               331

10.11　服务器端处理                 332

隐私和表单               333

10.12　练习创建表单                 334

动手实作10.5             334

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.6                 344

XII ｜ HTML5 与CSS3 入门经典( 第4 版)

复习和练习                     346

复习题                    346

动手练习                  347

聚焦网页设计              347

度假村案例学习：

Pacifi c Trails Resort              348

瑜珈馆案例学习：

Path of Light Yoga Studio     351

第11 章  媒体和交互性基础                   355

11.1　插件、容器和codec             356

辅助应用程序和插件        356

11.2　配置音频和视频                358

访问音频或视频文件        358

动手实作11.1              358

多媒体和无障碍访问        359

多媒体和浏览器兼容问题    359

11.3　Flash 和HTML5 元素embed 360

embed 元素                360

动手实作11.2              361

11.4　HTML5 元素audio 和source 362

audio 元素                 362

source 元素                362

动手实作11.3              363

11.5　HTML5 video 元素和source      364

video 元素                 364

source 元素                364

11.6　练习HTML5 视频          366

动手实作11.4              366

11.7　iframe 元素                368

动手实作11.5              369

11.8　CSS3 属性transform        370

CSS3 旋转变换             370

CSS3 伸缩变换             370

动手实作11.6              371

11.9　CSS3 属性transition             372

动手实作11.7              373

11.10　练习CSS 过渡            374

动手实作11.8              374

11.11　CSS 下拉菜单                 376

动手实作11.9                 376

11.12　HTML5 元素details 和

Summary                     378

details 元素                   378

summary 元素                 378

details 和summary widget   378

动手实作11.10                379

11.13　JavaScript 和jQuery            380

JavaScript                380

jQuery                   381

11.14　HTML5 API                  382

地理位置                     382

Web 存储                     382

离线Web 应用            382

用canvas 元素绘图        383

复习和练习                     384

复习题                    384

动手练习                  385

聚焦网页设计              385

度假村案例学习：

Pacifi c Trails Resort              385

瑜珈馆案例学习：

Path of Light Yoga Studio     387

第12 章  Web 发布基础                      391

12.1　注册域名                      392

选择域名                  392

注册域名                  393

12.2　选择主机                      394

主机的类型                394

选择虚拟主机              394

12.3　用FTP 发布               396

FTP 应用程序              396

用FTP 连接                    396

使用FTP                  396

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

Section 508 条款          402

WCAG                    402

测试无障碍设计相容性      403

12.7　可用性测试                    404

进行可用性测试            404

动手实作12.1              405

复习和练习                     406

复习题                    406

动手练习                  407

聚焦网页设计              407

度假村案例学习：

Pacifi c Trails Resort              408

咖啡馆案例学习：

JavaJam Coffee House            408

附录                         409

附录A　复习和练习答案         410

附录B　HTML5 速查表          411

附录C　CSS 速查表             416

附录D　对比XHTML 和HTML5 421

附录E　WCAG 2.0 快速参考          427

附录F　ARIA 地标角色          429

附录G　CSS fl exbox 模型             430

附录H　Web 安全调色板         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