《HTML 5网页开发实例具体解释》文件夹

时间:2021-08-24 16:57:17

第一篇  从宏观上认识HTML 5

讲述了HTML 5引发的Web革命、HTML 5的总体特性、HTML 5相关概念和框架和开发环境搭建。

第1章 HTML 5引发的Web革命

1.1  你是不是真的了解HTML 5

1.1.1  通过W3C认识HTML 5的发展史

1.1.2  HTML 5、HTML4、XHTML的差别

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 检測HTML 5特性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  jQueryhtml5Validate HTML5表单验证插件

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  WebSocketAPI

2.9.4  Socket.IO通信框架介绍

2.10  WebWorkers

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 5History

2.13.1  HistoryAPI介绍

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  TwitterBootstrap理念

3.1.5  TwitterBootstrap应用

3.2  移动JavaScript框架

3.2.1  SenchaTouch介绍和样例

3.2.2  jQueryMobile介绍和样例

3.2.3  PhoneGap介绍和样例

3.2.4  JQ.Mobi介绍和样例

3.3  CSS 3 UI框架

3.3.1  HTML 5Boilerplate介绍

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  SublimeText 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  本章小结

第二篇  从微观上应用HTML 5

讲述了HTML 5的元素与表单大演练、Canvas图画大演练、音频和视频大演练、地理位置大演练、拖放大演练、本地存储大演练、通信大演练和离线Web应用大演练。并提供了大量的实际开发案例。

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

演示样例001  创建跨浏览器的HTML5表单

演示样例002  搞定低版本号浏览器的兼容性

演示样例003  创建一个HTML 5版的注冊页面

演示样例004  用HTML 5的验证方法验证注冊页面

演示样例005  搞定输入框自己主动聚焦

演示样例006  搞定表单的自己主动完毕

演示样例007  使用数字微调控件

演示样例008  加入滑动控件

演示样例009  发送多个文件

演示样例010  利用正則表達式创建自己定义输入类型

演示样例011  预览上传的图片

演示样例012  无刷新异步上传

演示样例013  拖拽上传文件

第6章  Canvas图画大演练

演示样例001  绘制图形(矩形和圆形)

演示样例002  在图形中写字

演示样例003  画布中使用渐变色

演示样例004  输出图片文件

演示样例005  操作图片像素

演示样例006  制作一个动画计时器

演示样例007  在画布中剪贴图像

演示样例008  实现相片的360度旋转特效

演示样例009  一个HTML 5版销售数据图表

演示样例010  制作一个简单动画

第7章  音频和视频大演练

演示样例001  在网页中增加已有的视频

演示样例002  做一个自己的在线音频播放器

演示样例003  做一个自己的视频播放器

演示样例004  动态显示媒体文件播放时间

演示样例005  解决视频自己定义工具条全屏问题

演示样例006  实现一个视频的进度条

演示样例007  给播放器加入快进慢进button

演示样例008  处理带字幕的视频

演示样例009  用HTML5拍照和摄像

第8章  地理位置大演练

演示样例001  通过IP地址获取地理定位

演示样例002  通过WI-FI获取地理定位

演示样例003  通过GPS获取地理定位

演示样例004  手机地理定位

演示样例005  用户自己定义的地理定位

演示样例006  在Google Map显示我在这里

演示样例007  处理定位错误

演示样例008  使用Google地图追踪用户的位置

演示样例009  使用Google地图查找路线

第9章  拖放大演练

演示样例001  实现网页元素的拖放

演示样例002  拖放图标

演示样例003  设置拖放的效果

演示样例004  对比片进行排序

演示样例005  拖放文件

演示样例006  将商品拖入购物车

演示样例007  拖放图片保存server

演示样例008  拖动脚本文件进行压缩

演示样例009  可拖放文本阅读器

第10章  本地存储大演练

演示样例001  保存与读取登录username与password

演示样例002  保存与读取暂时数据

演示样例003  使用本地数据库

演示样例004  一个桌面提醒工具

演示样例005  存储JSON对象

演示样例006  封堵数据泄漏

演示样例007  存储数据的共享

演示样例008  删除本地缓存

第11章 HTML 5通信大演练

演示样例001  微博消息实时推送

演示样例002  在线代码编辑器

演示样例003  在iFrame中嵌入一个可变大小的编辑器

演示样例004  预览站点内容

演示样例005  定时给客户发消息

演示样例006  通过WebSocket创建聊天室

第12章  离线Web应用大演练

演示样例001  使用定时器

演示样例002  排队处理订单

演示样例003  后台执行一段JavaScript吧

演示样例004  开发一个简单的离线应用

演示样例005  检測网络的当前状态

演示样例006  开发一个离线留言网页

演示样例007  加入Geolocation跟踪

演示样例008  设计离线事件处理程序

第三篇  HTML 5完美实战案例

讲述了两个完整的案例分析。分别为HTML 5手机遥控PPT和响应式之新闻阅读列表设计,将前面所学的HTML 5特性应用在现实的场景中。

第13章 HTML 5手机遥控PPT

13.1  控制器页面预览

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

13.3  代码设计和分析

13.3.1  启动server

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自适应各种屏幕分辨率client

14.3  执行效果

14.4  本章小结

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

附录B  传统HTML标签及说明