本书详细介绍了如何使用HTML 5和CSS 3技术制作漂亮美观的网页。全书共分为14章，包括HTML 5的基础知识，新增的结构元素、块级语义元素、行内语义元素、交互元素；新增的表单元素、表单类型、表单属性和表单验证，以及文件操作、用Web Storage和Web SQL数据库进行数据存储、Canvas API实现图形和图像绘制、多媒体元素的播放、离线缓存、Web Sockets通信、跨文档消息传输、线程、Geolocation API等内容，还介绍了CSS 3的概念和新增特性、颜色和文本样式、@font-face规则、新增的选择器、弹性盒模型、多列类布局，用户界面布局、以及边框、背景、渐变等知识。最后，通过一个综合的网页案例对前面的内容进行总结。

     本书适合HTML 5和CSS 3技术的初学者阅读参考，也可以作为非计算机专业学生学习的参考资料等。

　　

     

     

     

     

　　

　　网络的快速发展使一些技术也在不断地改革和创新，HTML语言，具有易用、快捷、多浏览平台兼容等特点，但是随着时代的进步，HTML的标准却停滞不前，这一次还在不断开发中的HTML 5标准的更新可以说给这门标记语言带来了新的生命力。它是自2010年以来最热门的技术之一，学习HTML 5成为Web开发者的重要任务，学会HTML 5，就掌握了迈向未来Web平台的一把钥匙。

　　与此同时，作为互联网呈现功能的CSS也迎来了新的标准——CSS 3。它以CSS 2为基础将功能进行模块化，增加了新的样式和属性，并且对现存样式属性做了部分修改。这些新的样式属性极大地丰富了HTML的呈现功能，并可以实现动态效果，从而可以为客户端带来更加丰富的体验。

　　本书是一本典型的HTML 5和CSS 3实践教程，由多位经验丰富的网页设计人员和程序员编著而成，并且立足于网络行业，详细介绍HTML 5和CSS 3的应用。

　　1．本书内容

　　本书以目前主流的HTML 5和CSS 3技术为例进行介绍。全书共分为14章，主要内容如下。

　　第1章  HTML 5概述。主要介绍与HTML 5有关的基础知识，包括HTML 5的概念，组织、特性优点、发展趋势，与XHTML、Silverlight和HTML 4等技术的区别。

　　第2章  HTML 5中的新增元素。本章主要介绍HTML 5中新增的一些元素，这些元素类型包括结构元素、块级语义元素、行内语义元素和交互元素。除了这些元素外，还对HTML 4已经存在的元素重新定义。

　　第3章  HTML 5中的表单应用。HTML 5对传统的表单功能进行了改进，本章从回顾HTML的基础知识开始，然后依次介绍新增的表单元素、表单类型、表单属性和表单验证等内容。

　　第4章  HTML 5中的文件应用。本章介绍与文件API有关的对象，并且使用这些对象完成文件的选择、读取和拖放等操作。

　　第5章  HTML 5中的多媒体元素。本章首先介绍HTML 4中的多媒体文件显示，接着介绍HTML 5中的多媒体基础知识，然后分别介绍多媒体元素的属性、source元素、多媒体元素的方法和事件，最后介绍了embed元素。

　　第6章  数据存储。本章主要介绍Web Storage和Web SQL数据库两部分内容。内容涉及Web Storage的优缺点、localStorage对象、sessionStorage对象、JSON对象操作数据、Web SQL API操作数据等。

　　第7章  Canvas API动态绘图。HTML 5中新增的绘图功能是最令人期待的特色，在本章中详细介绍了如何使用Canvas API进行绘图。具体内容包括路径绘图、贝塞尔曲线、渐变图形、绘制图像、绘制文本和阴影效果等。

　　第8章  离线缓存。本章着重介绍离线缓存的知识，首先从离线应用程序进行介绍，接着介绍Cache Manifest文件，然后介绍浏览器与服务器的交互过程，最后介绍离线存储对象applicationCache的使用。

　　第9章  通信API和地理位置获取。本章主要介绍HTML 5中的一些比较高级的应用操作，包括跨文档消息传输、Web Sockets通信、Web Workers线程以及Geolocation API显示地理位置等内容。

