HTML5前端开发培训教程.pptx

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;HTML5基础培训;HTML5基础培训;1. HTML5概述;HTML5时间表;2. HTML5的新特性;2. HTML5的新特性 – 语义;2. HTML5的新特性 – 多媒体;2. HTML5的新特性 – 三维、图形与特效;2. HTML5的新特性 – 离线存储;2. HTML5的新特性 – 离线存储;2. HTML5的新特性 – 设备通用性;2. HTML5的新特性 – 位置;3. HTML5的未来;HTML5表单 Day1;1. 新增input输入类型;浏览器支持;Email - 输入邮件地址的文本框;url-输入URL地址的文本框;number-输入数字的文本框;number-输入数字的文本框;range-通过滑动条改变一定范围内的数字;range-通过滑动条改变一定范围内的数字;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;date-选择日期(年、月、日、星期)的文本框;search-输入搜索关键字操作的文本框;search-输入搜索关键字操作的文本框;Color-颜色选择器;2. 新增input属性;autocomplete;autoconmplete;autofocus;required;placeholder;3. 新增form元素;datalist;datalist;keygen;output;4. 新增form属性;autocomplete;autocomplete;novalidate;课后作业;HTML5画布 Day2Day3;1. 认识HTML5 Canvas元素;创建canvas元素;操作canvas元素;操作canvas元素;理解坐标系统;2. 绘制简单图形;矩形;线条;线条;圆形和弧形;圆形和弧形;圆形和弧形;3. 绘制贝塞尔曲线;二次贝塞尔曲线;二次贝塞尔曲线;三次贝塞尔曲线;三次贝塞尔曲线;4. 图形变形;平移 - translate;平移 - translate;缩放 - scale;缩放 - scale;旋转 - rotate;旋转 - rotate;课后作业;5. 图形组合/剪切;图形组合;图形组合;图形剪切;6. 颜色样式选项;色彩 Colors;色彩 Colors;透明度 Transparency;透明度 Transparency;线型 Line styles;lineCap;lineJoin;lineWidth;渐变 Gradients;线性渐变;线性渐变;径向渐变;径向渐变;7. 绘制文字;绘制空心文字;绘制空心文字;绘制实心文字;绘制实心文字;7. 操作与使用图像;绘图;绘图;图像平铺;图像平铺;图像裁剪;像素处理;像素处理 – 获取像素颜色数组 ;像素处理 – 设置像素颜色;像素处理;HTML5音频与视频 Day2;1. 浏览器支持???况;音频的浏览器支持概况;视频的浏览器支持概况;2. HTML5音频;2. HTML5音频;3. HTML5视频;3. HTML5视频;Html5 客户端存储 Day4;1. 综述;1. 综述;2. Web存储（Web Storage）;localStorage;localStorage;sessionStorage ;sessionStorage;3. Web SQL Database;4.离线存储（Offline Storage）;离线存储的实现方式;Cache Manifest 基础;Manifest 文件;CACHE MANIFEST;NETWORK;FALLBACK;更新缓存;实例;关于应用程序缓存的注释;Geolocation地理位置;1. 位置信息概述;地理位置获取流程;HTML5地理地位的实现;2. 使用Geolocation API;定位用户的位置;定位用户的位置;处理错误和拒绝;处理错误和拒绝;地理位置选项对象;一个完整的例子;在地图中显示结果;Geolocation 对象 - 其他有趣的方法;;;