HTML 5网页开发实例详解PDF电子书下载

第1章 HTML 5引发的Web革命 1

1.1 你是不是真的了解HTML5 1

1.1.1 通过W3C认识HTML5的发展史 2

1.1.2 HTML4、XHTML、HTML5的区别 3

1.1.3 什么人应该学HTML5 5

1.1.4 一张图告诉你如何学习HTML5 6

1.2 浏览器之争 6

1.2.1 说说这些常见的浏览器 7

1.2.2 浏览器的兼容烦恼与策略 11

1.2.3 给你的浏览器打分 13

1.3 学习制作简单的HTML5页面 14

1.3.1 搭建开发HTML 5的浏览器环境 18

1.3.2 检测浏览器是否支持HTML 5标签 20

1.4 常见问题 22

1.4.1 学好HTML 5要先学好Java吗 23

1.4.2 谁是HTML 5新规则下的牺牲品 24

1.4.3 HTML 5是否有未来 24

1.4.4 HTML 5在移动应用开发是否有前景 26

1.5 本章小结 27

第2章 HTML 5的整体特性 28

2.1 HTML 5的新元素 28

2.1.1 最新的交互元素——内容交互、菜单交互、状态交互 28

2.1.2 HTML 5页面结构 31

2.1.3 DOCTYPE和字符集 32

2.1.4 其他标签元素 34

2.2 Modernizr库 36

2.2.1 Modernizr库是什么 36

2.2.2 使用Modernizr库提供的方法检测浏览器的各项指标 37

2.3 表单和文件 40

2.3.1 input元素的新增类型 40

2.3.2 input元素新增的公用属性 41

2.3.3 新增表单元素 44

2.3.4 表单新增的验证方法 46

2.3.5 File对象 48

2.3.6 FileSystem接口 50

2.3.7 iQuerv html5Validate HTML 5表单验证插件 55

2.4 图形绘制 57

2.4.1 Canvas是什么 57

2.4.2 什么情况下用Canvas 57

2.4.3 检测浏览器对Canvas的支持情况 58

2.4.4 在页面中加入Canvas 58

2.4.5 SVG是什么 60

2.4.6 SVG的使用 60

2.4.7 WebGL是什么 61

2.4.8 WebGL的使用 61

2.4.9 Paper.js图形库 62

2.5 音频视频 63

2.5.1 音频和视频编码解码器 63

2.5.2 使用脚本控制播放 64

2.5.3 audio元素和video元素的浏览器支持情况 65

2.5.4 音视频的实时通信 66

2.6 地理位置 68

2.6.1 纬度和经度坐标 68

2.6.2 有哪些定位数据 69

2.6.3 怎么保护自己的隐私 70

2.6.4 构建地理位置应用 71

2.7 拖放 73

2.7.1 Datatransfer对象 74

2.7.2 拖放的事件监听 74

2.7.3 带拖放功能的网站 76

2.7.4 构建网页的拖放应用 77

2.8 Web存储 79

2.8.1 设置和获取数据 79

2.8.2 LocalStorage与SessionStorage 80

2.8.3 网站本地存储兼容性方案 82

2.8.4 如何在实际开发中使用本地存储 87

2.9 HTML 5的通信 88

2.9.1 PostMessage API 88

2.9.2 XMLHttpRequest Level 2 91

2.9.3 WebSocket API 93

2.9.4 Socket.IO通信框架介绍 95

2.10 Web Workers 97

2.10.1 与HTML5 Web Workers通信 98

2.10.2 多个JavaScript文件的加载与执行 98

2.10.3 子Web Workers和内嵌Web Workers 98

2.10.4 构建Web Workers应用 99

2.11 离线Web应用 102

2.11.1 离线Web应用相关API 102

2.11.2 Manifest使用介绍 104

2.11.3 使用ApplicationCache API 105

2.11.4 搭建简单的离线应用程序 106

2.12 微数据 109

2.12.1 语义化概念 109

2.12.2 Microdata的前世今生 110

2.12.3 如何使用Mierodata优化网页 111

2.12.4 国内网站如何使用Microdata 113

2.13 HTML 5 Historv 114

2.13.1 HistoryAPI介绍 115

2.13.2 History与Hash 117

2.13.3 什么是MVC 119

2.13.4 主流MVC框架介绍 119

2.14 选择器 120

2.14.1 选择器分类 121

2.14.2 使用选择器操作页面中的元素 123

2.15 CSS 3特性 124

2.15.1 CSS 3带来了什么 124

2.15.2 开放字体格式（WOFF） 125

