目    录

第1章　Web开发新时代     1

1.1 HTML5概述    1

1.1.1  HTML5的目标     1

1.1.2  HTML5新特性     2

1.1.3  HTML5深受欢迎的原因     3

1.1.4  HTML5的构成     4

1.2 HTML5设计原理    5

1.2.1  HTML的历史变迁     5

1.2.2  HTML5开发动力     6

1.3  编写第一个HTML5页面     7

1.3.1  搭建上机练习环境     7

1.3.2  检测浏览器是否支持     7

1.3.3  使用HTML5编写简单的Web

页面     8

1.4 HTML5页面的特征    9

1.4.1  使用HTML5的结构化元素     9

1.4.2  使用CSS美化HTML5文档    12

1.5  本章小结     13

1.6  思考和练习     13

第2章  HTML、XHTML、HTML5    14

2.1 HTML基础    14

2.1.1  HTML简介     14

2.1.2  HTML结构     15

2.1.3  HTML语法     15

2.2 XHTML基础    17

2.2.1  XHTML结构     17

2.2.2  XHTML语法     18

2.2.3  XHTML类型     18

2.2.4  DTD解析     19

2.2.5  命名空间     21

2.3 HTML5基础    21

2.3.1  HTML5语法     21

2.3.2  HTML5元素     22

2.4  新增和废除的属性     25

2.4.1  新增的属性     25

2.4.2  废除的属性     27

2.5  全局属性     28

2.5.1  contentEditable属性     28

2.5.2  designMode属性     29

2.5.3  hidden属性     29

2.5.4  spellcheck属性     29

2.5.5  tabindex属性     29

2.6  新增的事件     29

2.7  本章小结     30

2.8  思考和练习     30

第3章  创建HTML5文档    31

3.1  认识HTML5文档结构     31

3.2 HTML5元素分类    33

3.3  构建主体内容     34

3.3.1  标识文章：article元素     34

3.3.2  给内容分块：section元素     36

3.3.3  设计导航信息：nav元素     37

3.3.4  设计辅助信息：aside元素     39

3.3.5  设计微格式：time元素     40

3.3.6  添加发布日期：pubdate属性     41

3.4  添加语义模块     41

3.4.1  添加标题块：header元素     41

3.4.2  给标题分组：hgroup元素     42

3.4.3  添加脚注块：footer元素     43

3.4.4  添加联系信息：address元素     44

3.5  本章小结     44

3.6  思考和练习     45

第4章  HTML5表单     46

4.1  新增的表单属性     46

4.1.1  autocomplete属性     46

4.1.2  novalidate属性     47

4.2  新增的表单元素     47

4.2.1  datalist元素     47

4.2.2  keygen元素     48

4.2.3  output元素     49

4.3  新增的输入类型     49

4.3.1  email类型     50

4.3.2  url类型     51

4.3.3  number类型     51

4.3.4  Date Pickers类型     52

4.3.5  search类型     56

4.3.6  tel类型     57

4.3.7  color类型     57

4.4  新增的输入属性     58

4.4.1  form属性     58

4.4.2  formaction属性     59

4.4.3  formmethod属性     59

4.4.4  formenctype属性     59

4.4.5  formtarget属性     60

4.4.6  autofocus属性     60

4.4.7  required属性     60

4.4.8  labels属性     61

4.4.9  control属性     62

4.4.10  placeholder属性     63

4.4.11  list属性     63

4.4.12  文本框的pattern属性     64

4.4.13  selectionDirection属性     64

4.4.14  复选框的indeterminate属性     65

4.4.15  height与width属性     66

4.4.16  maxlength和wrap属性     67

4.5  表单验证     67

4.5.1  自动验证     67

4.5.2  取消验证     68

4.5.3  显式验证     68

4.6  本章小结     69

4.7  思考和练习     69

第5章  图形/图像的绘制     70

5.1 canvas元素基础    70

5.1.1  添加canvas元素     70

5.1.2  检测浏览器是否支持     71

5.1.3  使用canvas元素绘制图形     71

5.1.4  canvas坐标系     73

5.2  绘制简单图形     73

5.2.1  绘制直线     73

5.2.2  绘制矩形     74

5.2.3  绘制弧线与圆形     75

5.2.4  绘制三角形     78

5.2.5  清空画布     78