　　第10章  CSS 3和新增颜色及文本样式。从本章开始将介绍与CSS 3有关的内容，在本章中除了介绍CSS 3的概念、支持情况以及新增特性外，还介绍新增的颜色、文本样式以及@font-face规则。

　　第11章  CSS 3中的新增选择器。本章着重介绍CSS 3中的新增选择器，这些选择器包括属性选择器、结构化伪类选择器、UI元素状态伪类选择器、否定伪类选择器、目标伪类选择器、通用兄弟元素选择器。除此之外，还介绍新增的内容属性content。

　　第12章  弹性盒模型与样式布局。CSS 3在CSS 2的基础上引入了新的盒模型参数，提出了弹性盒模型的概念。本章详细介绍新增的弹性盒模型属性、多列类布局属性以及用户界面布局属性。

　　第13章  边框、背景和渐变。CSS 3中针对CSS 2中的多个模块进行了重新定义和添加，本章将介绍边框、背景和渐变三大模块。

　　第14章  HTML 5+CSS 3制作旅游网页。本章以一个简单的、漂亮的、基础的旅游网站为例，应用前面章节的知识点，使用HTML 5和CSS 3技术实现对网页结构和样式的设计。本章旅游网页包括首页、关于我们、国内旅游胜地、出境旅游和留言咨询5部分内容。

　　2．本书特色

　　本书中的大量内容来自实际的开发项目，而针对初、中级读者量身定做，由浅入深地介绍与HTML 5和CSS 3有关的知识。本书具有以下特色。

　　1）知识全面，内容丰富

　　本书紧紧围绕HTML 5和CSS 3中新增加的元素和属性展开讲解，涵盖了实际开发中设计网页比较复杂的代码。

　　2）基于理论，注重实践

　　本书不仅介绍了理论知识，而且在合适位置安排了综合应用实例或者小型应用程序，将理论知识应用到实践当中，加强读者实际应用能力，巩固系统基础知识。另外，还将一些概念和术语放到文档中，以方便读者了解。

　　3）网站技术支持

　　读者在学习或者工作的过程中，如果遇到实际问题，可以直接登录www.ztydata.com.cn与我们取得联系，作者会在第一时间内给予帮助。

　　3．读者对象

　　本书适合作为学习HTML 5和CSS 3技术的入门程序开发人员的自学用书，也适合作为高等院校相关专业的教学参考书，还可以供开发人员查阅和参考。

　　（1）学习HTML 5和CSS 3技术的入门者。

　　（2）HTML 5和CSS 3技术的初级学者以及在校学生。

　　（3）各大中专院校的在校学生和相关授课老师。

　　（4）准备从事与网站开发或者网站编辑有关的人员。

　　除了封面署名人员之外，参与本书编写的人员还有李海庆、王咏梅、康显丽、王黎、汤莉、倪宝童、赵俊昌、方宁、郭晓俊、杨宁宁、王健、连彩霞、丁国庆、牛红惠、石磊、王慧、李卫平、张丽莉、王丹花、王超英、王新伟等。在编写过程中难免会有疏漏，欢迎读者通过清华大学出版社网站www.tup.tsinghua.edu.cn与我们联系，帮助我们改正提高。

　　

　　编  者

　　

　　

　　

　　

　　

　

　　

　　

　　

　　

　　

　　

第1章  HTML 5概述 1

1.1  了解HTML 5 1

1.1.1  HTML 5简介 1

1.1.2  HTML 5的组织 2

1.1.3  HTML 5的特性 2

1.1.4  HTML 5的优点 4

1.1.5  HTML 5的发展趋势 4

1.2  HTML 5与其他技术的区别 4

1.2.1  与XHTML的区别 5

1.2.2  与Silverlight和Flash

的区别 6

1.3  HTML 5与HTML 4的区别 7

1.3.1  语法的改变 7

1.3.2  新增元素和废除元素 10

1.3.3  新增属性和废除属性 14

1.3.4  全局属性 17

1.4  HTML 5的浏览器支持情况 19

1.4.1  支持HTML 5的浏览器

说明 20

1.4.2  在线测试当前浏览器的

支持情况 21

1.5  实验指导1-1：简单安装傲游

浏览器 24

1.6  常用的浏览器内核 25

思考与练习 26

第2章  HTML 5中的新增元素 28

2.1  新增的结构元素 28

2.1.1  header元素 28

2.1.2  article元素 29

