《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和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版)》具有经典教材的特色，通俗易懂，结构清晰，由浅入深地阐述网页设计师必知必会的基本技能和概念：

概要介绍互联网与万维网

HTML5网页开发基础

运用CSS配置色彩与文本

运用CSS配置页面布局

配置图像与多媒体

探究新增的CSS3属性

应用网页设计最佳实践

设计无障碍、使用体验更好的网页

为搜索引擎优化而设计

选择域名

上线

第4版新增特色

在沿袭前几版经典教材风格的基础上，新版进行修订和更新，全面覆盖HTML+CSS，主题涉及文本配置、色彩配置和页面布局，进一步聚焦于网页设计、无障碍和Web标准。

根据更新标准修订HTML5元素和属性

进一步探讨响应式网页设计技术与CSS媒体查询

进一步覆盖响应式图像技术，重点介绍新增的HTML5元素Picture

引入动态菜单的CSS编码技术

更新HTML5+ CSS参考资源

新增动手实作，新增案例

修订范例代码与网络资源

新增附录，简要介绍Flexbox (CSS Flexible Box Layout)

特丽? 菲尔克-莫里斯博士（Terry Felke-Morris），美国哈珀学院荣休教授，她身兼作者、教师、设计师及摄影师多重身份，熟悉各种平台和软件开发语言，有超过25年的IT经验，讲授的课程有网页开发、计算机信息系统、教学技术和数学，以及信息管理和数据库研究生课程。

莫里斯博士富有创新精神，先后荣获2002—2003年度 Glenn A. Reich纪念奖（嘉奖她在教育技术方面所做的努力）和2006年度 Blackboard Greenhouse远程教学模范奖（嘉奖她在课堂教学中带头使用互联网），还作为2008年度远程教育优秀教师入选美国教育技术委员会。

莫里斯博士的《学习HTML5》系列已经出版发行到第8版，另一本以动手实作和案例学习著称的入门经典《HTML5与CSS3入门经典》系列也备受广大师生青睐。

她一直保持着旺盛的学习力，拥有教育学博士学位、信息系统硕士学位和远程教学硕士学位，她有很多从业资格证书，比如CIW电子商务设计师、CIW设计师、CIW认证讲师，WOW网络管理员和Adobe认证Dreamweaver 8开发人员等。