5.3  绘制贝塞尔曲线     79

5.3.1  二次贝塞尔曲线     79

5.3.2  三次贝塞尔曲线     80

5.4  绘制变形图形     81

5.4.1  保存与恢复canvas状态     81

5.4.2  移动坐标空间     82

5.4.3  旋转坐标空间     84

5.4.4  缩放图形     86

5.4.5  矩阵变换     86

5.5  丰富图形效果     89

5.5.1  应用不同的线型     89

5.5.2  绘制线性渐变     90

5.5.3  绘制径向渐变     91

5.5.4  绘制图案     92

5.5.5  设置图形的透明度     93

5.5.6  创建阴影     93

5.6  图像处理     95

5.6.1  裁剪图像     95

5.6.2  像素处理     96

5.6.3  组合图形     98

5.6.4  混合图像     100

5.7  绘制文字     101

5.7.1  绘制填充文字     101

5.7.2  文字相关属性     101

5.7.3  绘制轮廓文字     102

5.7.4  获取文字宽度     102

5.7.5  文字绘制实战     102

5.8  本章小结     103

5.9  思考和练习     103

第6章  音频与视频     104

6.1 HTML5多媒体技术概述    104

6.1.1  关于编解码器     105

6.1.2  音频编解码器     105

6.1.3  视频编解码器     106

6.2  浏览器音视频支持检测     107

6.3 audio与video元素     109

6.3.1  audio元素     109

6.3.2  video元素     111

6.4  综合实战     112

6.4.1  用脚本控制音乐播放     112

6.4.2  用脚本控制视频播放     114

6.5  为音频或视频添加字幕     115

6.5.1  track元素的基础知识     115

6.5.2  track元素的各种属性     116

6.5.3  WebVTT文件     117

6.6  本章小结     120

6.7  思考和练习     121

第7章  本地存储     122

7.1 Web存储    122

7.1.1  Cookie存储机制的优缺点     122

7.1.2  为什么要用Web存储     122

7.1.3  Web存储的优缺点     123

7.2  使用Web存储     123

7.2.1  检查浏览器的支持性     123

7.2.2  设置和获取数据     124

7.2.3  Web存储的其他操作     124

7.2.4  监测Web存储事件     125

7.2.5  制作简单的网页皮肤     127

7.2.6  网站人气值和在线人数统计    128

7.3  本地数据库     129

7.3.1  本地数据库的基本概念     129

7.3.2  用executeSql执行查询     129

7.3.3  创建一个简单的数据库     131

7.3.4  综合应用——点评功能     132

7.4  本章小结     138

7.5  思考和练习     138

第8章  离线应用程序     139

8.1  离线Web应用程序详解     139

8.1.1  本地缓存技术产生的原因     139

8.1.2  本地缓存概述     139

8.1.3  本地缓存与浏览器网页缓存的

区别     140

8.1.4  浏览器支持检测     141

8.2 HTML5离线应用详解    141

8.2.1  Web服务器配置     141

8.2.2  manifest文件结构与含义     142

8.2.3  搭建离线应用程序     143

8.2.4  离线应用中浏览器和服务器的

交互过程     143

8.3 applicationCache对象     145

8.3.1  swapCache方法     145

8.3.2  applicationCache对象的事件     146

8.4  缓存网站的首页     149

8.4.1  新建HTML5页面     149

8.4.2  添加.htaccess支持     149

8.4.3  创建manifest文件     150

8.4.4  关联manifest文件到HTML5

页面     150

8.4.5  测试离线应用     150

8.5  本章小结     151

8.6  思考和练习     151

第9章  Web Workers多线程处理     152

9.1  认识Web Workers     152

9.1.1  HTML4处理长耗时操作的

问题     152

9.1.2  HTML5针对长耗时操作的

解决方法     152

9.1.3  Web Workers的使用示例     153

9.1.4  Web Workers的使用场合     155

9.2  使用Web Workers     155

9.2.1  检查浏览器支持情况     155

9.2.2  与线程进行数据交互     156

9.3  线程的嵌套     158

9.3.1  单层嵌套     158

9.3.2  在多个子线程中进行数据

交互     160

9.4  线程中可用的变量、函数

与类     161

9.5  共享线程     162

9.5.1  基础知识     162

9.5.2  与共享线程通信     163

