|
第一阶段 HTML5/CSS3核心课程
HTML5/CSS3新特性
文档头和编码声明语义化标签，HTML5标签的兼容处理，HTML5标签SEO 新的元素选择器，HTML5中的选择器 本地存储，安全性、容量、和cookie区别 HTML5表单新特性，新的input类型，placeholder的使用和兼容，表单自动校验 FileReader和文件拖拽 geoLocation canvas，功能和操作，图表、游戏和动画 WebGL，全3D网页浏览 video、audio 离线应用，Manifest文件编写 桌面提醒 webSocket，优点，和Ajax的区别 webWorker，用途和优点 webSql CSS3新特性，文本溢出，分栏模式，背景，圆角，阴影，渐变，transform，CSS3动画，rgba等 HTML5的应用范围 CSS3基础
css3与css2的区别，CSS3的兼容性，浏览器前缀，不需要前缀的样式实例：CSS3旋转 JS设置CSS3样式，setStyle3()的封装，IE前缀的问题 实例：CSS3运动框架基础 transition基本使用，transition的参数，不同运动形式的区别 transition运用范围，transition和JS平滑结合，transition的问题 实例：纯CSS3滑动二级菜单 实例：淡入淡出幻灯片 border-radius的使用，圆角的单位，圆角大小的测量（PS中），圆角的各种参数 实例：圆角图片框 rgba的使用，rgba和opacity的区别，rgba的应用，rgba和渐变 实例：半透明遮罩文字的新写法 text-shadow的用法，各种参数，配合rgba的另类用途 实例：文字模糊效果 box-shadow的用法，内投影和外投影，扩展阴影 实例：CSS3按钮 实例：CSS3模拟PS的外发光效果 实例：文本框模糊效果 线性渐变的使用，最简形式，渐变方向的控制，多点渐变和rgba的结合 实例：CSS3进度条的绘制 圆形渐变的使用，中心点位置，形状和大小 实例：CSS3彩虹圈 CSS3变形和应用
transform的作用，旋转、缩放、位移、倾斜的使用，transform与内联元素实例：各种变形的使用和组合 rotate的使用，deg，origin的使用，origin的各种写法，角度的换算 实例：CSS3时钟 scale的使用，等比缩放和拉伸，翻转和变形，scale和改变宽高的区别，CSS3属性和盒模型尺寸，scale的其他写法 实例：CSS3图片放大 实例：官网登录框淡入淡出 skew的使用，PS中的倾斜，倾斜模拟旋转 translate的使用，translate和left、top的区别 实例：CSS3倾斜导航条 多transform组合使用，顺序的问题 CSS3 3D变换，3D旋转，perspective的使用 实例：3D旋转和2D旋转的比较 实例：safari历史记录效果（官网作品展示） 3D变换的坐标系，旋转方向的分辨，perspective的两种用法 backface-visibility的使用和问题 实例：记忆力大考验游戏 实例：官网登录、注册框 backface-visibility的bug，translate另类解决方法 transform-style的使用，3D空间的继承 实例：翻书效果 实例：鼠标、键盘控制的3D盒子 实例：图片拆分、翻转 实例：3D图片环 CSS3动画
纯CSS动画animate，关键帧，格式和编写animate的调用，时间单位和重用 animate的可选属性，运动类型、延迟、重复、重置 animate和JS的配合 实例：旋转的风车 animate和transition的比较 动画结束的检测，Mozilla的问题和解决 自定义链式动画库 JS运动和CSS3动画 实例：3D幻灯片 圆角的精确控制 CSS3多背景和背景尺寸控制 渐变高级应用，控制点、重复背景、渐变与背景结合 实例：CSS3+JS实现的图片倒影 实例：光线划过效果 本地存储
本地存储和cookie的区别，localStorage和sessionStorage的区别localStorage的支持情况，兼容性检测 添加、删除数据，删除数据 localStorage使用的注意事项 实例：基于localStorage的待办事项 localStorage的方法和属性，setItem、getItem 清空localStorage，遍历localStorage的方法 实例：基于localStorage的记事本 localStorage的事件，onstorage的兼容性写法，事件对象的各种属性：key、oldValue、newValue、url/uri Json对象的方法，stringify、parse，parse和eval的区别 调试工具的使用 窗口间通信 实例：所有页面保持同步的列表 实例：同步拖拽 地理信息
geolocation的用法，地理信息的定位精度，测试geolocation的方法兼容性和兼容检测，getCurrentPosition()的使用 返回结果的作用：accuracy、latitude和longitude、altitude和altitudeAccuracy 、heading和speed 实例：配合百度地图显示当前位置 获取失败的处理，message、code，授权和常见错误 可选参数，高精度模式，超时处理 监听地理位置变化 HTML5特性、表单
contenteditable的作用实例：基于ajax的简易excel 自定义数据的使用，兼容性，自定义数据配合JS，优点、缺点 HTML5表单特性，placeholder的使用，autocomplete和autofocus 新的input类型，控制手机输入法 实例：JS处理placeholder兼容问题 HTML5表单验证，required属性的使用，pattern属性的使用 实例：纯HTML5表单验证 下拉选择框，search和datalist novalidate属性、multiple属性 JS配合HTML5表单校验，checkValidity()方法的使用 打造自己的播放器：Video、Audio应用
video、audio基础，支持和兼容性基本形式，src属性，不支持的文字提示 可选参数：controls、autoplay、loop 文件格式支持，source标签的使用 实例：原生视频播放 各浏览器下的工具样式 实例：编写自己的播放器 play()方法、pause()方法，stop方法的模拟，currentTime属性的使用 实例：播放、暂停和停止 duration属性，durationchange事件，DOM3事件注意事项 实例：显示和控制当前播放进度 timeupdate事件，onend事件 实例：播放结束弹出“相关推荐”弹出层 progress事件，buffer对象，end()方法 实例：显示视频加载进度 muted属性，volume属性 实例：控制播放音量 canplay、canplaythrough事件的使用，loadeddata事件 error和emptied事件的区别，加载错误处理 实例：数据缓冲和错误提醒 canPlayType()的使用 实例：打开外部文件并播放 实例：用localStorage和json持久化，完成播放列表和播放进度记录 canvas实例：绘图板
实例：绘图板铅笔工具实例：绘图板矩形工具 实例：绘图板橡皮擦工具 drawImage()方法绘制图片，drawImage()方法的三种形式 实例：绘图板的拖拽上传图片 createPattern()方法创建平铺图案 实例：自定义填充 toDataURL()方法导出canvas图像 实例：绘图板“保存”功能的实现 实例：post将图片上传到服务器 canvas实例：游戏
drawImage()方法的高级应用，用精灵图实现人物行走功能实例：行走的小人 封装ZImg对象，物体的定位、碰撞检测 canvas中的事件检测，绘制线程 实例：可以拖拽的canvas图片 实例：canvas飞机游戏 canvas实例：图表
实例：绘制柱状图实例：绘制折线图 实例：绘制饼图 实例：绘制3D柱状图 封装canvas操作库
ZObject类，基本属性：位置、父级、子级，方法：appendChild()、removeChild()、draw()、ev()、pointIn()，事件：mousedown/mouseup/click/mousemove/mouseover/mouseout实例：编写并通过继承扩展ZObject类 ZRect类、ZImg类，图片裁切，设置各种样式 实例：用ZRect类重写canvas时钟 实例：用ZImg做的超级玛丽吃豆子小游戏 ZCanvas类，封装原始canvas，构造自己的document对象 实例：植物大战僵尸canvas版 桌面通知、离线应用
桌面通知基础，webkitNotifications对象的使用createNotification()方法的参数，设定通知图标，设置标题和内容 用checkPermission()检查用户授权，requestPermission()请求权限 实例：弹出桌面通知 show()、close()方法的使用 实例：通知的延时自动关闭 通知的各种事件：ondisplay、onclick、onclose、onerror 实例：点击通知后定位到指定消息 实例：google日历的弹出提醒功能 弹出HTML通知 离线应用基础，缓存离线资源，在线状态检测，本地数据存储和同步 实例：自动通知用户在线状态 manifest文件的编写，manifest文件的引入，NETWORK段、CACHE段、FALLBACK段的使用 manifest文件实例 实例：可离线使用的记事本 缓存更新的两种方法和策略，applicationCache对象的使用 UPDATEREADY状态，update()方法 navigator.onLine属性的检测 online、offline事件的使用 实例：服务器、本地缓存同步 webWorker和webSql
WebWorker基本使用，多线程的概念创建worker，onmessage事件 通过data获取线程消息 实例：用webWorker计算菲波那切数列，与主线程分离 postMessage()方法传递数据 onerror事件 terminate()/close()方法终止线程运行 实例：用worker与服务器通信 子线程中的this webWorker的问题 webSql基本使用 数据库的基本使用：CREATE语句、SELECT语句、INSERT语句、DELETE语句、UPDATE语句 openDatabase()方法打开数据库 transaction()方法进行事务处理，事务处理的原子性 事务上下文的使用 实例：创建数据库，并创建数据表 executeSql()方法执行Sql语句 result的属性和方法 实例：插入数据、获取数据 实例：记账管理系统 webSocket
webGL基础
webGL效果演示webGL的基本组成：场景、渲染器、光源、摄像机、物体 场景：创建、添加 渲染器：SVG、canvas、webGL三种渲染器的使用和区别 光源：平行光、点光源、环境光的区别和使用，制定光源的颜色、强度、照射距离 摄像机：矩形摄像机、景深摄像机的区别，摄像机的远点、近点、宽高比等属性的设置 物体的形状和材质，简单的立方体，朗伯材质的特点和使用，制定物体颜色、光特性，mesh的使用 实例：第一个全3D网页程序 render()方法和渲染参数 物体的位置、旋转、缩放属性的设置 实例：键盘控制的3D方块 循环渲染，requestAnimationFrame()的原理和使用 实例：鼠标控制摄像机移动 高品质渲染和抗锯齿选项 线框渲染 物体投影，光源投影 实例：碰撞墙壁反弹的小球 webGL应用
系统自带标准几何形状：平面、立方体、球体、圆台、八面体、托雷斯体实例：各种几何形状的使用 add()方法给物体添加子对象 平面体的使用 materials数组，为各个面单独指定材质 faces数组，引用各个材质面 实例：构建复杂的3D模型 摆动的钟 导入外部模型文件 骨骼的控制 让外部模型动起来 实例：会行走的机器人 实例：3D赛车游戏 webGL实例：3D网页游戏
|
|
|
