《HTML5+CSS3网页设计实例教程》循序渐进地讲述Web网页设计技术，从基本概念到HTML5网页设计、CSS3样式控制以及综合实例，主要内容包括网页设计新时代、HTML5的演进、创建HTML5文档、表格与列表、图片与富媒体、HTML5表单的应用、CSS3概述、CSS3选择器、文本与字体、应用CSS3的属性、页面布局与媒介查询、变形和变换以及动画等，并且运用大量实例对各种关键技术进行深入浅出的分析。

《HTML5+CSS3网页设计实例教程》内容丰富、结构合理、思路清晰、语言简练流畅、示例翔实，既适合作为高等院校计算机相关专业的教材，也可作为网页设计应用开发人员的参考书。

《HTML5+CSS3网页设计实例教程》的电子课件、习题答案和实例源代码可以到http://www.tupwk.com.cn/downpage网站下载，也可通过扫描前言中的二维码下载。

前    言

Internet正在经历惊人的巨变，不仅有浩如烟海的用户人群，还有复杂多样的联网设备，网络的连接速度也与日俱增。简单的网页设计技术已经不能满足需求，HTML5和CSS3技术的更新，更加优化了网页设计的技术标准。

HTML5+CSS3以标准布局和精美样式，实现了网页内容和样式的分离，使网页样式布局和美化达到空前的高度，成为Web标准中不可替代的技术规范。本书以知识点示例、章节综合实例和全书综合实例等形式，全面涵盖网页设计的基础知识、HTML5和CSS3技术等。

《HTML5+CSS3网页设计实例教程》共13章，从Web网页设计的基本概念出发，由浅入深地详细讲述了包括网页设计新时代、HTML5的演进、创建HTML5文档、表格与列表、图片与富媒体、HTML5表的应用、CSS3概述、CSS3选择器、文本与字体、应用CSS3的属性、页面布局与媒介查询、变形和变换以及动画等内容。在讲述网页设计的各种技术时，运用丰富的实例，注重培养读者解决实际问题的能力，使大家快速掌握应用HTML5+CSS3进行网页设计的操作技术。

《HTML5+CSS3网页设计实例教程》内容丰富、结构合理、思路清晰、语言简练流畅、示例翔实。每一章的引言部分概述了该章的作用和内容。在每一章的正文中，结合所讲述的关键技术和难点，穿插了大量极富实用价值的示例。每一章末尾都安排了有针对性的思考题和练习题，思考题有助于读者巩固所学的基本概念，练习题有助于培养读者的实际动手能力，增强对基本概念的理解和实际应用能力。

《HTML5+CSS3网页设计实例教程》面向高等院校计算机相关专业师生，以及网页设计爱好者和制作人员。既适合作为高等院校网页设计课程的教材，也可作为网页设计应用开发人员的参考书。

参与《HTML5+CSS3网页设计实例教程》编写的人员均为高等院校从事计算机课程教学和研究的教师，全书共13章，其中集宁师范学院的杨福贞负责第1、2、7、8、9章的编写；集宁师范学院的何永峰负责第3、4、10、12章的编写；集宁师范学院的李岩负责第5、6、11、13章的编写。另外，参加《HTML5+CSS3网页设计实例教程》编写的人员还有薛山、梁琦、高宇飞、赵国桦、丁鑫、贾圣杰、武红欣、张晓菊、陈光训、吴超群、郑玉祥、付君泽、黄怀春、靳廷喜等人。全书整体框架设计由杨福贞负责，组稿工作由李岩负责，统稿工作由何永峰负责，薛山及梁琦等协助编者进行材料搜集工作。

《HTML5+CSS3网页设计实例教程》在编写过程中参考了国内同行和广大实践工作者的诸多文献与资料，并引用了部分材料与成果。在此一并致以深深的敬意和衷心的感谢。

