HTML5网页开发实例详解
HTML5网页开发实例详解
1 HTML 5引发的Web革命
1.1 你是不是真的了解HTML 5
1.1.1 通过W3C认识HTML 5的发展史
1.1.2 HTML 4、XHTML、HTML 5的区别
1.1.3 什么人应该学HTML 5
1.1.4 一张图告诉你如何学习HTML 5
1.2 浏览器之争
1.2.1 说说这些常见的浏览器
1.2.2 浏览器的兼容烦恼与策略
1.2.3 给你的浏览器打分
1.3 学习制作简单的HTML 5页面
1.3.1 搭建开发HTML 5的浏览器环境
1.3.2 检测浏览器是否支持HTML 5标签
1.4 常见问题
1.4.1 学好HTML 5要先学好Java吗
1.4.2 谁是HTML 5新规则下的牺牲品
1.4.3 HTML 5是否有未来
1.4.4 HTML 5在移动应用开发是否有前景
1.5 本章小结
2 HTML 5的整体特性
2.1 HTML 5的新元素
2.1.1 最新的交互元素——内容交互、菜单交互、状态交互
2.1.2 HTML 5页面结构
2.1.3 DOCTYPE和字符集
2.1.4 其他标签元素
2.2 Modernizr库
2.2.1 Modernizr库是什么
2.2.2 使用Modernizr库提供的方法检测浏览器的各项指标
2.3 表单和文件
2.3.1 input元素的新增类型
2.3.2 input元素新增的公用属性
2.3.3 新增表单元素
2.3.4 表单新增的验证方法
2.3.5 File对象
2.3.6 FileSystem接口
2.3.7 jQuery html5Validate HTML 5表单验证插件
2.4 图形绘制
2.4.1 Canvas是什么
2.4.2 什么情况下用Canvas
2.4.3 检测浏览器对Canvas的支持情况
2.4.4 在页面中加入Canvas
2.4.5 SVG是什么
2.4.6 SVG的使用
2.4.7 WebGL是什么
2.4.8 WebGL的使用
2.4.9 Paper.js图形库
2.5 音频视频
2.5.1 音频和视频编码解码器
2.5.2 使用脚本控制播放
2.5.3 audio元素和video元素的浏览器支持情况
2.5.4 音视频的实时通信
2.6 地理位置
2.6.1 纬度和经度坐标
2.6.2 有哪些定位数据
2.6.3 怎么保护自己的隐私
2.6.4 构建地理位置应用
2.7 拖放
2.7.1 Datatransfer对象
2.7.2 拖放的事件监听
2.7.3 带拖放功能的网站
2.7.4 构建网页的拖放应用
2.8 Web存储
2.8.1 设置和获取数据
2.8.2 LocalStorage与SessionStorage
2.8.3 网站本地存储兼容性方案
2.8.4 如何在实际开发中使用本地存储
2.9 HTML 5的通信
2.9.1 PostMessage API
2.9.2 XMLHttpRequest Level 2
2.9.3 WebSocket API
2.9.4 Socket.IO通信框架介绍
2.10 Web Workers
2.10.1 与HTML5 Web Workers通信
2.10.2 多个JavaScript文件的加载与执行
2.10.3 子Web Workers和内嵌Web Workers
2.10.4 构建Web Workers应用
2.11 离线Web应用
2.11.1 离线Web应用相关API
2.11.2 Manifest使用介绍
2.11.3 使用ApplicationCache API
2.11.4 搭建简单的离线应用程序
2.12 微数据
2.12.1 语义化概念
2.12.2 Microdata的前世今生
2.12.3 如何使用Microdata优化网页
2.12.4 国内网站如何使用Microdata
2.13 HTML 5 History
2.13.1 History API介绍
2.13.2 History与Hash
2.13.3 什么是MVC
2.13.4 主流MVC框架介绍
2.14 选择器
2.14.1 选择器分类
2.14.2 使用选择器操作页面中的元素
2.15 CSS 3特性
2.15.1 CSS 3带来了什么
2.15.2 开放字体格式（WOFF）
2.15.3 背景（Backgrounds）
2.15.4 文字效果（Text Effects）
2.15.5 边框（Border）
2.15.6 用户界面（User interface）
2.15.7 多列（Multiple Columns）
2.15.8 转换（Transform）
2.15.9 过渡（Transition）
2.16 本章小结
3 HTML 5相关概念和框架
3.1 响应式Web设计
3.1.1 什么是响应式Web设计
3.1.2 流式布局
3.1.3 媒体查询
3.1.4 Twitter Bootstrap理念
3.1.5 Twitter Bootstrap应用
3.2 移动JavaScript框架
3.2.1 Sencha Touch
3.2.2 jQuery Mobile介绍和例子
3.2.3 PhoneGap
3.2.4 JQ.Mobi
3.3 CSS 3 UI框架
3.3.1 HTML 5 Boilerplate
3.3.2 Less Framework
3.4 HTML 5图表库
3.4.1 Raphael
3.4.2 Highcharts
3.5 游戏库——Three.js的使用
3.6 本章小结
4 环境搭建
4.1 选择一款编辑器
4.1.1 Notepad++编辑器
4.1.2 UltraEdit编辑器
4.1.3 Sublime Text 2编辑器
4.2 Node.js
4.2.1 Node.js介绍
4.2.2 Node.js安装
4.2.3 使用Node.js的NPM
4.2.4 如何在Node.js中调试
4.2.5 使用Node.js搭建Web Server
4.3 jQuery框架
4.3.1 jQuery框架简介
4.3.2 jQuery常用API
4.4 其他实战开发技巧
4.4.1 如何在Chrome浏览器调试脚本
4.4.2 如何通过Fiddler加速开发
4.5 本章小结
5 HTML 5元素与表单大演练
5.1 示例1 创建跨浏览器的HTML 5表单
5.1.1 示例效果
5.1.2 代码设计
5.1.3 代码分析
5.1.4 相关知识
5.2 示例2 搞定低版本浏览器的兼容性问题
5.2.1 示例效果
5.2.2 代码设计
5.2.3 代码分析
5.2.4 相关知识
5.3 示例3 创建HTML 5版的注册页面
5.3.1 示例效果
5.3.2 代码设计
5.3.3 代码分析
5.3.4 相关知识
5.4 示例4 用HTML 5的验证方法验证注册页面
5.4.1 示例效果
5.4.2 代码设计
5.4.3 代码分析
5.4.4 相关知识
5.5 示例5 搞定输入框自动聚焦问题
5.5.1 示例效果
5.5.2 代码设计
5.5.3 代码分析
5.5.4 相关知识
5.6 示例6 搞定表单的自动完成
5.6.1 示例效果
5.6.2 代码设计
5.6.3 代码分析
5.7 示例7 使用数字微调控件
5.7.1 示例效果
5.7.2 代码设计
5.7.3 代码分析
5.7.4 相关知识
5.8 示例8 添加滑动控件
5.8.1 示例效果
5.8.2 代码设计
5.8.3 代码分析
5.8.4 相关知识
5.9 示例9 发送多个文件
5.9.1 示例效果
5.9.2 代码设计
5.9.3 代码分析
5.9.4 相关知识
5.10 示例10 利用正则表达式创建自定义输入类型
5.10.1 示例效果
5.10.2 代码设计
5.11 示例11 预览上传的图片
5.11.1 示例效果
5.11.2 代码设计
5.11.3 代码分析
5.11.4 相关知识
5.12 示例12 无刷新异步上传
5.12.1 示例效果
5.12.2 代码设计
5.12.3 代码分析
5.12.4 相关知识
5.13 示例13 拖曳上传文件
5.13.1 示例效果
5.13.2 代码设计
5.13.3 代码分析
6 Canvas图画大演练
6.1 示例1 绘制图形（矩形和圆形）
6.1.1 示例效果
6.1.2 代码设计
6.1.3 代码分析
6.2 示例2 在图形中写字
6.2.1 示例效果
6.2.2 代码设计
6.2.3 代码分析
6.3 示例3 在画布中使用渐变色
6.3.1 示例效果
6.3.2 代码分析
6.4 示例4 输出图片文件
6.4.1 示例效果
6.4.2 代码分析
6.5 示例5 操作图片像素
6.5.1 示例效果
6.5.2 代码分析
6.6 示例6 制作动画计时器
6.6.1 示例效果
6.6.2 代码设计
6.6.3 代码分析
6.7 示例7 在画布中剪贴图像
6.7.1 示例效果
6.7.2 代码设计
6.7.3 代码分析
6.8 示例8 实现相片的360°旋转特效
6.8.1 示例效果
6.8.2 代码分析
6.9 示例9 一个HTML 5版销售数据图表
6.9.1 示例效果
6.9.2 代码设计
6.9.3 代码分析
6.10 示例10 制作一个简单动画
6.10.1 示例效果
6.10.2 代码设计
6.10.3 代码分析
7 音频和视频大演练
7.1 示例1 在网页中加入已有的视频
7.1.1 示例效果
7.1.2 代码分析
7.2 示例2 制做在线音频播放器
7.2.1 示例效果
7.2.2 代码设计
7.2.3 代码分析
7.3 示例3 做一个自己的视频播放器
7.3.1 示例效果
7.3.2 代码设计
7.3.3 代码分析
7.4 示例4 动态显示媒体文件播放时间
7.4.1 示例效果
7.4.2 代码分析
7.5 示例5 解决视频自定义工具条全屏问题
7.5.1 示例效果
7.5.2 代码分析
7.6 示例6 实现一个视频的进度条
7.6.1 示例效果
7.6.2 代码分析
7.7 示例7 给播放器添加快进慢进按钮
7.7.1 示例效果
7.7.2 代码分析
7.8 示例8 处理带字幕的视频
7.8.1 示例效果
7.8.2 代码分析
7.9 示例9 用HTML 5拍照和摄像
7.9.1 示例效果
7.9.2 代码设计
7.9.3 代码分析
7.9.4 相关知识
8 地理位置大演练
8.1 示例1 通过IP地址获取地理定位
8.1.1 示例效果
8.1.2 代码设计
8.1.3 代码分析
8.1.4 相关知识
8.2 示例2 通过Wi-Fi获取地理定位
8.2.1 示例效果
8.2.2 代码设计
8.2.3 代码分析
8.2.4 相关知识
8.3 示例3 通过GPS获取地理定位
8.3.1 示例效果
8.3.2 代码设计
8.3.3 代码分析
8.3.4 相关知识
8.4 示例4 手机地理定位
8.4.1 示例效果
8.4.2 代码分析
8.4.3 相关知识
8.5 示例5 用户自定义的地理定位
8.5.1 示例效果
8.5.2 代码设计与分析
8.6 示例6 在Google Map显示我在这里
8.6.1 示例效果
8.6.2 代码设计
8.6.3 代码分析
8.7 示例7 处理定位错误
8.7.1 示例效果
8.7.2 代码设计
8.7.3 代码分析
8.8 示例8 使用Google地图追踪用户的位置
8.8.1 示例效果
8.8.2 代码设计
8.8.3 代码分析
8.9 示例9 使用Google地图查找路线
8.9.1 示例效果
8.9.2 代码设计与分析
9 拖放大演练
9.1 示例1 实现网页元素的拖放
9.1.1 示例效果
9.1.2 代码设计
9.1.3 代码分析
9.2 示例2 拖放图标
9.2.1 示例效果
9.2.2 代码设计
9.2.3 代码分析
9.3 示例3 设置拖放的效果
9.3.1 示例效果
9.3.2 代码分析
9.4 示例4 对照片进行排序
9.4.1 示例效果
9.4.2 代码设计
9.4.3 代码分析
9.4.4 相关知识
9.5 示例5 拖放文件
9.5.1 示例效果
9.5.2 代码设计
9.5.3 代码分析
9.6 示例6 将商品拖入购物车
9.6.1 示例效果
9.6.2 代码设计
9.6.3 代码分析
9.7 示例7 拖放图片保存服务器
9.7.1 示例效果
9.7.2 代码设计和分析
9.8 示例8 拖动脚本文件进行压缩
9.8.1 示例效果
9.8.2 代码设计
9.8.3 代码分析
9.9 示例9 可拖放文本阅读器
9.9.1 示例效果
9.9.2 代码设计
9.9.3 代码分析
10 本地存储大演练
10.1 示例1 保存与读取登录用户名与密码
10.1.1 示例效果
10.1.2 代码设计
10.1.3 代码分析
10.2 示例2 保存与读取临时数据
10.2.1 示例效果
10.2.2 代码分析
10.3 示例3 使用本地数据库
10.3.1 示例效果
10.3.2 代码设计和分析
10.4 示例4 桌面提醒工具
10.4.1 示例效果
10.4.2 代码设计和分析
10.5 示例5 存储JSON对象
10.5.1 示例效果
10.5.2 代码设计和分析
10.6 示例6 封堵数据泄漏
10.6.1 示例效果
10.6.2 代码设计
10.6.3 代码分析
10.7 示例7 存储数据的共享
10.7.1 示例效果
10.7.2 代码设计和分析
10.8 示例8 删除本地缓存
10.8.1 示例效果
10.8.2 代码设计和分析
11 HTML 5通信大演练
11.1 示例1 微博消息实时推送
11.1.1 示例效果
11.1.2 代码设计与分析
11.2 示例2 在线代码编辑器
11.2.1 示例效果
11.2.2 代码设计与分析
11.3 示例3 在iFrame中嵌入可变的编辑器
11.3.1 示例效果
11.3.2 代码设计与分析
11.4 示例4 预览网站内容
11.4.1 示例效果
11.4.2 代码设计与分析
11.5 示例5 定时给客户发消息
11.5.1 示例效果
11.5.2 代码设计与分析
11.6 示例6 通过WebSocket创建聊天室
11.6.1 示例效果
11.6.2 代码设计与分析
12 离线Web应用大演练
12.1 示例1 使用定时器
12.1.1 示例效果
12.1.2 代码设计和分析
12.2 示例2 排队处理订单
12.2.1 示例效果
12.2.2 代码设计和分析
12.3 示例3 在后台运行JavaScript
12.3.1 示例效果
12.3.2 代码设计和分析
12.4 示例4 开发简单的离线应用
12.4.1 示例效果
12.4.2 代码设计和分析
12.5 示例5 检测网络的当前状态
12.5.1 示例效果
12.5.2 代码设计和分析
12.6 示例6 开发离线留言网页
12.6.1 示例效果
12.6.2 代码设计
12.6.3 代码分析
12.7 示例7 添加Geolocation跟踪
12.7.1 示例效果
12.7.2 代码设计和分析
12.8 示例8 设计离线事件处理程序
12.8.1 示例效果
12.8.2 代码设计和分析
13 HTML 5手机遥控PPT
13.1 控制器页面预览
13.2 使用移动设备访问控制器页面
13.3 代码设计和分析
13.3.1 启动服务器
13.3.2 index路由的逻辑规则和对应模板内容
13.3.3 handle路由的逻辑规则和对应模板内容
13.4 整个实例的流程图
13.5 相关知识点
13.5.1 Swig模板
13.5.2 Consolidate.js库
13.6 本章小结
14 响应式设计之新闻阅读列表设计
14.1 原型设计
14.2 模块设计
14.2.1 视觉模块设计
14.2.2 前端模块设计
14.2.3 使用Media Queries自适应各种分辨率的客户端
14.3 运行效果
14.4 本章小结
附录A 主流浏览器对HTML 5新特性的支持情况
附录B 传统HTML标签及说明
HTML 5 网页开发实例详解
思维导图
防止博客图床图片失效，防止图片源站外链：
http://www.processon.com/chart_image/5e5b2b60e4b02bc3ad6a0cf1.png)
思维导图在线编辑链接：
