内 容 简 介本书从初学者的角度出发，由浅入深、循序渐进地介绍了HTML 5和CSS 3应用与开发的相关知识，书中提供了大量操作HTML 5和CSS 3新增功能的示例，还提供了用于演练的实战和上机练习。本书共分为15章，主要内容包括HTML文档结构、文档基础标记、列表标记、表格标记和表单标记，CSS发展历史、基本语法和常用样式，JavaScript脚本的基本语法、变量、运算符、语句类型、对象和函数，网页设计流程和网页布局，HTML 5的发展历史、使用HTML 5的原因、HTML 5的语法，新增的结构元素、分组元素、文本语义元素、交互元素、音频和视频元素、标准属性，新增表单元素、新增输入类型、新增表单属性、表单验证，canvas元素及其API绘图，文件操作和文件拖放、客户端存储数据、本地数据库、跨文档传输信息、多线程、获取位置信息，CSS 3新增颜色、新增选择器、新增文件属性、字体属性、背景属性、边框属性、盒模型、页面布局，以及渐变、转换、过渡和动画等内容。在本书最后一章利用HTML 5和CSS 3等技术实现一个案例作为结束。本书几乎涉及HTML 5和CSS 3应用与开发的所有重要知识，适合所有的HTML 5和CSS 3初学者进行学习。另外，对于大中专和培训班的学生来说，本书更是一本不可多得的教材。前 言
将HTML、CSS和JavaScript结合使用是一种最常用的网页布局，HTML即超文本标记语言，它使用标记来描述网页。HTML 5是HTML早期版本的自然延续，它尽可能地满足了当前网站和未来网站的需求。HTML 5从以前的版本中继承了大部分特性，这就意味着，HTML 5的大部分内容都可以兼容新旧浏览器，向后兼容是HTML 5的一项重要设计原则。
CSS在1996年正式推出，HTML诞生几年之后才出现了CSS的第一个版本，CSS是指层叠样式表，它的样式定义了如何显示HTML网页中的元素。CSS 3是CSS早期版本的自然延续，它比早期版本更为强大，引入了大量的视觉效果，例如阴影、文字阴影、圆角和渐变等。
本书详细介绍HTML 5和CSS 3的新增知识，在介绍这些新增功能的同时，还会介绍HTML和CSS早期版本的一些内容，以及JavaScript的基础知识。
1. 本书内容
全书共分15章，主要内容如下。
第1章：HTML快速入门。首先向读者介绍HTML的概念及其发展历史，然后重点讲解HTML 4的文档结构及其提供的标记。
第2章：CSS基础。首先向读者介绍CSS的概念及其发展历史，然后重点介绍CSS 2的常用语法和常用样式。
第3章：JavaScript脚本语言。从JavaScript脚本的概念开始介绍，然后依次介绍脚本的基础语法、变量、运算符、语句类型和常用对象等内容。
第4章：网页设计实战案例。向读者介绍实际网页设计时需要掌握的各种技能。包括网页设计流程、网页设计工具、网页布局以及布局理论等内容。
第5章：认识HTML 5。着重介绍HTML 5的知识，包括它的发展历史和趋势、三大组织、基本语法、新增的表单、元素以及属性等多种内容。
第6章：HTML 5快速入门。介绍HTML 5中新增的不同类型的元素，例如结构元素、分组元素、文本语义元素、交互元素、音频和视频元素等。另外，还对HTML 5中常用的几个标准属性进行介绍。
第7章：HTML 5新型表单的使用。从表单开始介绍，接着介绍HTML 5中新增的表单元素、输入类型、表单属性和表单验证这4个知识点。
第8章：HTML 5操作页面图形。重点介绍canvas元素及其API如何绘制图形并对图形进行操作。这些图形包括文本、矩形、线条、圆形和扇形、贝塞尔曲线、线性渐变、径向渐变以及图像等。
第9章：HTML 5的其他新特性。从文件新增特性、拖放功能、新增客户端数据存储特性、新增的本地数据库特性、跨文档传输信息、多线程以及获取位置信息7个方面介绍HTML 5的新增特性。
第10章：CSS 3快速入门。介绍CSS 3的基础知识，包括CSS 3的发展、优缺点和浏览器支持情况，以及CSS 3的颜色、选择器和属性等新增功能。其中对新增颜色进行了详细介绍。
第11章：CSS 3新增选择器。从属性选择器、结构化伪类选择器、目标伪类选择器、UI元素状态伪类选择器、否定伪类选择器和通用兄弟选择器6个方面进行介绍。
第12章：CSS 3页面美化样式。重点介绍CSS 3中新增的与文本、字体、背景和边框有关的样式属性。
第13章：CSS 3页面布局样式。从多列布局、盒模型和界面布局三个方面详细介绍CSS 3新增的属性、语法格式及其使用示例。
第14章：CSS 3动画特效。首先了解CSS 3中如何实现渐变，接着介绍CSS 3中新增的转换功能，然后介绍与过渡有关的属性，最后对CSS 3的动画功能进行说明。
第15章：HTML 5 + CSS 3页面案例。结合HTML 5、CSS 5、JavaScript和jQuery等多种技术实现贪吃蛇游戏。
2. 本书特色
本书内容详细、示例丰富、知识面广，全面地讲解了HTML 5和CSS 3的应用和开发。与已经出版的同类图书相比，这本图书的最大特点体现在如下几个方面。
(1)知识全面，内容丰富
本书紧密围绕HTML 5和CSS 3的新增知识展开详细的讲解，涵盖了实际开发应用中的具体应用代码。
(2)理论和示例结合
本书中几乎每一个知识点都有丰富而典型的练习，而且每一章最后都会通过一个或多个综合的实战介绍本章的知识。作为一本HTML 5和CSS 3入门类型的书，作者把理论和练习很好地结合起来进行讲解，最容易让读者快速掌握。
(3)应用广泛，提供文档
对于大多数的精选实战案例，都会向读者提供详细的实现步骤，结构清晰简明，分析深入浅出，而且有些实战贴近实际。
(4)随书光盘
本书配备了视频教学文件，包括每个章节所涉及的源代码、开发环境的安装演示等。读者可以通过视频文件更加直观地学习HTML 5和CSS 3的知识。
(5)网站技术支持
读者在学习或者工作的过程中，如果遇到实际问题，可以直接登录www.itzcn.com与我们取得联系，作者会在第一时间内给予帮助。
(6)贴心的提示
为了便于读者阅读，全书还穿插着一些技巧、提示等小贴士，体例约定如下。
提示：通常是一些贴心的提醒，让读者加深印象或提供建议和解决问题的方法。
注意：提出学习过程中需要特别注意的一些知识点和内容，或者相关信息。
技巧：通过简短的文字，指出知识点在应用时的一些小窍门。
3. 读者对象
本书适合作为软件开发入门者的自学用书，也适合作为高等院校相关专业的教学参考书，还可供开发人员查阅、参考。
主要读者对象包括：
HTML 5和CSS 3开发入门者。
HTML 5和CSS初学者以及在校学生。
各大、中专院校的在校学生和相关授课老师。
准备从事与HTML 5和CSS 3应用相关的工作人员。
除了封面署名作者之外，参与本书编写的人员还有程朝斌、王咏梅、郝军启、王慧、郑小营、张浩华、王超英、张凡、赵振方、张艳梅等，在此表示感谢。
在本书的编写过程中，我们力求精益求精，但难免存在一些不足之处，敬请广大读者批评指正。
编 者目 录
第1章 HTML快速入门 1
1.1 HTML的概念 2
1.2 HTML的文档结构 3
1.2.1 文档编写规范 3
1.2.2 文档声明标记 4
1.2.3 标记文档开始 5
1.2.4 标记文档头部 6
1.2.5 标记文档主体 6
1.2.6 编写注意事项 6
1.2.7 实战——创建第一个HTML文档 7
1.3 文档基础标记 9
1.3.1 元信息标记 9
1.3.2 字体标记 10
1.3.3 超链接标记 14
1.3.4 水平线标记 16
1.3.5 段落标记 17
1.4 列表标记 19
1.4.1 编号列表 19
1.4.2 项目符号列表 21
1.4.3 说明项目列表 21
1.5 表格标记 22
1.5.1 表格的结构 22
1.5.2 表格的属性 23
1.6 表单标记 27
1.6.1 创建表单 27
1.6.2 创建表单元素 27
1.7 实战——制作卡通类页面 30
1.8 本章习题 32
第2章 CSS基础 35
2.1 CSS概述 36
2.1.1 CSS简介 36
2.1.2 CSS的使用 37
2.2 CSS基础语法 40
2.3 CSS高级语法 41
2.4 CSS的常用样式 43
2.4.1 CSS常用样式概述 43
2.4.2 背景样式 44
2.4.3 文本样式 47
2.4.4 字体样式 53
2.4.5 链接样式 58
2.4.6 列表样式 59
2.4.7 表格和轮廓 63
2.4.8 其他样式 67
2.5 实战——诗词鉴赏页面设计 71
2.6 本章习题 73
第3章 JavaScript脚本语言 75
3.1 JavaScript脚本概述 76
3.2 JavaScript的基本语法 77
3.2.1 简单的JavaScript例子 77
3.2.2 JavaScript语句 79
3.3 JavaScript变量 81
3.3.1 变量 81
3.3.2 数据类型 82
3.4 运算符 86
3.5 JavaScript语句的类型 87
3.5.1 选择语句 88
3.5.2 循环语句 92
3.5.3 跳转语句 95
3.5.4 异常处理语句 96
3.6 对象 97
3.6.1 对象概述 97
3.6.2 函数 99
3.6.3 构造函数 100
3.7 常用对象 101
3.7.1 Array对象 101
3.7.2 Document对象 102
3.7.3 HTML DOM Event对象 103
3.7.4 Window对象 104
3.8 实战——长方体几何计算 105
3.9 本章习题 106
第4章 网页设计实战案例 109
4.1 网页设计流程 110
4.2 网页设计工具 110
4.2.1 记事本 111
4.2.2 FrontPage 111
4.2.3 Dreamweaver 112
4.2.4 实战——制作个人主页 113
4.3 网页布局 117
4.3.1 常见的网页布局结构 117
4.3.2 设计居中布局 120
4.3.3 设计自适应布局 121
4.3.4 DIV+CSS重构网站布局 122
4.4 布局理论 124
4.4.1 区块的概念 124
4.4.2 定义区块 125
4.4.3 定位 126
4.4.4 实战——具有固定位置的广告框 127
4.4.5 空白边叠加 129
4.5 实战——制作网页导航条 130
4.6 实战——制作文本环绕图片 132
4.7 实战——制作三栏博客页面 133
4.8 CSS设计规范 139
4.9 本章习题 141
第5章 认识HTML 5 143
5.1 了解HTML 5 144
5.1.1 HTML 5的发展历史 144
5.1.2 开发HTML 5的三大组织 144
5.1.3 使用HTML 5的五大原因 145
5.1.4 HTML 5的未来发展趋势 147
5.2 HTML 5的语法 148
5.2.1 文档媒体类型 148
5.2.2 编码类型 149
5.2.3 DOCTYPE声明 150
5.2.4 其他内容 150
5.3 HTML 5表单 150
5.3.1 HTML 5输入类型 150
5.3.2 HTML 5表单元素 152
5.3.3 HTML 5表单属性 152
5.4 HTML 5的元素 154
5.4.1 新增的元素 154
5.4.2 更改元素 155
5.4.3 废除的元素 156
5.5 HTML 5的属性 157
5.5.1 标准属性 157
5.5.2 事件属性 158
5.6 支持HTML 5的浏览器 161
5.6.1 浏览器内核 161
5.6.2 常用的浏览器 162
5.7 实战——Chrome浏览器的安装和测试 164
5.8 本章习题 166
第6章 HTML 5快速入门 169
6.1 结构元素 170
6.1.1 header元素 170
6.1.2 article元素 171
6.1.3 section元素 173
6.1.4 nav元素 174
6.1.5 aside元素 175
6.1.6 footer元素 177
6.2 分组元素 177
6.2.1 hgroup元素 177
6.2.2 figcaption和figure 178
6.3 文本语义元素 179
6.3.1 mark元素 179
6.3.2 ruby、rt和rp元素 180
6.3.3 time元素 180
6.3.4 wbr元素 181
6.4 交互元素 181
6.4.1 meter元素 181
6.4.2 progress元素 183
6.4.3 details元素 185
6.4.4 summary元素 185
6.5 音频和视频元素 186
6.5.1 video元素 186
6.5.2 audio元素 191
6.6 标准属性 193
6.6.1 hidden属性 193
6.6.2 contenteditable属性 194
6.6.3 spellcheck属性 195
6.7 实战——使用HTML 5元素构建网页 196
6.8 本章习题 199
第7章 HTML 5新型表单的使用 201
7.1 了解表单 202
7.1.1 表单概述 202
7.1.2 表单的基本结构 203
7.2 表单元素 204
7.2.1 datalist元素 204
7.2.2 keygen元素 205
7.2.3 output元素 206
7.3 输入类型 207
7.3.1 email类型 207
7.3.2 url类型 208
7.3.3 number类型 209
7.3.4 range类型 210
7.3.5 datepickers类型 211
7.3.6 search类型 212
7.3.7 color类型 213
7.3.8 tel类型 214
7.4 表单属性 214
7.4.1 表单属性 214
7.4.2 input属性 217
7.5 实战——修改用户个人资料 223
7.6 表单验证 225
7.6.1 表单验证概述 226
7.6.2 checkValidity()验证 226
7.6.3 setCustomValidity()验证 227
7.7 本章习题 229
第8章 HTML 5操作页面图形 231
8.1 了解canvas元素 232
8.1.1 canvas历史 232
8.1.2 canvas元素 232
8.1.3 CSS和canvas 233
8.1.4 Canvas API 233
8.1.5 浏览器支持情况 233
8.2 绘制文本 235
8.2.1 绘制普通文本 235
8.2.2 绘制阴影文本 237
8.3 绘制矩形 239
8.3.1 用rect()方法绘制 239
8.3.2 用fillRect()方法绘制 240
8.3.3 用strokeRect()方法绘制 241
8.3.4 用clearRect()方法清除 241
8.4 绘制路径 242
8.4.1 路径绘图方法 242
8.4.2 绘制基本图形 243
8.4.3 绘制圆形和扇形 245
8.4.4 贝塞尔曲线 247
8.5 图形变换和组合 249
8.5.1 图形变形 249
8.5.2 矩阵变换 252
8.5.3 图形组合 254
8.6 绘制颜色渐变 256
8.6.1 线性渐变 256
8.6.2 径向渐变 258
8.7 图片的常用操作 259
8.7.1 drawImage()绘制 259
8.7.2 createPattern()方法 261
8.7.3 clip()方法 263
8.8 实现动画特效 264
8.8.1 了解动画 264
8.8.2 实战——绘制动态闪动线条 265
8.9 本章习题 266
第9章 HTML 5的其他新特性 269
9.1 文件新增特性 270
9.1.1 获取多个文件的信息 270
9.1.2 新增的FileReader接口简介 272
9.1.3 使用FileReader接口读取
文件 273
9.1.4 使用FileReader接口监听事件 276
9.1.5 文件读取时的异常处理 278
9.1.6 实战——实现文件上传 279
9.2 拖放功能 282
9.2.1 拖放API简介 282
9.2.2 拖放对象的方法和属性 283
9.2.3 实战——模拟图片删除 285
9.3 新增的客户端数据存储特性 288
9.3.1 客户端存储对象简介 288
9.3.2 操作本地数据 289
9.3.3 实战——以JSON方式存取数据 293
9.4 新增的本地数据库特性 295
9.4.1 HTML 5本地数据库简介 296
9.4.2 数据库操作API 296
9.4.3 实战——实现基于数据库的收藏夹管理 297
9.5 跨文档传输信息 301
9.6 多线程 303
9.6.1 认识HTML 5多线程 304
9.6.2 实战——Worker对象的简单应用 305
9.7 获取位置信息 307
9.7.1 认识地图API 307
9.7.2 Position对象 308
9.8 HTML 5的离线缓存特性 310
9.9 本章习题 312
第10章 CSS 3快速入门 315
10.1 了解CSS 3 316
10.1.1 CSS 3发展概述 316
10.1.2 CSS 3的优缺点 316
10.1.3 浏览器支持情况 317
10.2 CSS 3的新增颜色 319
10.2.1 HSL属性 319
10.2.2 HSLA属性 321
10.2.3 RGBA属性 323
10.2.4 Opacity属性 324
10.3 CSS 3新增的选择器 326
10.3.1 属性选择器 327
10.3.2 结构化伪类选择器 328
10.3.3 目标伪类选择器 329
10.3.4 UI元素状态伪类选择器 329
10.3.5 否定伪类 329
10.3.6 通用兄弟选择器 330
10.4 CSS 3的新增属性 330
10.4.1 边框属性 330
10.4.2 背景属性 331
10.4.3 文本属性 331
10.4.4 盒模型属性 331
10.4.5 用户界面属性 332
10.4.6 新增的其他属性 332
10.5 实战——以CSS 3属性制作漂亮按钮 333
10.6 本章习题 336
第11章 CSS 3新增的选择器 337
11.1 属性选择器 338
11.1.1 E[att^=value]选择器 338
11.1.2 E[att$=value]选择器 340
11.1.3 E[att*=value]选择器 340
11.2 结构化伪类选择器 341
11.2.1 E:root选择器 341
11.2.2 E:nth-child(n)选择器 341
11.2.3 E:nth-last-child(n)选择器 342
11.2.4 E:nth-of-type(n)选择器 343
11.2.5 E:nth-last-of-type(n)选择器 344
11.2.6 E:last-child选择器 345
11.2.7 E:first-of-type选择器 345
11.2.8 其他选择器 346
11.3 目标伪类选择器 346
11.4 UI元素状态伪类选择器 347
11.4.1 常用的选择器 347
11.4.2 E::selection选择器 349
11.5 否定伪类选择器 350
11.6 通用兄弟选择器 350
11.7 实战——设计直观的表单页面 351
11.8 本章习题 354
第12章 CSS 3页面美化样式 357
12.1 CSS 3页面美化 358
12.2 文本样式 358
12.2.1 新增样式 358
12.2.2 新增样式的用法 359
12.3 字体样式 363
12.4 背景样式 366
12.4.1 background-clip属性 366
12.4.2 background-origin属性 366
12.4.3 background-size属性 366
12.5 边框样式 368
12.5.1 box-shadow属性 369
12.5.2 border-image属性 370
12.5.3 border-radius属性 372
12.6 实战——表格的艺术 374
12.7 本章习题 376
第13章 CSS 3页面布局样式 377
13.1 新增的多列布局属性 378
13.1.1 columns属性 378
13.1.2 column-width属性 379
13.1.3 column-count属性 380
13.1.4 column-gap属性 381
13.1.5 column-rule属性 381
13.1.6 column-span属性 383
13.1.7 column-fill属性 383
13.2 新增的盒模型属性 383
13.2.1 box-orient属性 384
13.2.2 box-direction属性 385
13.2.3 box-ordinal-group属性 386
13.2.4 box-flex属性 387
13.2.5 box-flex-group属性 389
13.2.6 box-pack属性 389
13.2.7 box-align属性 391
13.2.8 box-lines属性 392
13.3 新增的界面布局属性 393
13.3.1 box-sizing属性 393
13.3.2 resize属性 395
13.3.3 zoom属性 396
13.3.4 outline-offset属性 397
13.3.5 nav-index属性 398
13.4 本章习题 398
第14章 CSS 3动画特效 401
14.1 渐变特效 402
14.1.1 线性渐变 402
14.1.2 径向渐变 406
14.2 转换 408
14.2.1 2D转换 408
14.2.2 3D转换 413
14.3 过渡 416
14.3.1 常用的单个属性 416
14.3.2 transition的简写属性 418
14.4 动画 419
14.4.1 动画相关属性 419
14.4.2 @keyframes 420
14.5 实战——制作动画海报圈 421
14.6 本章习题 425
第15章 HTML 5 + CSS 3页面案例 427
15.1 JavaScript经典贪吃蛇 428
15.1.1 案例分析 428
15.1.2 JavaScript实现 428
15.1.3 页面美化 431
15.2 jQuery导航特效 432
15.2.1 jQuery简介 432
15.2.2 jQuery实现导航特效 433
15.3 CSS 3图片特效 436
15.4 其他页面效果 439
15.4.1 页面悬浮广告 439
15.4.2 鼠标特效 441
