HTML 5开发实例大全PDF电子书下载

第1章 千里之行始于足下——基本元素实战 1

1.1 一个基本的HTML5页面 1

1.2 在页面中输出一段文字 2

1.3 使用HTML5的新元素对页面进行分栏设计 3

1.4 使用CSS修饰HTML 5页面 5

1.5 使用〈details〉标记元素实现交互 6

1.6 使用脚本控制交互的元素 8

1.7 实现下拉弹出效果 9

1.8 无刷新弹出图片和文字 11

1.9 使用〈summary〉标记元素实现交互 13

1.10 使用〈menu〉标记元素实现菜单交互 14

1.11 实现右键菜单功能 16

1.12 使用〈command〉标记元素实现动态对话框效果 17

1.13 使用〈progress〉标记元素实现进度条效果 20

1.14 使用〈meter〉标记元素实现百分比效果 22

1.15 设置〈progress〉进度条的样式 24

1.16 使用〈html〉根元素显示文字 26

1.17 通过标签设置目标链接 27

1.18 通过JavaScript脚本获取并显示文本框的内容 32

1.19 实现树节点效果 34

1.20 分组列表显示网页中的内容 36

1.21 在网页中突出显示某些文字 38

1.22 使用〈cite〉元素引用文档 40

1.23 在网页中显示一幅图片 41

1.24 在网页中显示一个文本框架 42

1.25 使用〈object〉元素在网页中显示一个Flash 43

1.26 使用鼠标光标拖动网页中的文字 44

1.27 自动隐藏或显示网页中的文字 45

1.28 自动检测输入的拼音是否正确 47

1.29 编辑修改网页中的文字 48

1.30 联合使用〈section〉和〈article〉标签 49

1.31 在网页中显示联系信息 51

1.32 在表单中使用〈object〉元素插入一个Flash 52

1.33 实现拖曳和拖放处理 52

第2章 表单元素实战 56

2.1 验证邮件地址是否合法 56

2.2 验证URL地址 58

2.3 验证在文本框中输入字符的长度 59

2.4 通过滑动条设置颜色 61

2.5 自动弹出日期和时间输入框 63

2.6 显示文本框中的搜索关键字 64

2.7 记住表单中的数据 66

2.8 验证表单中输入的数据是否合法 68

2.9 在文本框中显示提示信息 70

2.10 验证文本框中的内容是否为空 71

2.11 开启表单的自动完成功能 73

2.12 重写表单中的某些属性 74

2.13 验证表单中的数据是否为网址格式 75

2.14 自动设置表单中传递数字 76

2.15 在表单中选择多个上传文件 77

2.16 在表单中自动提示输入文本 78

2.17 一个简单的乘法计算器 79

2.18 在网页中生成一个密钥 81

2.19 验证输入的密码是否合法 82

2.20 验证两次输入的密码是否一致 84

2.21 取消表单元素的所有验证规则 86

2.22 在网页中实现自动增加表格效果 87

2.23 开发一个计数器程序 89

2.24 实现播放器样式的按钮 93

2.25 实现一个精美的登录表单界面 96

2.26 实现一个动态菜单样式 97

2.27 动态添加或删除表单中的元素 99

2.28 实现一个漂亮的圆角按钮 101

2.29 textarea根据内容自动增高 104

2.30 判断用户选择了几个复选框 105

2.31 实现仿DELL搜索表单的效果 106

2.32 实现精致、符合标准的表单页面 108

第3章 文件操作实战 110

3.1 选择一个上传文件 110

3.2 选择多个上传文件 112

3.3 获取文件的类型和大小 114

3.4 过滤出非图片格式的文件 116

3.5 过滤上传文件的类型 117

3.6 预览上传的图片 118

3.7 读取某个文本文件的内容 121

3.8 监听事件 122

3.9 使用拖曳的方式上传图片 124

3.10 美化拖曳方式上传图片表单 126

3.11 拖曳上传图片到表单并显示预览 130

3.12 IE浏览器支持的上传图片预览程序 132

3.13 实现上传头像图片大小选择 133

3.14 使用拖曳的方式在相簿中对照片进行排序 138

第4章 音频和视频实战 145

4.1 在网页中自动播放视频 145

4.2 在网页中控制播放的视频 147

4.3 在网页中设置播放视频的高度 148

4.4 在网页中自动播放音频 149

4.5 在网页中控制播放的音频 151

4.6 在网页中循环播放某个音频 152

4.7 为播放的视频准备一幅素材图片 152

4.8 显示加载视频的状态 155

4.9 出错时在播放屏幕中显示出错信息 156

4.10 自定义设计播放按钮 158

4.11 检测浏览器是否支持媒体类型并显示结果 160

4.12 显示视频的播放状态 161

4.13 显示播放视频的时间信息 163

4.14 制作一个简单的视频播放器 165

4.15 制作一个具有回放功能的视频播放器 171

第5章 绘图实战 177

5.1 在网页中定位显示鼠标光标的坐标 177

5.2 指定位置绘制指定角度的相交线 180

5.3 绘制一个圆 180

5.4 在Canvas画布中显示一幅指定的图片 181

5.5 绘制一个指定大小的正方形 182

5.6 绘制一个带边框的矩形 184

5.7 绘制一个渐变图形 186

5.8 绘制不同的圆形 188

5.9 绘制一个渐变圆形 191

5.10 移动、缩放和旋转网页中的圆形 192

5.11 使用组合的方式显示图形 194

5.12 为图形添加阴影 196

5.13 在页面中使用不同的格式绘制指定的图像 197

5.14 在页面中使用不同的方式平铺指定的图像 199

5.15 切割指定的图像 201

5.16 改变页面中图像的像素 202

5.17 绘制文字 205