2.15.3 背景（Backgrounds） 127

2.15.4 文字效果（Text Effects） 129

2.15.5 边框（Border） 130

2.15.6 用户界面（User interface） 132

2.15.7 多列（Multiple Columns） 134

2.15.8 转换（Ttansform） 135

2.15.9 过渡（Transition） 135

2.16 本章小结 136

第3章 HTML 5相关概念和框架 137

3.1 响应式Web设计 137

3.1.1 什么是响应式Web设计 137

3.1.2 流式布局 138

3.1.3 媒体查询 139

3.1.4 Twitter Bootstrap理念 140

3.1.5 Twitter Bootstrap应用 140

3.2 移动JavaScript框架 143

3.2.1 Sencha Touch 143

3.2.2 jQuery Mobile介绍和例子 147

3.2.3 PhoneGap 149

3.2.4 JQ.Mobi 151

3.3 CSS 3 UI框架 153

3.3.1 HTML 5 Boilerplate 153

3.3.2 Less Framework 154

3.4 HTML 5图表库 155

3.4.1 Raphael 155

3.4.2 Highcharts 157

3.5 游戏库——Three.js的使用 159

3.6 本章小结 161

第4章 环境搭建 162

4.1 选择一款编辑器 162

4.1.1 Notepad＋＋编辑器 162

4.1.2 UltraEdit编辑器 163

4.1.3 Sublime Text 2编辑器 163

4.2 Node.js 164

4.2.1 Node.js介绍 164

4.2.2 Node.js安装 165

4.2.3 使用Node.js的NPM 168

4.2.4 如何在Node.js中调试 172

4.2.5 使用Node.js搭建Web Server 175

4.3 jQuery框架 178

4.3.1 jQuery框架简介 178

4.3.2 jQuery常用API 178

4.4 其他实战开发技巧 181

4.4.1 如何在Chrome浏览器调试脚本 181

4.4.2 如何通过Fiddler加速开发 187

4.5 本章小结 189

第5章 HTML 5元素与表单大演练 190

5.1 示例1 创建跨浏览器的HTML 5表单 190

5.1.1 示例效果 190

5.1.2 代码设计 192

5.1.3 代码分析 194

5.1.4 相关知识 195

5.2 示例2 搞定低版本浏览器的兼容性问题 195

5.2.1 示例效果 195

5.2.2 代码设计 197

5.2.3 代码分析 201

5.2.4 相关知识 202

5.3 示例3 创建HTML 5版的注册页面 202

5.3.1 示例效果 202

5.3.2 代码设计 203

5.3.3 代码分析 208

5.3.4 相关知识 209

5.4 示例4 用HTML 5的验证方法验证注册页面 210

5.4.1 示例效果 210

5.4.2 代码设计 211

5.4.3 代码分析 213

5.4.4 相关知识 216

5.5 示例5 搞定输入框自动聚焦问题 217

5.5.1 示例效果 217

5.5.2 代码设计 218

5.5.3 代码分析 219

5.5.4 相关知识 219

5.6 示例6 搞定表单的自动完成 220

5.6.1 示例效果 220

5.6.2 代码设计 220

5.6.3 代码分析 221

5.7 示例7 使用数字微调控件 221

5.7.1 示例效果 221

5.7.2 代码设计 223

5.7.3 代码分析 225

5.7.4 相关知识 226

5.8 示例8 添加滑动控件 227

5.8.1 示例效果 227

5.8.2 代码设计 227

5.8.3 代码分析 229

5.8.4 相关知识 229

5.9 示例9 发送多个文件 230

5.9.1 示例效果 230

5.9.2 代码设计 232

5.9.3 代码分析 234

5.9.4 相关知识 235

5.10 示例10 利用正则表达式创建自定义输入类型 236

5.10.1 示例效果 236

5.10.2 代码设计 237

5.11 示例11 预览上传的图片 238

5.11.1 示例效果 238

5.11.2 代码设计 240

5.11.3 代码分析 241

5.11.4 相关知识 242

5.12 示例12 无刷新异步上传 242

5.12.1 示例效果 242

5.12.2 代码设计 244

5.12.3 代码分析 249

5.12.4 相关知识 250

5.13 示例13 拖曳上传文件 251

5.13.1 示例效果 251

5.13.2 代码设计 252

5.13.3 代码分析 254

第6章 Canvas图画大演练 256

6.1 示例1 绘制图形（矩形和圆形） 256

6.1.1 示例效果 256

6.1.2 代码设计 257

6.1.3 代码分析 259