2.1.3  section元素 30

2.1.4  nav元素 33

2.1.5  footer元素 35

2.1.6  address元素 36

2.1.7  hgroup元素 37

2.2  新增的块级语义元素 38

2.2.1  aside元素 38

2.2.2  figure元素 40

2.2.3  dialog元素 41

2.3  新增的行内语义元素 42

2.3.1  mark元素 42

2.3.2  cite元素 43

2.3.3  time元素 44

2.3.4  meter元素 45

2.3.5  progress元素 47

2.4  新增的交互元素 48

2.4.1  details元素 48

2.4.2  menu元素 50

2.4.3  command元素 52

2.4.4  datagrid元素 53

2.5  改良HTML 4元素的功能 54

2.5.1  ul元素 54

2.5.2  ol元素 55

2.5.3  嵌套列表 57

2.6  实验指导2-1：使用新增元素构建

网页 58

思考与练习 64

第3章  HTML 5中的表单应用 66

3.1  认识和创建HTML表单 66

3.1.1  认识HTML表单 66

3.1.2  input元素的基本类型 67

3.1.3  其他输入元素 70

3.2  新增的表单元素 70

3.2.1  datalist元素 71

3.2.2  output元素 72

3.2.3  keygen元素 73

3.2.4  optgroup元素 74

3.3  新增的表单类型 76

3.3.1  email类型 76

3.3.2  url类型 78

3.3.3  number类型 78

3.3.4  range类型 79

3.3.5  tel类型 80

3.3.6  color类型 81

3.3.7  search类型 82

3.3.8  日期和时间类型 82

3.4  新增的表单属性 86

3.4.1  form属性 86

3.4.2  表单重写属性 88

3.4.3  placeholder属性 89

3.4.4  required属性 90

3.4.5  pattern属性 91

3.4.6  autocomplete属性 92

3.4.7  autofocus属性 93

3.5  表单验证 93

3.5.1  自动验证 93

3.5.2  显式验证 94

3.5.3  自定义验证 96

3.5.4  验证事件 97

3.5.5  取消验证 98

3.6  实验指导3-1：会员资料注册 99

思考与练习 102

第4章  HTML 5中的文件应用 103

4.1  选择文件 103

4.1.1  选择单个文件 103

4.1.2  选择多个文件 105

4.1.3  限制选择文件类型 107

4.2  实验指导4-1：将文件上传到

服务器端 109

4.3  读取文件 111

4.3.1  认识FileReader接口 112

4.3.2  读取二进制文件 115

4.3.3  显示预览图像 116

4.3.4  读取文本文件 118

4.4  错误处理方案 120

4.4.1  产生错误的原因 120

4.4.2  FileError接口 121

4.4.3  错误处理练习 121

4.5  文件拖放API和常用对象 123

4.5.1  拖放API 123

4.5.2  认识DataTransfer对象 125

4.5.3  DataTransfer对象的方法 126

4.5.4  DataTransfer对象的属性 127

4.6  实验指导4-2：拖动文字到网页的

指定区域 129

4.7  实验指导4-3：拖放实现带进度条

的文件上传 130

思考与练习 138

第5章  HTML 5中的多媒体元素 140

5.1  HTML 5多媒体概述 140

5.1.1  HTML 4中的多媒体应用 140

5.1.2  HTML 5中的多媒体 141

5.2  多媒体元素的属性 144

5.2.1  audio和video的共同属性 144

5.2.2  audio元素显示音频文件 146

5.2.3  video元素显示视频文件 149

5.3  向多媒体元素中添加source元素 152

5.3.1  认识source元素 152

5.3.2  source元素常用的支持

格式 152

5.3.3  多媒体元素添加source

元素 153

5.3.4  视频文件添加source元素 154

5.4  多媒体元素的方法 155

5.5  多媒体元素的事件 157

5.5.1  audio和video的共同事件 157

5.5.2  video元素添加事件 159

5.6  认识embed元素 162

5.7  实验指导5-1：制作绚丽的音乐

播放器 164

思考与练习 172

第6章  数据存储 174

6.1  认识Web Storage 174

6.1.1  Web Storage介绍 174

6.1.2  Web Storage的优缺点 175

6.2  localStorage对象 175

6.2.1  判断浏览器是否支持 176

6.2.2  localStorage的常用方法 176