5.18 在网页中保存、恢复和输出图形 206

5.19 制作一个简单的动画 208

5.20 为视频播放器设计一个截图功能 210

5.21 在网页中绘制美丽的花朵 217

5.22 生成一个能控制动作的小车 219

5.23 实现一个时钟效果 225

5.24 制作一个颜色选取器 227

5.25 制作一个图像放大镜 231

5.26 制作一个写字板 234

5.27 使用动画的形式装载显示一幅图片 235

5.28 叠加显示两个矩形 240

5.29 将彩色照片转换为黑白照片 241

5.30 模拟钟表的效果 243

5.31 将文字转换为图片 245

5.32 绘制曲线 248

5.33 绘制一个心形图像 249

5.34 实现奥运五环效果 251

5.35 在网页中绘制不同的图形 253

5.36 实现统计饼图效果 254

5.37 在网页中绘制贝赛尔曲线 255

5.38 在网页中实现矩阵变换效果 256

5.39 在网页中绘制精美的五角星矩阵效果 258

5.40 在网页中绘制坐标变换图形 260

5.41 在网页中绘制线性渐变图形 261

5.42 在网页中绘制向日葵效果 263

5.43 开发一个简单的网页版贪吃蛇游戏 264

第6章 数据存储 271

6.1 保存并读取临时数据 271

6.2 保存并读取登录用户名和密码 275

6.3 在网页中保存、清空数据记录 277

6.4 在网页中获取并显示数据 279

6.5 创建一个简单的学生信息管理页面 281

6.6 管理localStorage中的数据 284

6.7 使用openDatabase打开、创建数据库 287

6.8 执行事务操作（1） 289

6.9 执行事务操作（2） 291

6.10 执行事务操作（3） 293

6.11 日记式事务提醒系统 297

6.12 实现一个订单 300

6.13 使用客户端session保存并操作数据 308

6.14 一个离线的、日记式事务提醒系统 319

6.15 本地存储 323

6.16 在页面中动态地显示时间 325

6.17 检测本地缓存是否更新 328

6.18 更新本地缓存 330

6.19 使用swapCache方法更新本地缓存 331

6.20 更新本地缓存时触发的其他事件 333

6.21 检测网络的当前状态 335

6.22 检测网络的当前状态 336

6.23 离线留言系统 337

第7章 Web Sockets API通信实战 340

7.1 安装jWebSocket服务器 340

7.2 跨文档传输数据 341

7.3 使用WebSocket传送数据 344

7.4 传送JSON对象 347

7.5 使用jWebSocketTest框架进行通信 350

7.6 在线聊天系统 352

第8章 Geolocation API实战 359

8.1 获取当前地理位置 359

8.2 使用getCurrentPosition()方法获取地理位置信息 362

8.3 在网页中使用地图 364

8.4 在地图中显示当前的位置 366

8.5 在网页中显示当前的位置信息 368

8.6 在网页中居中显示定位地图 370

8.7 利用百度和HTML5技术实现定位处理 372

8.8 在弹出对话框中显示定位信息 373

第9章 前后台数据交互——Web Workers API实战 376

9.1 处理线程 376

9.2 使用线程传递JSON对象 379

9.3 使用线程嵌套交互数据 381

9.4 使用Web Workers API执行大计算量任务 383

9.5 在后台运行耗时较长的运算 389

9.6 通过JSON发送消息 392

9.7 计算加法运算和乘法运算 393

第10章 统计图实战 397

10.1 使用插件RGraph制作柱状图 397

10.2 改变选中柱状图的颜色 398

10.3 绘制分组柱状图 400

10.4 将柱状图的同一根柱子设置为不同的颜色 402

10.5 绘制一个折线图 403

10.6 显示提示的折线图 405

10.7 绘制多根折线 407

10.8 绘制范围折线图 409

10.9 在一个折线图中使用左右两根不同单位的垂直坐标轴 410

10.10 在一个统计图中同时绘制柱状图与折线图 412

10.11 绘制动态折线图 413

10.12 绘制一个饼图 415

10.13 单击饼块后呈现白色半透明效果 417

10.14 绘制横向柱状图 419

10.15 绘制分组横向柱状图 420

10.16 绘制雷达图 421

10.17 用拖曳的方式在柱状图中打开饼图 423

10.18 放大网页中的统计图 425

10.19 使用放大镜效果放大网页中的统计图 427

第11章 特效实战 429

11.1 实现星级评论功能 429

11.2 实现无刷新验证 432

11.3 实现的表单特效 434

11.4 制作一个漂亮的搜索表单框 438

11.5 动态操作表格 440

11.6 在文本框中弹出层效果 443

11.7 实现五彩连珠网页特效 445

11.8 实现圣诞树特效 455

11.9 实现带动画、阴影的表单提示特效 457

11.10 让图片DIV竖向滑动 462

11.11 在网页中实现风车特效 465

11.12 在网页中实现滑动门特效 468

11.13 显示世界部分地区时间表 470

11.14 实现界面框上下可以拖动效果 475

11.15 在网页中实现粒子特效效果 477

11.16 实现纯CSS3瀑布流布局 482

11.17 实现类似百叶窗拍摄快门摄影拍摄效果 483

11.18 jQuery幻灯片切换应用一个HTML5的幻灯片 485

11.19 制作一个HTML5筛选容器插件选项卡 488

第12章 游戏实战 493

12.1 开发一个躲避小游戏 493

12.2 网页版迷宫游戏 497

12.3 网页版贪吃蛇游戏 501

12.4 网页版水果老虎机游戏 505

12.5 网页版数独游戏 517

12.6 网页版俄罗斯方块游戏 520

12.7 挖箱子游戏 528

12.8 抽奖游戏 534

12.9 拼图游戏 537