6.2 示例2 在图形中写字 260

6.2.1 示例效果 260

6.2.2 代码设计 262

6.2.3 代码分析 266

6.3 示例3 在画布中使用渐变色 268

6.3.1 示例效果 268

6.3.2 代码分析 269

6.4 示例4 输出图片文件 270

6.4.1 示例效果 270

6.4.2 代码分析 271

6.5 示例5 操作图片像素 272

6.5.1 示例效果 272

6.5.2 代码分析 274

6.6 示例6 制作动画计时器 276

6.6.1 示例效果 276

6.6.2 代码设计 277

6.6.3 代码分析 281

6.7 示例7 在画布中剪贴图像 282

6.7.1 示例效果 282

6.7.2 代码设计 283

6.7.3 代码分析 286

6.8 示例8 实现相片的360°旋转特效 287

6.8.1 示例效果 287

6.8.2 代码分析 288

6.9 示例9 一个HTML 5版销售数据图表 290

6.9.1 示例效果 290

6.9.2 代码设计 290

6.9.3 代码分析 291

6.10 示例10 制作一个简单动画 292

6.10.1 示例效果 292

6.10.2 代码设计 293

6.10.3 代码分析 295

第7章 音频和视频大演练 297

7.1 示例1 在网页中加入已有的视频 297

7.1.1 示例效果 297

7.1.2 代码分析 298

7.2 示例2 制做在线音频播放器 298

7.2.1 示例效果 298

7.2.2 代码设计 299

7.2.3 代码分析 300

7.3 示例3 做一个自己的视频播放器 301

7.3.1 示例效果 301

7.3.2 代码设计 302

7.3.3 代码分析 303

7.4 示例4 动态显示媒体文件播放时间 304

7.4.1 示例效果 304

7.4.2 代码分析 305

7.5 示例5 解决视频自定义工具条全屏问题 306

7.5.1 示例效果 306

7.5.2 代码分析 306

7.6 示例6 实现一个视频的进度条 308

7.6.1 示例效果 308

7.6.2 代码分析 308

7.7 示例7 给播放器添加快进慢进按钮 310

7.7.1 示例效果 310

7.7.2 代码分析 311

7.8 示例8 处理带字幕的视频 312

7.8.1 示例效果 312

7.8.2 代码分析 312

7.9 示例9 用HTML 5拍照和摄像 313

7.9.1 示例效果 313

7.9.2 代码设计 314

7.9.3 代码分析 316

7.9.4 相关知识 316

第8章 地理位置大演练 317

8.1 示例1 通过IP地址获取地理定位 317

8.1.1 示例效果 317

8.1.2 代码设计 318

8.1.3 代码分析 320

8.1.4 相关知识 321

8.2 示例2 通过Wi-Fi获取地理定位 322

8.2.1 示例效果 322

8.2.2 代码设计 322

8.2.3 代码分析 324

8.2.4 相关知识 325

8.3 示例3 通过GPS获取地理定位 325

8.3.1 示例效果 325

8.3.2 代码设计 326

8.3.3 代码分析 327

8.3.4 相关知识 327

8.4 示例4 手机地理定位 328

8.4.1 示例效果 328

8.4.2 代码分析 329

8.4.3 相关知识 330

8.5 示例5 用户自定义的地理定位 331

8.5.1 示例效果 331

8.5.2 代码设计与分析 333

8.6 示例6 在Google Map显示我在这里 335

8.6.1 示例效果 335

8.6.2 代码设计 336

8.6.3 代码分析 338

8.7 示例7 处理定位错误 339

8.7.1 示例效果 339

8.7.2 代码设计 340

8.7.3 代码分析 342

8.8 示例8 使用Google地图追踪用户的位置 343

8.8.1 示例效果 343

8.8.2 代码设计 345

8.8.3 代码分析 347

8.9 示例9 使用Google地图查找路线 348

8.9.1 示例效果 348

8.9.2 代码设计与分析 351

第9章 拖放大演练 357

9.1 示例1 实现网页元素的拖放 357

9.1.1 示例效果 357

9.1.2 代码设计 358

9.1.3 代码分析 359

9.2 示例2 拖放图标 360

9.2.1 示例效果 360

9.2.2 代码设计 361

9.2.3 代码分析 362

9.3 示例3 设置拖放的效果 363

9.3.1 示例效果 363

9.3.2 代码分析 363

9.4 示例4 对照片进行排序 365

9.4.1 示例效果 365

9.4.2 代码设计 365

9.4.3 代码分析 367

9.4.4 相关知识 368