尽管全体编写者都已倾尽全力而为，但由于水平有限，难免有疏漏和不足之处，希望同行专家给予指正。我们的电话是010-62796045，信箱是huchenhao@263.net。

《HTML5+CSS3网页设计实例教程》的电子课件、习题答案和实例源代码可以到http://www.tupwk.com.cn/downpage网站下载，也可通过扫描下方二维码下载。

 

作  者   

2018年10月

目    录

第1章  网页设计新时代   1

1.1  Web网页设计原则   1

1.1.1  Web标准   1

1.1.2  Web标准与浏览器的兼容性   3

1.1.3  可访问性   3

1.1.4  结构化文档的Web   4

1.2  HTML5概述   4

1.2.1  传统HTML与XHTML   4

1.2.2  HTML5是如何形成的   5

1.2.3  HTML5的设计原则   7

1.3  HTML5页面的特征   9

1.3.1  使用HTML5结构化元素   10

1.3.2  使用CSS3美化HTML5文档   13

1.4  Web网页设计基础   14

1.4.1  网页的基本元素   14

1.4.2  网页设计常用技术   17

1.4.3  网页设计常用工具   18

1.5  编写一个简单的Web页面   20

1.5.1  搭建浏览环境   20

1.5.2  检测浏览环境是否支持   20

1.5.3  使用HTML5编写一个简单的Web页面   21

1.6  本章小结   22

1.7  思考和练习   22

第2章  HTML5的演进   24

2.1  HTML与XHTML基础   24

2.1.1  标签与元素   24

2.1.2  特性组   26

2.1.3  HTML和XHTML实例   29

2.2  认识HTML5   31

2.2.1  用XHTML 1.0标记页面   31

2.2.2  84.8%的标记可以保留   32

2.3  关于<head>   33

2.3.1  更完美的DOCTYPE   33

2.3.2  在HTML5中声明语言   34

2.3.3  字符编码   35

2.3.4  简单易记   35

2.4  从HTML与XHTML到HTML5   35

2.4.1  XHTML 1.0风格的“Hello World!”   35

2.4.2  HTML 4.01风格的“Hello World!”   36

2.4.3  HTML5“松散”风格的“Hello World!”   36

2.4.4  HTML5“严格”风格的页面   37

2.5  让HTML5得到跨浏览器支持   37

2.5.1  浏览器如何处理未知元素   37

2.5.2  shiv   39

2.5.3  IE打印保护器   40

2.5.4  声明块级元素   40

2.6  HTML5样板页面   40

2.6.1  不再有type属性   41

2.6.2  填充材料与替换   42

2.7  HTML5页面验证   42

2.7.1  HTML5验证器   42

2.7.2  更新和验证“贝克小姐”页面   44

2.8  新的结构化元素   46

2.8.1  块级元素与行内元素   47

2.8.2  结构化构建块<div>、<section>和<article>   47

2.8.3  标题：<header>、<footer>、<hgroup>以及<h1>～<h6>   50

2.8.4  更多的结构化元素：<nav>、<aside>、<figure>以及<figcaption>   50

2.8.5  将一个简单的页面转换成HTML5页面   52

2.9  本章小结   54

2.10  思考和练习   55

第3章  创建HTML5文档   56

3.1  HTML5文档结构   56

3.1.1  构建基本的文档结构   56

3.1.2  用元数据元素说明文档   58

3.1.3  使用脚本元素   61

3.2  构建文档主体   62

3.2.1  基本文本格式化   62

3.2.2  链接与导航   67

3.3  描述文本级语义   78

3.3.1  描述文本级语义的元素   79

3.3.2  使用文本标记的实例   84

3.4  编辑文本   86

3.5  使用字符实体显示特殊字符   87

3.6  注释   87

3.7  本章小结   88

3.8  思考和练习   88

第4章  表格与列表   90

4.1  表格介绍   90

4.2  基本表格元素与特性   93

4.2.1  使用<table>元素创建表格   93

4.2.2  创建基本表格   95