6.2.3  统计访问人数 177

6.2.4  及时更新访问人数 179

6.3  sessionStorage对象 182

6.3.1  与localStorage对象的

不同 182

6.3.2  判断浏览器是否支持 183

6.3.3  方法和事件 183

6.4  JSON对象操作数据 185

6.5  认识Web SQL 191

6.5.1  Web SQL介绍 191

6.5.2  Web SQL API操作 191

6.5.3  数据的简单操作 193

6.6  实验指导6-1：基于Web SQL

的留言簿 196

思考与练习 202

第7章  Canvas API动态绘图 204

7.1  认识canvas元素 204

7.1.1  canvas基础知识 204

7.1.2  canvas API的基本使用 206

7.1.3  与SVG的简单区别 208

7.2  通过路径绘图 209

7.2.1  基本方法 209

7.2.2  绘制直线 210

7.2.3  绘制圆形 212

7.2.4  绘制三角形 215

7.3  实验指导7-1：绘制复杂图形 215

7.4  贝塞尔曲线 217

7.4.1  二次方曲线 217

7.4.2  三次方曲线 219

7.5  绘制渐变图形 221

7.5.1  了解渐变 221

7.5.2  线性渐变 221

7.5.3  径向渐变 224

7.6  高级绘图操作 225

7.6.1  绘图状态 225

7.6.2  坐标变换 226

7.6.3  矩阵变换 233

7.6.4  合成图形 235

7.7  实验指导7-2：实现时钟的动画

效果 237

7.8  图像操作 240

7.8.1  创建图像 240

7.8.2  绘制图像 241

7.8.3  缩放图像 242

7.8.4  裁剪图像 244

7.8.5  输出图像 245

7.9  文字和阴影效果 246

7.9.1  绘制文字 247

7.9.2  阴影特效 247

思考与练习 248

第8章  离线缓存 250

8.1  离线应用程序概述 250

8.1.1  认识离线应用程序 250

8.1.2  离线缓存与浏览器缓存 251

8.1.3  创建离线缓存应用 252

8.2  Cache Manifest文件 255

8.2.1  认识Cache Manifest文件 255

8.2.2  Cache Manifest的组成 255

8.2.3  向manifest文件添加注释 257

8.2.4  Cache Mainifest的遵循

原则 258

8.2.5  配置IIS服务器 258

8.3  离线访问系统当前时间 260

8.4  浏览器与服务器的交互过程 263

8.4.1  首次载入页面 263

8.4.2  再次载入页面 263

8.5  离线存储对象：applicationCache 264

8.5.1  认识applicationCache 264

8.5.2  检测本地缓存状态 265

8.5.3  检测在线状态 266

8.5.4  本地缓存更新 269

8.5.5  事件执行顺序 270

8.6  实验指导8-1：制作离线使用的

日程备忘录 273

思考与练习 277

第9章  通信API和地理位置获取 279

9.1  跨文档消息传输 279

9.1.1  Message API概述 279

9.1.2  跨域获取传递消息 280

9.2  Web Sockets通信 283

9.2.1  Web Sockets API概述 284

9.2.2  使用Web Sockets API 284

9.2.3  向.NET端发送数据 286

9.3   Web Workers线程 290

9.3.1  线程概述 290

9.3.2  Worker对象 291

9.3.3  计算数字结果 293

9.3.4  线程嵌套处理 297

9.4  Geolocatin API概述 299

9.4.1  getCurrentPosition()方法 300

9.4.2  watchCurrentPosition()方法 301

9.4.3  clearWatch()方法 302

9.5  Position对象显示当前位置 302

9.6  实验指导9-1：Google地图锁定

当前位置 305

思考与练习 308

第10章  CSS 3和新增颜色及

         文本样式 310

10.1  了解CSS 3 310

10.1.1  什么是CSS 3 310

10.1.2  CSS 3的支持情况 311

10.1.3  CSS 3的新增特性 312

10.2  新增颜色 316

10.2.1  RGBA 316

10.2.2  HSL 318

10.2.3  HSLA 320

10.2.4  opaticy 321

10.3  文本样式 322

10.3.1  text-overflow属性 322

10.3.2  text-shadow属性 326

10.3.3  word-wrap属性 329

10.4  字体样式规则：@font-face 331

10.4.1  语法规则 331

10.4.2  基本练习 332