9.6  线程的工作原理     163

9.6.1  线程事件处理模型     163

9.6.2  线程的应用范围和作用域     164

9.6.3  线程的生命周期     164

9.7  综合实战     165

9.7.1  使用线程做后台数值计算     165

9.7.2  使用共享线程处理多用户并发

连接     167

9.7.3  HTML5 线程代理     168

9.8  本章小结     171

9.9  思考和练习     171

第10章  Geolocation地理位置     172

10.1  Geolocation API的基本知识    172

10.1.1  位置信息的表示方式     172

10.1.2  位置信息的来源     173

10.2  使用Geolocation API    174

10.2.1  检测浏览器支持情况     174

10.2.2  获取当前地理位置     174

10.2.3  持续监视位置信息     176

10.2.4  停止获取位置信息     176

10.2.5  隐私保护     176

10.2.6  处理位置信息     177

10.2.7  position对象     177

10.3  使用百度地图     178

10.4  本章小结     182

10.5  思考和练习     182

第11章  CSS3概述     183

11.1 CSS的历史变迁    183

11.1.1  CSS产生的原因     183

11.1.2  CSS的发展历史     184

11.1.3  Hello CSS World    185

11.1.4  为文档应用CSS的方式     187

11.2  了解CSS3新增特性     188

11.2.1  CSS3选择器     188

11.2.2  引用服务器端字体     189

11.2.3  换行处理     190

11.2.4  文字渲染     191

11.2.5  多栏布局     191

11.2.6  边框和颜色     191

11.2.7  渐变效果     192

11.2.8  阴影和反射效果     193

11.2.9  背景效果     194

11.2.10  盒子模型     195

11.2.11  过渡、形变与动画     197

11.3 CSS3兼容性速查    199

11.4  本章小结     199

11.5  思考和练习     200

第12章  CSS3选择器     201

12.1  选择器的用法     201

12.2  属性选择器     202

12.2.1  CSS2定义的属性选择器     202

12.2.2  CSS3定义的属性选择器     202

12.2.3  案例实战     203

12.3  结构伪类选择器     205

12.3.1  CSS中的伪类选择器及伪

元素     205

12.3.2  root、not、empty和

target     205

12.3.3  first-child、last-child、nth-

child(n)和nth-last-child(n)     207

12.3.4  first-of-type和last-of-type     209

12.3.5  nth-of-type(n)和nth-last-of-

type(n)     210

12.3.6  only-child选择器     211

12.4 UI元素状态伪类选择器    212

12.4.1  UI元素状态伪类选择器的

语法     212

12.4.2  E:hover、E:active和

E:focus     213

12.4.3  E:enabled与E:disabled     214

12.4.4  E:read-only与E:read-write     214

12.4.5  E:checked、E:default和

E:indeterminate     215

12.4.6  E::selection    216

12.4.7  E:invalid与E:valid     217

12.4.8  E:required与E:optional     218

12.4.9  E:in-range与E:out-of-

range     219

12.5  本章小结     219

12.6  思考和练习     220

第13章  CSS3文本属性     221

13.1 CSS3文本属性概述    221

13.2  设计文本阴影     221

13.2.1  text-shadow属性的使用

方法     222

13.2.2  一般文字阴影效果     222

13.2.3  文字凹凸效果     223

13.2.4  为文本指定多个阴影     224

13.3  设置文本样式     224

13.3.1  text-stroke属性     225

13.3.2  文本溢出     225

13.3.3  强制换行——word-wrap

属性     227

13.3.4  嵌入字体——@font-face    228

13.3.5  字体尺寸——font-size-

adjust属性    229

13.4  颜色模式     232

13.4.1  关键字     232

13.4.2  十六进制     233

13.4.3  RGB模式     233

13.4.4  RGBA模式     233

13.4.5  HSL模式     233

13.4.6  HSLA模式     234

13.5  本章小结     234

13.6  思考和练习     234

第14章  背景和边框     235

14.1  设计多色边框     235

14.1.1  用法详解     235

14.1.2  案例实战     236

14.2  设计边框背景     237

14.2.1  border-image属性     237

14.2.2  border-image绘制原理

简述     238

14.3  设计圆角     238

14.3.1  border-radius属性     238

14.3.2  border-radius属性的4种

写法     239

14.3.3  用border-radius属性画实心