4.3  为表格添加标题   96

4.4  表格区域分组   97

4.4.1  使用colspan特性跨越列   97

4.4.2  使用rowspan特性跨越行   98

4.4.3  将表格分解为表头、表体及表尾   99

4.4.4  使用<colgroup>元素对列进行分组   101

4.4.5  使用<col>元素在列间共享样式   102

4.5  嵌套表格   102

4.6  易访问表格   103

4.6.1  如何线性化表格   104

4.6.2  使用id、scope及headers特性   105

4.6.3  创建易访问表格   106

4.7  使用列表   107

4.7.1  使用<ul>元素创建无序列表   108

4.7.2  有序列表   108

4.7.3  定义列表   110

4.7.4  列表嵌套   111

4.8  表格应用实例   111

4.9  本章小结   113

4.10  思考和练习   114

第5章  图片与富媒体   115

5.1  在网页中添加图片   115

5.1.1  使用<img>元素添加图片   115

5.1.2  使用图片作为链接   117

5.1.3  选择正确的图片格式   118

5.2  HTML5的视频   119

5.2.1  视频格式   120

5.2.2  浏览器支持   121

5.2.3  添加视频源   121

5.2.4  track元素   124

5.2.5  更多的视频设置   126

5.3  HTML5的音频   127

5.3.1  音频编解码器   128

5.3.2  浏览器支持情况   128

5.3.3  添加音频源   129

5.3.4  使用jPlayer   129

5.4  canvas   129

5.4.1  基于像素的自由   129

5.4.2  添加/实现canvas   130

5.4.3  canvas的威力与潜力   137

5.5  SVG   139

5.5.1  SVG与canvas的选择   139

5.5.2  用SVG发布向量   140

5.6  富媒体页面的设计实例   142

5.7  本章小结   144

5.8  思考和练习   144

第6章  HTML5表单的应用   145

6.1  认识表单   145

6.2  使用<form>元素创建表单   147

6.2.1  action特性   147

6.2.2  method特性   148

6.2.3  id特性   148

6.2.4  name特性   148

6.2.5  enctype特性   148

6.2.6  accept-charset特性   148

6.2.7  novalidate特性   148

6.2.8  target特性   149

6.2.9  autocomplete特性   149

6.3  <form>元素中的表单控件   149

6.3.1  文本输入控件   149

6.3.2  新的HTML5输入控件类型与特性   153

6.3.3  按钮   159

6.3.4  复选框   161

6.3.5  单选按钮   163

6.3.6  下拉选择框   164

6.3.7  文件选择框   167

6.3.8  隐藏控件   168

6.3.9  新的HTML5表单元素   168

6.4  创建一个联系方式表单   170

6.5  使用<label>元素为控件创建标签   172

6.6  使用<fieldset>及<legend>元素组织表单结构   173

6.7  焦点   174

6.7.1  标签遍历顺序   175

6.7.2  快捷键   176

6.8  disabled与readonly控件   176

6.9  向服务器发送表单数据   178

6.9.1  HTTP get方法   178

6.9.2  HTTP post方法   179

6.10  创建更有用的表单字段   179

6.11  本章小结   181

6.12  思考和练习   182

第7章  CSS3概述   183

7.1  CSS基础   183

7.1.1  CSS演变历史   183

7.1.2  CSS的版本   184

7.1.3  CSS规则   187

7.1.4  继承   190

7.2  CSS规则的添加位置   191

7.2.1  用<link>元素链入外部样式表   192

7.2.2  用<style>元素导入外部样式表   193

7.2.3  使用外部样式表   193

7.2.4  外部样式表的优势   196

7.3  CSS属性   197

7.4  CSS3新增特性   198

7.4.1  CSS3模块化方式   198

7.4.2  CSS3新增属性及伪类   200

7.4.3  CSS3的优点   201

7.5  一个基本实例   202

7.6  本章小结   205

7.7  思考和练习   205