10.4.3  字体与字体样式 334

10.4.4  注意事项 336

10.5  实验指导10-1：定义文章的标题

 和内容样式 336

思考与练习 339

第11章  CSS 3中的新增选择器 340

11.1  属性选择器 340

11.1.1  E[att^="val"]选择器 340

11.1.2  E[att$="val"]选择器 342

11.1.3  E[att*="val"]选择器 343

11.2  结构化伪类选择器 345

11.2.1  E:root选择器 345

11.2.2  E:nth-child(n)选择器 347

11.2.3  E:nth-last-child(n)选择器 348

11.2.4  E:nth-of-type(n)和E:nth-

 last-of-type(n)选择器 351

11.2.5  E:last-child选择器 354

11.2.6  E:first-of-type和E:last-of-

 type选择器 355

11.2.7  E:only-child选择器 357

11.2.8  E:only-of-type选择器 357

11.2.9  E:empty选择器 358

11.3  UI元素状态伪类选择器 360

11.3.1  E:enabled选择器 360

11.3.2  E:disabled选择器 362

11.3.3  E:checked选择器 363

11.3.4  E::selection选择器 364

11.4  其他新增选择器 366

11.4.1  否定伪类选择器：

 E:not(s) 366

11.4.2  目标伪类选择器：

 E:target 367

11.4.3  通用兄弟元素选择器：

 E~F 368

11.5  新增内容属性：content 370

11.5.1  基本语法 370

11.5.2  插入图像 371

11.5.3  插入项目编码 372

11.5.4  插入嵌套符号 374

11.5.5  编号嵌套 375

11.6  实验指导11-1：结构化的数据

 表格设计 376

思考与练习 379

第12章  弹性盒模型与样式布局 381

12.1  新增的盒模型属性 381

12.1.1  box-orient属性 381

12.1.2  box-direction属性 384

12.1.3  box-ordinal-group属性 385

12.1.4  box-flex属性 387

12.1.5  box-flex-group属性 389

12.1.6  box-pack属性 390

12.1.7  box-align属性 392

12.1.8  box-lines属性 393

12.2  多列类布局属性 394

12.2.1  columns属性 394

12.2.2  column-width属性 396

12.2.3  column-count属性 397

12.2.4  column-gap属性 397

12.2.5  column-rule属性 399

12.2.6  column-span属性 400

12.2.7  column-fill属性 401

12.2.8  分列打印属性 401

12.3  用户界面布局 402

12.3.1  box-sizing属性 402

12.3.2  resize属性 404

12.3.3  zoom属性 406

12.3.4  outline-offset属性 407

12.3.5  nav-index属性 408

12.3.6  定义方向键控制顺序 410

12.4  实验指导12-1：简单设计

 博客网页 411

思考与练习 413

第13章  边框、背景和渐变 415

13.1  边框设计 415

13.1.1  border-radius属性 415

13.1.2  border-image属性 417

13.1.3  box-shadow属性 421

13.1.4  border-colors属性 423

13.2  背景样式 424

13.2.1  变更属性 424

13.2.2  background-origin属性 427

13.2.3  background-clip属性 428

13.2.4  background-size属性 430

13.3  渐变特效 431

13.3.1  WebKit引擎实现渐变 431

13.3.2  Gecko引擎实现渐变 433

13.3.3  重复渐变 435

13.4  实验指导13-1：制作下拉

 导航菜单 436

思考与练习 439

第14章  HTML 5+CSS 3制作

         旅游网页 440

14.1  旅游网站分析 440

14.1.1  产生背景 440

14.1.2  发展趋势 441

14.1.3  基本结构 441

14.2  设计首页 442

14.2.1  网页效果 442

14.2.2  添加头部 443

14.2.3  添加底部 446

14.2.4  添加内容 446

14.3  设计关于我们网页 448

14.3.1  网页效果 448

14.3.2  关于我们 448

14.3.3  最新公告 449

14.4  设计国内旅游网页 450

14.4.1  网页效果 450

14.4.2  国内旅游 451

14.4.3  其他内容 451

14.5  设计出境旅游网页 452

14.6  设计留言咨询网页 453

14.6.1  网页效果 453

14.6.2  清空留言 453

14.6.3  提交留言 454

14.6.4  查看位置 455

附录  思考与练习答案 459