作者: didimm 时间: 2013-05-20 10:38
目录
第1章 HTML5概述
1.1 HTML5的发展历程
1.1.1 HTML4兴起之路
1.1.2 XHTML曲折之路
1.1.3 HTML5的诞生
1.2 HTML5的基本特征
1.2.1 向前兼容性
1.2.2 跨平台运行性
1.2.3 简单易用性
1.2.4 用户友好性
1.3 HTML5的新功能
1.3.1 简化的DOCTYPE声明
1.3.2 简化的编码字符集
1.3.3 简化样式表和脚本引入
1.3.4 新增的全局属性
1.3.5 语义化标签之文档元素
1.3.6 语义化标签之文本元素
1.4 本章小结
第2章 旧貌换新颜——Html5 Web Form
2.1 Html5 Web Form概述
2.1.1 Html5 Web Form的设计理念
2.1.2 Html5 Web Form新在何处
2.1.3 Html5 Web Form的浏览器支持情况
2.2 Html5 Web Form的使用
2.2.1 表单容器的基本属性
2.2.2 表单结构的元素标签
2.2.3 保留的输入类型控件
2.2.4 新增的输入类型控件
2.2.5 新增的表单标签属性
2.2.6 表单验证机制
2.3 构建Html5 Web Form的开发实例
2.3.1 分析开发需求
2.3.2 搭建程序基本框架
2.3.3 页面的风格设计
2.3.4 构建实例表单验证机制
2.4 本章小结
第3章 影音急先锋——Html5 Audio and Video
3.1 Html5 Audio and Video 概述
3.1.1 视频容器
3.1.2 编码器和解码器
3.1.3 Html5 Audio and Video 的优势
3.1.4 Html5 Audio and Video 的缺陷
3.1.5 Html5 Audio and Video 的浏览器支持情况
3.2 Html5 Audio and Video 的使用
3.2.1 检测浏览器的支持情况
3.2.2 多媒体元素标签及其简单属性
3.2.3 多媒体元素的source子标签及其属性
3.2.4 多媒体元素的事件控制
3.2.4 多媒体元素的网络状态
3.2.5 多媒体元素的就绪状态
3.2.6 多媒体元素的异常状态
3.2.7 多媒体元素的播放状态
3.2.8 多媒体元素的控制按钮
3.3 构建Html5 Audio and Video的开发实例
3.5.1 分析开发的需求
3.5.2 搭建程序显示框架
3.3.3 设计播放器控制栏样式
3.3.4 播放器的初始化
3.3.5 添加播放和暂停按钮
3.3.6 添加播放时间和进度控制条
3.3.7 添加静音按钮和音量调节滑动条
3.3.8 添加播放速率选择按钮和停止按钮
3.3.9 添加全屏按钮和关灯按钮
3.4 本章小结
第4章 璀璨的明珠——Html5 Web Canvas
4.1 Html5 Web Canvas概述
4.1.1 Html5 Web Canvas的发展历程
4.1.2 Html5 Web Canvas的优势和劣势
4.1.3 Html5 Web Canvas的浏览器支持情况
4.2 Html5 Web Canvas使用
4.2.1 检测浏览器支持情况
4.2.2 Canvas接口的属性和方法
4.2.3 画笔风格的设置
4.2.4 基本形状的绘制
4.2.5 图形图像的处理
4.2.6 Canvas文本的处理
4.2.7 Canvas图片的处理
4.3 构建Html5 Web Canvas的开发实例
4.3.1 分析开发需求
4.3.2 程序主框架的搭建
4.3.4 底部导航栏缩略图
4.3.3 底部导航栏翻页按钮
4.3.5 点击放大图片和翻页功能
4.3.6 缩略图预览显示
4.3.7 自动隐藏导航栏
4.4 本章小结
第5章 寻她千百度——Html5 Web Geolocation
5.1 Html5 Web Geolocation概述
5.1.1 地理位置信息
5.1.2 位置信息的来源
5.1.3 Html5 Web Geolocation用户隐私保护机制
5.1.2 Html5 Web Geolocation的浏览器支持情况
5.2 Html5 Web Geolocation的使用
5.2.1 检测浏览器支持情况
5.2.2 单次请求方式的基本方法
5.2.3 单次请求成功之后的回调方法
5.2.4 单次请求失败之后的回调方法
5.2.5 重复更新方式的基本方法
5.3 Google Maps的基本使用
5.3.1 引入Google Maps API
5.4.2 初始化地图显示
5.3.3 添加地图地标显示
5.3.4 添加地图信息窗口显示
5.4 构建Html5 Web Geolocation开发实例
5.4.1 分析开发的需求
5.4.2 搭建程序主框架
5.4.3 获取用户的地理位置信息
5.4.4 在Google地图上显示用户的地理位置
5.4.5 显示用户所在地的天气
5.5 本章小结
第6章 多管共齐下——Html5 Web Workers
6.1 Html5 Web Workers的概述
6.1.1 进程和线程
6.1.2 Html5 Web Workers的特点
6.1.3 Html5 Web Workers的工作原理
6.1.4 Html5 Web Workers的浏览器支持情况
6.2 Html5 Web Workers的使用
6.2.1 浏览器支持情况检测
6.2.2 在主线程建立专用线程
6.2.3 在主线程建立共享线程
6.2.4 通用子线程接口的方法和属性
6.2.5 专用子线程接口的方法和属性
6.2.6 共享子线程接口的方法和属性
6.3 构建Html5 Web Workers的开发实例
6.3.1 分析开发需求
6.3.2 表单数据收集页面
6.3.3 动态增加课程项目
6.3.4 程序的主线程
6.3.2 程序的子线程
6.4 本章小结
第7章 突起的异军——Html5 Web Socket
7.1 Html5 Web Socket的概述
7.1.1 服务器推送技术简介
7.1.2 基于客户端套接口的服务器推送技术
7.1.3 基于HTTP长连接的服务器推送技术
7.1.4 Html5 Web Socket的实现原理
7.1.5 Html5 Web Socket的浏览器和服务器支持情况
7.2 Html5 Web Socket的使用
7.2.1 浏览器支持情况检测
7.2.2 搭建Html5 Web Socket运行环境
7.2.3 服务器端编程之Server接口
7.2.4 服务器端编程之Connection接口
7.2.5 客户端编程WebSocket接口
7.3 构建Html5 Web Socket开发实例
7.3.1 分析开发需求
7.3.2 搭建程序主框架
7.3.3 编写服务器端脚本
7.3.4 实现用户登录和显示用户列表
7.3.5 实现发送消息和显示聊天记录
7.4 本章小结
第8章 存储更给力——Html5 Web Storage
8.1 Html5 Web Storage 概述
8.1.1 Cookie本地存储
8.1.2 Web本地存储的发展
8.1.3 Html5 Web Storage本地存储的优势
8.1.4 Html5 Web Storage本地存储的不足
8.1.5 Html5 Web Storage本地存储的分类
8.1.4 Html5 Web Storage的浏览器支持情况
8.2 DOM Storage本地存储的使用
8.2.1 浏览器支持情况检测
8.2.2 Storage的属性和方法
8.2.3 DOM Storage的事件处理机制
8.2.4 JSON数据存储
8.3 DataBase Storage本地存储的使用
8.3.1 浏览器的支持情况检测
8.3.2 创建并打开本地数据库
8.3.3 Database接口的使用
8.3.4 本地数据库的基本操作
8.4 构建Html5 Web Storage的开发实例
8.4.1 分析开发需求
8.4.2 设计登录表单
8.4.3 存储表单数据
8.4.4 读取表单数据
8.5 本章小结
第9章 离线也疯狂——Html5 Web Offline
9.1 Html5 Web Offline概述
9.1.1 Google Gears离线应用
9.1.2 Html5 Web Offline和浏览器网页缓存
9.1.3 Html5 Web Offline的优点和缺点
9.1.4 Html5 Web Offline 的浏览器支持情况
9.2 Html5 Web Offline的使用
9.2.1 浏览器支持情况检测
9.2.2 配置Html5 Web Offline的服务器环境
9.2.3 Manifest缓存清单文件
9.2.3 applicationCache接口的状态常量和事件属性
9.2.4 applicationCache接口的方法
9.3 构建Html5 Web Offline的开发实例
9.3.1 分析开发需求
9.3.2 搭建程序主框架
9.3.3 编写Manifest缓存清单
9.3.4 设计Javascript脚本
9.4 本章小结
第10章 CSS3概述
10.1 CSS3发展历程
10.1.1 CSS的兴起
10.1.2 CSS Level 2.1的发布
10.1.3 CSS Level 3的诞生
10.2 CSS3的新特性
10.2.1 强大的选择器
10.2.2 专业的UI设计
10.2.3 简单的动画特效
10.2.4 高效的布局方式
10.2.5 智能媒体查询
10.3 浏览器对CSS3的支持
10.3.1 私有属性带来的困扰
10.3.2 主流浏览器对CSS3的支持情况
10.4 本章小结
第11章 选择器畅想CSS3 Selector
11.1 属性选择器
11.1.1 保留的属性选择器
11.1.2 新增的属性选择器
11.2 伪选择器
11.2.1 伪元素选择器
11.2.2 保留的伪类选择器
11.2.3 新增的结构性伪类选择器
11.2.4 新增的UI元素状态伪类选择器
11.3 本章小结
第12章 专业的视觉CSS3 UI
12.1 边框和轮廓UI设计
12.1.1 边框属性的使用
12.1.2 轮廓属性的使用
12.2 文本和内容UI设计
12.2.1 文本属性的使用
12.2.2 内容属性的使用
12.3 渐变和背景UI设计
12.3.1 渐变方法的使用
12.3.2 背景属性的使用
12.4 本章小结
第13章 唯美的排列 CSS3 Layout
13.1 多列自动布局方式
13.1.1 多列自动布局的浏览器支持情况
13.1.2 多列自动布局的使用
13.2 弹性盒布局方式
13.2.1 弹性盒布局的浏览器支持情况
13.2.2 弹性盒布局的使用
13.3 本章小结
第14章 强劲的动画 CSS3 Animation
14.1 变形动画设计
14.1.1 变形动画设计的浏览器支持情况
14.1.2 变形动画设计的使用
14.2 过渡动画设计
14.2.1 过渡动画设计的浏览器支持情况
14.2.2 过渡动画设计的使用
14.3 高级动画设计
14.3.1 高级动画设计的浏览器支持情况
14.3.2 高级动画设计的使用
14.4 本章小结 作者: didimm 时间: 2013-05-20 10:40
第 2章 旧貌换新颜——Html5 Web Form
本章我们来一起探讨Htmt5 Web Form。众所周知,Html表单自从问世以来,通过其在数据收集、数据组织、人机交互的优势,使得Web应用程序使整个Web领域提升到了一个新的层次。Html表单在整个Web领域中起着举足轻重的作用,小到个人网站的注册登录功能,大到大型企业的数据库管理系统,都可以看到Html 表单的身影。
如果说Html表单的问世丰富和活跃了Web领域,那么Html5 Web Form的实现就是使这项崭新的技术百尺竿头,更进一步。Html5 Web Form在保持了Html表单简便易用特性的同时,增加了许多内置的元素、控件和属性来满足用户的需求,大大简便了我们之前要实现的输入类型检查、错误提示、表单校验等功能的代码。
本章,我们主要讨论Html5 Web Form,首先会探讨Html5 Web Form的设计理念和各主流浏览器的支持情况,随后会讨论保留的和新加的表单元素、输入类型属性和输入类型控件,最后我们会以一个开发实例探讨Html5 Web Form在实际开发中的应用。 作者: didimm 时间: 2013-05-20 10:46
2.1 Html5 Web Form概述
Html5 Web Form是基于原有HTML表单的基础上,加入了一些特性元素和属性。使得开发人员更加方便,用户体验程度更高。本节,我们将重点探讨Html5 Web Form的设计理念、新颖之处和目前浏览器的支持情况。
2.1.1 Html5 Web Form的设计理念
在Web领域里探索了12年之久的超文本标记语言HTML,自从成为万维网的核心语言之后,精益求精,不断创新,终于发展到了第五次修订版本Html5。但是Html4的发布以后,就被一度被网页设计师和Web程序员称为最成功地标记格式语言。那么Html5在表单应用方面又有哪些创新的设计理念呢?
根据W3C(World Wide Web Consortium,万维网联盟)的解释,HTML5表单新特性的目的是在为用户提供更好的用户体验,为开发人员提供更简单的编程。从而我们总结Html5 Web Form是基于以下设计理念的。
• 代码简单。同样的表单代码Html5将比以前的Html代码更简单,因为在Html5 Web Form中去掉了以往的冗余代码。这对开发人员来说是非常重要的。
• 功能强大。在Html5 Web Form加入一些新元素新特性,在很大程度上改善了Html4中表单标签死板等问题,例如:在Html4或XHtml中,<input>,<button>,<select>,<textarea>等标签要放在<form>标签里面,而在Html5 Web Form中,却没有这样的限制,这些标签可以放在网页的任何位置,因为这些标签可以通过新增的form属性与相应的表单关联。
• 用户友好。Html5 Web Form的初衷是为用户提供了更好的Web服务体验。例如:使用Html5 Web Form的新特性可以为用户提供一些自动聚焦、输入信息提示和输入信息选择等功能。
• 兼容性好。基于目前的浏览器参差不齐,各大主流浏览器对Html5 Web Form的支持情况也不尽相同。但是Html4表单的标签和特性在Html5中是完全支持的,反过来,Html5 Web Form的新元素新特性在旧式浏览器也不会报错,所以读者现在就可以在自己的Web程序上大胆地使用Html Web Form技术。 作者: didimm 时间: 2013-05-20 10:47
相信大家都可能对Xform有一定的了解。事实上,Html5 Web Form从某种意义上来说只是Xform的冰山一角。Xform是下一代的HTML表单的标准,通过XML结构化数据格式定义、存储和传递表单数据,提供了比现在更加灵活或丰富的表单控件,而且使用了我们Web开发中流行的MVC(视图、控制器、模型)的设计模式,强制性地将用户数据和表单分离,使代码更加清晰、简单、方便,比现有的html表单更加规范,有更高的可用性。此外,XForm提供了丰富的表单样式和强大的事件处理模型,让开发者可以把大量的精力放在表单内容和数据的收集上,从而可以不用过多地关注表单的显示方式。但是这个作为W3C万维网研究了近十年的标准,至今还处于雏形阶段,主流浏览器在没有安装插件的条件下,都没有对其提供支持。而Html5 Web Form的一些功能和特性的设计理念在很大程度上就是来自于Xform。读者如果对Xform感兴趣,可以自行查看相关资料进行学习。
2.1.2 Html5 Web Form新在何处
Html5 Web Form是在Html4中改进而来的,万变不离其宗,所以它必然保留了一些现有html表单的功能和特性。当然,这些保留的功能和特性,对于我们来说是喜闻乐见的,因为我们不仅可以花更少的时间去熟悉Html5 Web Form 的使用,而且对Html5 Web Form的兼容性也有一定的保障。这些保留的功能和特性主要如下:
• 表单的容器还是<form>标签,我们可以在其中设置基本的提交特性。
• 我们之前的表单控件(如文本框、单选按钮、复选框)的使用方法不变。
• 用户向服务器提交表单的方式不变,GET和POST两种方式。
• 我们之前使用的脚本控制可以继续使用。
所以,Html5 Web Form标准的出现并不是什么质的变革。简单来说,Html5 Web Form只是在原来的基础上加入了一些新的控件类型,同时加入一些新元素和属性来解决开发人员以往代码冗余的问题,所以Html5 Web Form的旧貌换新颜主要体现在以下几个方面。 作者: didimm 时间: 2013-05-20 10:48
表单结构更加自由。前面我们已经讨论过,在Html4的表单实现中,如果我们不使用一定脚本控制,表单控件就必须被放置在<form></form>标签之中才能顺利的提交到服务器,也就是说,Html4规范中要求开发人员必须将要提交到同一服务器的数据集中到一个DOM块中,这在form元素和表单控件较多的情况下对设计以及实现带来一定程度的限制。例如在某个注册模块中,有一部分信息需要提交到服务器地址A,而另一部分则需要提交到服务器地址B,然而在展现上这些控件又是混在一块的。这一场景在HTML4中处理起来是比较麻烦的,但是在Html5 Web Form中却可以轻松处理,因为在Html5中,所有的表单控件都增加了一个新属性form,可以关联相应的表单id,表示该控件属于某个表单。通过这个属性则彻底突破了必须将控件写在<form></form>之中的限制。
表单提交更加灵活。在Html4中,一个表单的数据内容一般只能提交到一个服务器地址,这在一定程度上也阻碍了我们表单功能实现的限制。而Html5 Web Form也解决了这个问题,因为在Html5中,所有的表单控件都增加了一个新属性formaction,可以为每个表单控件设置要提交的服务器地址,这使得我们在设计网页时更加灵活,可以自由地选择要向服务器提交表单的数据。
用户体验更加友好。Html5 Web Form的初衷就是为了提供更好地用户体验,Html5中引入了一些新的属性,例如holderplace、datalist、list等,这些自动聚焦、提示列表和用户自由信息提示等功能,可以让Web程序更好地与用户实现交互。
输入类型更加丰富。Html5 Web Form规范中提供了一系列的输入类型,如邮箱、网址、邮政编码等等。与我们之前只有的文本text、password和submit相比,大大丰富了我们的输入类型,也使我们省略了一大堆冗余的表单脚本验证代码。
表单样式更加华丽。Html5 Web Form在以前只有文本框、单选钮和复选框等几个典型的输入样式的基础上,引入了时间选择器和数字选择器等更加丰富的表单数据内容表现形式,使我们可以在研究和实现用户内容和数据的收集上放更多的精力,从而不必太在意表单样式的表现。
此外,在Html5 Web Form规范中,虽然提供了很多元素和属性的使用方法,但是它并没有规定浏览器用何种方式来呈现给用户。Html5的这种以退为进,无为而大作的策略,显然有着长远的考虑。 作者: didimm 时间: 2013-05-20 10:52 本帖最后由 didimm 于 2013-05-20 10:53 编辑