半圆和实心圆     240

14.4  设计阴影     242

14.4.1  box-shadow属性     242

14.4.2  box-shadow兼容性处理     242

14.4.3  案例实战     243

14.5  设计背景     245

14.5.1  background-image属性     246

14.5.2  background-position属性     246

14.5.3  background-size属性     247

14.5.4  background-origin属性     249

14.5.5  background-repeat属性     250

14.5.6  background-clip属性     250

14.5.7  background-attachment

属性     252

14.6  本章小结     252

14.7  思考和练习     252

第15章  变形处理     253

15.1  认识transform属性     253

15.2 2D变形    254

15.2.1  旋转     254

15.2.2  缩放     254

15.2.3  移动     255

15.2.4  扭曲     256

15.2.5  复杂变形     257

15.3 3D变形    260

15.3.1  3D位移     261

15.3.2  3D旋转     264

15.3.3  3D缩放     267

15.3.4  3D变形兼容性     268

15.3.5  多重变形     269

15.4  变形矩阵     275

15.4.1  矩阵概述     276

15.4.2  变形与坐标系统     276

15.4.3  2D矩阵变形     276

15.4.4  3D矩阵变形     278

15.4.5  使用矩阵实现多重变形     279

15.5  本章小结     280

15.6  思考和练习     280

第16章  设计动画     282

16.1  过渡动画     282

16.1.1  定义过渡属性     283

16.1.2  定义过渡时间     284

16.1.3  定义过渡延迟时间     285

16.1.4  定义过渡效果     286

16.2 3D动画    288

16.2.1  定义动画名称     288

16.2.2  定义动画时间     288

16.2.3  定义动画播放方式     288

16.2.4  定义动画延迟时间     288

16.2.5  定义动画播放次数     289

16.2.6  定义动画播放方向     289

16.2.7  控制播放状态     289

16.2.8  翻转的图片     289

16.3  渐变效果     290

16.3.1  线性渐变在WebKit下的

应用     290

16.3.2  线性渐变在Mozilla下的

应用     291

16.3.3  线性渐变在Opera下的

应用     292

16.3.4  线性渐变在IE下的应用     292

16.4  案例综合实战     292

16.4.1  设计级联菜单     292

16.4.2  设计实用按钮     297

16.5  本章小结     299

16.6  思考和练习     299

第17章  网页布局     300

17.1  多栏布局     300

17.1.1  设置列宽和列数     300

17.1.2  设置列间距     303

17.1.3  设置列边框     303

17.1.4  设置跨列标题     304

17.1.5  统一列高     305

17.2  盒布局     305

17.2.1  CSS盒子模型     305

17.2.2  使用盒布局     306

17.2.3  盒布局和多栏布局的区别    309

17.3  弹性盒布局     309

17.3.1  对多个元素使用flex属性     309

17.3.2  设置元素的显示顺序     310

17.3.3  设置元素的排列方向     312

17.3.4  定义宽高自适应     312

17.3.5  消除空白     314

17.3.6  灵活使用flex属性     315

17.3.7  控制换行方向     320

17.4  弹性盒布局的布局原理     321

17.4.1  弹性盒布局概述     321

17.4.2  justify-content属性     322

17.4.3  align-items属性     323

17.5  本章小结     323

17.6  思考和练习     323

第18章  综合实例     324

18.1  前端应用开发的现状与趋势     324

18.1.1  HTML5应用现状     324

18.1.2  HTML5行业发展趋势     325

18.2  网站开发流程     325

18.2.1  确定建站目标     325

18.2.2  进行需求分析     325

18.2.3  绘制网站原型     326

18.2.4  系统整理所需资料     326

18.2.5  与网站设计美工确定布局和

风格     326

18.2.6  程序员完成网站功能实现    326

18.2.7  网站上线测试     326

18.2.8  网站推广     327

18.3  企业网站     327

18.3.1  组织网页结构     327

18.3.2  构建网页标题     329

18.3.3  构建侧边栏     331

18.3.4  构建主体内容     332

18.3.5  构建版权信息     339

18.4  手机阅读器     339

18.4.1  使用到的技术     339

18.4.2  HTML页面代码分析     340

18.4.3  CSS3样式代码分析     343

18.4.4  JavaScript脚本代码分析     352

18.5  本章小结     361

参考文献    362