HTML5网页开发实例详解

内容概要

周遥，资深WEB开发工程师，具有多年的软件开发经验，致力于互联网相关技术的研究，是国内率先在HTML5这一领域进行研究与实践的人员，在前端开发•前端自动化•前端性能优化方面拥有丰富的实战经验，同时擅长后端开发技术，在C#，ASP.NET,SQL Server,Oracle,Node.js,Pathon等方面也积累了大量的实战经验。目前在大众点评网担任前端开发和培训工作。

李春城，毕业于电子科技大学，软件工程专业，硕士。5年互联网从业经验，3年WEB前端开发经验，从事过产品，前端，后端等开发工作。精通LN(A)MP平台的开发，软件架构的设计，设计模式等等。目前在聚划算担任前端开发和基础架构工作

书籍目录

第1章 HTML 5引发的 Web革命

1.1你是不是真的了解 HTML

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对象

HTML 5网页开发实例详解

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.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应用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 CSS3UI框架

3.3.1 HTML 5 Boilerplate

HTML 5网页开发实例详解

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的

4.2.4如何在 Node.js中调试

4.2.5使用 Node.js搭建 Web Server

4.3 jQuery框架

4.3.1 jQuery框架简介

4.3.2 jQuery常用

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示例效果

HTML 5网页开发实例详解

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获取地理定位

HTML 5网页开发实例详解

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存储数据的共享

HTML 5网页开发实例详解

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所包含的各项新技术。本书分为 14章。第 1~4章介绍了 HTML 5和浏览器的发展史、 HTML 5新特性的使用，最新的前端设计概念和第三方流行应用框架，如响应式设计、移动端框架、 MVC、图形库、游戏库、 Node.js；第 6~12章介绍了表单、 Canvas、多媒体、地理、拖放、存储、通信、离线应用等多个方向，并给出了大量实例；第 13~14章通过两个完整的大型应用实例，详细分析 HTML 5的项目流程及设计技巧。

本书适用于所有前端开发初学者和网页设计入门者，也可作为大中专院校及培训学校教材 及上机指导用书。

 HTML5网页开发实例详解下载 更多精彩书评