HTML5与CSS3入门经典（第4版）

　　《HTML5与CSS3入门经典（第4版）》针对HTML5和CSS3的**标准进行及时的更新和修订，包含的主题有：Internet和Web概念；创建HTML5网页；用CSS配置颜色和文本；用CSS配置页面布局；配置图像和多媒体；探索新增的CSS3特性；应用网页设计**实践；设计可访问和可用的网页；搜索引擎优化设计；选择域名；发布网站。 《HTML5与CSS3入门经典（第4版）》适合所有对网页设计感兴趣的读者阅读，是一本理想的入门教程。

　　特丽？ 菲尔克-莫里斯博士（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开发人员等。

目录

第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　sel