9.5 示例5 拖放文件 369

9.5.1 示例效果 369

9.5.2 代码设计 369

9.5.3 代码分析 371

9.6 示例6 将商品拖入购物车 371

9.6.1 示例效果 371

9.6.2 代码设计 373

9.6.3 代码分析 375

9.7 示例7 拖放图片保存服务器 376

9.7.1 示例效果 376

9.7.2 代码设计和分析 378

9.8 示例8 拖动脚本文件进行压缩 382

9.8.1 示例效果 382

9.8.2 代码设计 383

9.8.3 代码分析 384

9.9 示例9 可拖放文本阅读器 384

9.9.1 示例效果 384

9.9.2 代码设计 386

9.9.3 代码分析 388

第10章 本地存储大演练 389

10.1 示例1 保存与读取登录用户名与密码 389

10.1.1 示例效果 389

10.1.2 代码设计 390

10.1.3 代码分析 391

10.2 示例2 保存与读取临时数据 392

10.2.1 示例效果 392

10.2.2 代码分析 392

10.3 示例3 使用本地数据库 393

10.3.1 示例效果 393

10.3.2 代码设计和分析 395

10.4 示例4 桌面提醒工具 398

10.4.1 示例效果 398

10.4.2 代码设计和分析 399

10.5 示例5 存储JSON对象 401

10.5.1 示例效果 401

10.5.2 代码设计和分析 402

10.6 示例6 封堵数据泄漏 404

10.6.1 示例效果 404

10.6.2 代码设计 406

10.6.3 代码分析 408

10.7 示例7 存储数据的共享 408

10.7.1 示例效果 408

10.7.2 代码设计和分析 409

10.8 示例8 删除本地缓存 411

10.8.1 示例效果 411

10.8.2 代码设计和分析 412

第11章 HTML 5通信大演练 415

11.1 示例1 微博消息实时推送 415

11.1.1 示例效果 415

11.1.2 代码设计与分析 416

11.2 示例2在线代码编辑器 419

11.2.1 示例效果 419

11.2.2 代码设计与分析 420

11.3 示例3 在iFrame中嵌入可变的编辑器 423

11.3.1 示例效果 423

11.3.2 代码设计与分析 424

11.4 示例4 预览网站内容 427

11.4.1 示例效果 427

11.4.2 代码设计与分析 428

11.5 示例5 定时给客户发消息 431

11.5.1 示例效果 431

11.5.2 代码设计与分析 433

11.6 示例6 通过WebSocket创建聊天室 438

11.6.1 示例效果 438

11.6.2 代码设计与分析 442

第12章 离线Web应用大演练 452

12.1 示例1 使用定时器 452

12.1.1 示例效果 452

12.1.2 代码设计和分析 453

12.2 示例2 排队处理订单 455

12.2.1 示例效果 455

12.2.2 代码设计和分析 456

12.3 示例3 在后台运行JavaScript 459

12.3.1 示例效果 459

12.3.2 代码设计和分析 460

12.4 示例4 开发简单的离线应用 462

12.4.1 示例效果 462

12.4.2 代码设计和分析 463

12.5 示例5 检测网络的当前状态 466

12.5.1 示例效果 466

12.5.2 代码设计和分析 467

12.6 示例6 开发离线留言网页 471

12.6.1 示例效果 471

12.6.2 代码设计 472

12.6.3 代码分析 474

12.7 示例7 添加Geolocation跟踪 475

12.7.1 示例效果 475

12.7.2 代码设计和分析 476

12.8 示例8 设计离线事件处理程序 478

12.8.1 示例效果 478

12.8.2 代码设计和分析 480

第13章 HTML 5手机遥控PPT 483

13.1 控制器页面预览 483

13.2 使用移动设备访问控制器页面 485

13.3 代码设计和分析 487

13.3.1 启动服务器 487

13.3.2 index路由的逻辑规则和对应模板内容 488

13.3.3 handle路由的逻辑规则和对应模板内容 489

13.4 整个实例的流程图 491

13.5 相关知识点 492

13.5.1 Swig模板 492

13.5.2 Consolidate.js库 492

13.6 本章小结 493

第14章 响应式设计之新闻阅读列表设计 494

14.1 原型设计 494

14.2 模块设计 496

14.2.1 视觉模块设计 497

14.2.2 前端模块设计 497

14.2.3 使用Media Queries自适应各种分辨率的客户端 499

14.3 运行效果 500

14.4 本章小结 503

附录A 主流浏览器对HTML 5新特性的支持情况 504

附录B 传统HTML标签及说明 507