| HTML5 概述 |
HTML的发展史
HTML5的版本
WHATWG and W3C 规范
HTML5的新特性
HTML5能做什么
HTML5能做什么对HTML5和CSS3的支持
检测浏览器对HTML 5的支持 |
HTML5 标签语言
|
HTML5页面结构
HTML5 DOCTYPE
根元素
字符编码
HTML5新增的语义元素
（1）<header>
（2）<nav>
（3）<article>
（4）<footer>
（5）<section>
（6）<aside>
其他新增的元素
（1）<time>
（2）<mark>
（3）<figure>和<figcaption>
（4）<progress>
（5）<meter>
（6）<details>和<summay>
验证HTML5页面及显示页面大纲
验证HTML5页面及显示页面大纲 |
| HTML5表单 |
HTML 4的困惑
HTML 5新增的输入组件
（1）email 邮件输入组件
（2）url 网址输入组件
（3）number 数字输入组件
（4）range 范围输入组件
（5）Date pickers (date, month, week, time, datetime,
datetime-local) 日期系列输入组件
（6）search 搜索输入组件
（7）color 颜色输入组件
（8）tel 电话输入组件
HTML 5新增的输入属性
（1） autocomplete
（2） autofocus
（3） form
（4） form overrides (formaction, formenctype,
formmethod, formnovalidate, formtarget)
（5） height 和 width
（6） list
（7） min, max 和 step
（8） multiple
（9） pattern
（10） placeholder
（11） required
测试浏览器对HTML5表单元素的支持
HTML5的表单验证
（1） 定制验证错误消息
（2） 定制验证显示方式
（3） 取消验证 |
HTML5 音频和视频播放
|
video元素及其属性
视频编解码器
视频转换工具
各种浏览器支持些什么格式
旧浏览器的过渡解决方案
视频与脚本--简单的视频播放器
音频 |
采用HTML5 Canvas绘制图形
|
<canvas>元素
检查浏览器的支持情况
基本图形绘制
（1） 画线
（2） 矩形
（3） 曲线
路径
变换
（1） 平移
（2） 缩放
（3） 旋转
渐变
（1） 线性渐变
（2） 径向渐变
绘制文本
绘制图像 |
使用HTML5 通讯APIs
|
跨文档消息通信
源安全
检测浏览器对postMessage的支持
XMLHttpRequest Level2
XMLHttpRequest Level2新增事件
检测浏览器对XMLHttpRequest2的支持
跨域访问注意事项 |
| HTML5 Web Sockets |
HTTP特点
如何实现实时（real-time）通讯
WebSocket特性
WebSocket与轮询方式的比较
Web Socket建立方法
WebSocket 的事件
WebSocket的属性
渐进增强和降级处理 |
| HTML5 Web Workers |
Web Workers介绍
Multi-core processor architecture
Web Worker communication
使用 Web Workers APIs
案例应用实践，练习指导 |
| 地理定位 |
地理定位介绍
在浏览器中使用地理定位
定位的技术背景
openstreetmap上显示当前位置
使用googlemaps追踪位置
案例应用实践，练习指导 |
| HTML5存储 |
为什么需要本地存储
本地存储的限制
Web存储的两种类型
判断浏览器是否支持WebStorage
存取信息
storage事件
Web SQL
IndexedDB |
| CSS3讲解 |
CSS3概述
半透明效果
CSS3属性选择器
边框样式
（1） border-radius：圆角边框
（2） border-image：图片边框
（3） box-shadow：为边框添加阴影
文本样式
（1） Text-shadow：文本阴影样式
（2） Text-overflow：文本溢出样式
背景色渐变
（1） Linear-gradient：线性渐变函数
（2） Radial-gradient：径向渐变函数
（3） 在线生成渐变效果
元素变形
（1） transform : rotate（旋转变形）
（2） transform：scale（缩放变形）
（3） transform：translate（位移变形）
（4） transform：skew（倾斜变形）
效果过渡
（1） transition-property ： 参与过渡效果的样式
（2） transition-duration： 过渡效果的持续时间
（3） transition-delay： 产生过渡效果前的等待时间
（4） transition-timing-function： 过渡效果控制 |
| jQuery Mobile |
jQuery Mobile设计的技术思考和商业思考
jQuery Mobile入门初体验；
使用页眉、工具栏和标签栏；
jQuery Mobile中的表单和按钮；
jQuery Mobile中的列表；
jQuery Mobile和CSS结合；
jQuery Mobile主题；
jQuery Mobile的API;
和服务器集成；
jQuery Mobile和HTML5开发框架PhoneGap结合 |