第8章  CSS3选择器   206

8.1  选择器概述   206

8.2  选择器   208

8.2.1  通用选择器   208

8.2.2  类型选择器   208

8.2.3  类选择器   208

8.2.4  id选择器   209

8.2.5  子选择器   209

8.2.6  后代选择器   209

8.2.7  相邻兄弟选择器   210

8.2.8  一般兄弟选择器   210

8.2.9  子选择器与相邻兄弟选择器的用途   210

8.2.10  特性选择器   211

8.3  CSS3选择器   213

8.3.1  组合器   213

8.3.2  特性选择器和子串选择器   214

8.3.3  UI元素状态伪类   218

8.3.4  :target伪类   220

8.3.5  结构伪类   223

8.3.6  伪元素   229

8.3.7  否定伪类   231

8.4  浏览器支持   232

8.6  应用实例   232

8.7  本章小结   235

8.8  思考和练习   235

第9章  文本与字体   237

9.1  用CSS控制文本   237

9.1.1  字库和字体   238

9.1.2  font-family属性   238

9.1.3  font-size属性   239

9.1.4  font-weight属性   240

9.1.5  font-style属性   241

9.1.6  font-variant属性   242

9.2  用CSS格式化文本   243

9.2.1  color属性   243

9.2.2  text-align属性   243

9.2.3  vertical-align属性   244

9.2.4  text-decoration属性   245

9.2.5  text-indent属性   245

9.2.6  text-shadow属性   246

9.2.7  text-transform属性   246

9.2.8  letter-spacing属性   247

9.2.9  word-spacing属性   248

9.2.10  white-space属性   248

9.2.11  direction属性   249

9.2.12  文本伪类   250

9.3  文本样式化实例   250

9.4  使用@font-face自定义字体   252

9.4.1  解析@font-face语法: @font-face声明   252

9.4.2  @font-face的可靠语法   253

9.4.3  为网页添加自定义字体的实例   253

9.5  使用CSS3调整字体   256

9.5.1  设置font-family   256

9.5.2  设置字号   257

9.5.3  选择字形的粗细   257

9.5.4  选择正确的字宽   258

9.5.5  设置垂直间距   258

9.5.6  用网格设计字体   258

9.6  使用CSS3控制文本格式   261

9.6.1  控制文本溢出   261

9.6.2  从基线开始垂直对齐文本   261

9.6.3  控制单词中各个字符之间的空白   262

9.6.4  调整字间距   262

9.6.5  打断长单词   263

9.6.6  控制空白和换行符   263

9.6.7  打印断字   264

9.6.8  控制文本标点符号   265

9.6.9  控制非拉丁Web字体的显示   266

9.6.10  使用连字和其他OpenType字体功能   267

9.7  本章小结   268

9.8  思考和练习   268

第10章  应用CSS3的属性   270

10.1  颜色与透明度   270

10.1.1  RGB   270

10.1.2  RGBa透明度   271

10.1.3  HSLa   272

10.1.4  不透明度   273

10.2  背景   274

10.2.1  background-clip属性   274

10.2.2  background-origin属性   275

10.2.3  background-size属性   277

10.2.4  多重背景   279

10.3  边框   281

10.3.1  border-radius属性   282

10.3.2  border-image属性   284

10.4  下拉阴影   286

10.4.1  box-shadow属性   286

10.4.2  text-shadow属性   288

10.5  渐变   289

10.6  检测支持和辅助其他浏览器   293

10.6.1  使用Modernizr   294

10.6.2  CSS3 Pie   294

10.7  组合CSS3效果实例   295

10.8  本章小结   297

10.9  思考和练习   297

第11章  页面布局与媒体查询   299

11.1  盒子模型   299

11.1.1  一个演示盒子模型的示例   300

11.1.2  border属性   301

11.1.3  padding属性   303

11.1.4  margin属性   304

11.1.5  内容盒子的尺寸   305

11.2  使用CSS定位与布局   309

11.2.1  正常流   309

11.2.2  position属性   310

11.2.3  盒子偏移属性   310

11.2.4  相对定位   310

11.2.5  绝对定位   311

11.2.6  固定定位   312

11.2.7  z-index属性   313

11.2.8  使用float属性实现流动   314

11.2.9  clear属性   316

11.3  构建页面布局实例   317

11.4  媒体查询   320

11.5  CSS3布局   322

11.5.1  CSS3定位布局模块   322

11.5.2  CSS3碎片模块   322

11.5.3  多列布局模块   322

11.5.4  CSS3区域模块   325

11.5.5  CSS3排除和形状模块   326

11.5.6  CSS3分页媒体模块   327

11.5.7  用于分页媒体模块的CSS生成内容   328

11.5.8  弹性盒子布局模块   329

11.5.9  CSS网格布局模块   331

11.6  本章小结   332

11.7  思考和练习   332

第12章  变形、变换和动画   334

12.1  CSS的2D和3D变形   334

12.1.1  变形属性和变形函数   335

12.1.2  元素的变形效果   336

12.1.3  修改变形对象   342

12.1.4  浏览器对CSS变形的支持   346

12.2  CSS变换和CSS动画   348

12.3  CSS变换   348

12.3.1  使用transition-property设置可变换的属性   349

12.3.2  使用transition-duration控制变换的持续时间   351

12.3.3  transition-timing-function、三次贝塞尔曲线和steps()函数   351

12.3.4  使用transition-delay推迟变换的起始时间   353

12.3.5  多个变换值和简写形式的变换属性   354

12.3.6  简写变换属性时值的排序   354

12.3.7  浏览器对CSS变换的支持   354

12.4  使用CSS动画制作关键帧动画   355

12.4.1  创建一个简单动画   356

12.4.2  使用@keyframes控制动画   357

12.4.3  使用animation-timing-function属性的计时函数   358

12.4.4  使用animation-delay修改动画的起始方式   359

12.4.5  控制动画的运行次数   359

12.4.6  结合animation-direction   360

12.4.7  控制元素在动画前后的表现   360

12.4.8  暂停动画   362

12.4.9  简略形式的动画属性以及用逗号分隔的animation-*值   362

12.4.10  浏览器对CSS动画的支持   363

12.5  CSS动画+JavaScript   363

12.6  本章小结   364

12.7  思考和练习   364

第13章  网页设计综合实例   366

13.1  设计旅游网站网页   366

13.1.1  页面的设计   366

13.1.2  全局样式的设计   368

13.1.3  网页首部(top区)   368

13.1.4  主内容区(main区)   371

13.1.5  页尾区(footer区)   379

13.2  设计网页游戏   380

13.2.1  游戏简介   380

13.2.2  界面布局的设计   381

13.2.3  数据模型的设计   385

13.2.4  游戏的逻辑实现   388

13.2.5  游戏的完整代码   397

参考文献   398

 

《HTML5+CSS3网页设计实例教程》内容丰富、结构合理、思路清晰、语言简练流畅、示例翔实。每一章的引言部分概述了该章的作用和内容。在每一章的正文中，结合所讲述的关键技术和难点，穿插了大量极富实用价值的示例。每一章末尾都安排了有针对性的思考题和练习题，思考题有助于读者巩固所学的基本概念，练习题有助于培养读者的实际动手能力，增强对基本概念的理解和实际应用能力。

《HTML5+CSS3网页设计实例教程》内容丰富、结构合理、思路清晰、语言简练流畅、示例翔实。每一章的引言部分概述了该章的作用和内容。在每一章的正文中，结合所讲述的关键技术和难点，穿插了大量极富实用价值的示例。每一章末尾都安排了有针对性的思考题和练习题，思考题有助于读者巩固所学的基本概念，练习题有助于培养读者的实际动手能力，增强对基本概念的理解和实际应用能力。