|
阶段
|
主讲内容
|
技术要点
|
|
第1阶段
|
认识HTML
|
1.认识html单双标签 2.超链接 3.img标签
|
|
盒子模型
|
1.Css样式盒模型 2.内边距 3.边框 4.外边距
|
|
CSS样式
|
id选择器 2.class选择器 3.无序列表与有序列表 4.定义列表 5.图片路径,图片
|
|
样式初始化
|
样式初始化 2.元素类型 3.元素转换间隙问题4.垂直外边距合并问题
|
|
选择器，命名规则，背景样式
|
1.初级选择器 2.HTML命名规则 3.背景图片平铺,位置 4.背景图片大小,关联
|
|
字体及文本样式
|
1.字体样式 2.文本样式 3.特殊字符介绍
|
|
选择器高级
|
1.选择器 2.属性选择器 3.伪类选择器 4.伪元素选择器 5.hover扩展
|
|
选择器优先级
|
1.选择器优先级 2.继承 3.样式优先级 4.圆角 5.阴影 6.超出隐藏
|
|
浮动属性
|
浮动 2.清除浮动 3.浮动和inline-block,最小宽度和大宽度
|
|
定位position
|
1.相对定位 2.绝对定位 3.父相子绝 4.层级
|
|
第二阶段
|
初识javascript
|
1.js类型 消息框 注释 2.变量 3.1获取特殊标签 3.2选择器获取标签 4.[]的运用
5.innerHTML、 innerText、textContent
|
|
sublim及markdown使用
|
安装 下载 package control（插件管理器）安装插件Sublime配置马克飞象
|
|
函数、自定义属性、事件
|
1.动态方法 2.onload方法 3.获取title、head、body标签 4.变量与属性的区别
5.函数创建 6.事件 7.this关键字
|
|
操作元素属性 CSS样式 []的使用
|
1.样式操作 2.属性节点 3.数组
|
|
javascript数据类型 、判断条件语句
|
1.六大数据类型 2.判断 3.if条件判断语句 4.三目运算符 5.switch条件判断
|
|
循环
|
1.for循环 2.变量自增自减 3.while循环 4.do while循环 5.打印三角形
|
|
运算符、类型转换
|
1.算数运算符 2.显示类型转换 3.赋值运算 4.逻辑运算符
|
|
函数[自执行] [传参]
|
1.函数自执行 2.函数传参 3.函数中的return 4.getComputedStyle()方法
|
|
作用域，js域解析
|
全局域，局部域 2.作用域链 3.js解析、预解析4.闭包
|
|
字符串方法和数组
|
字符串方法 2.可用于正则的字符串方法 3.数组 sort排序 4.数组方法 5.EC5数组遍历方法
|
|
Json、function[all apply bind]
|
json 增 删 改 查 2.json遍历 3.仿jquery链式操作
4.JSON.parse()、JSON.stringify()方法 5.Function call
apply bind
|
|
定时器、Math函数
|
1.设置定时器 2.清除定时器 3.定时器函数中的this 4.Math函数 5.案例随机颜色值 6.
Math 三角函数
|
|
日期对象Date
|
1.获取时间 2.系统时间 3.设置具体时间 4.毫秒方法 5.案例世界时间
|
|
运动
|
requestAnimationFrame()方法
2.requestAnimationFrame兼容写法速度版运动框架时间版运动框架时间加速版完善版运动框架类jquery运动框架无缝滚动无缝滚动+左右点击按钮
|
|
DOM文档对象模型
|
childNodes、chidren
2.firstChild、previousSibling、nextSiblingprarent父级、lastChild、lastElementChild、
offsetParent节点操作
|
|
CSSOM视图模式(CSS Object Model View)
|
1.innerWidth clientWidth offsetWidth
scrollWidth
2.offsetParent offsetLeft offsetTop
3.getBoundingClientRect()方法
|
|
BOM及本地服务器搭建
|
1.搭建本地服务器 2.location 地址栏信息 3.navigator 4.open close
5.window常用事件
|
|
事件
|
1.event对象 2.事件冒泡 阻止冒泡 3.事件绑定 4.事件绑定 注销封装 5.阻止默认事件
6.div拖拽 7.图片 文字拖拽问题 8.滚轮事件 9.注册事件及注销事件的完整封装
10.监听事件的阻止默认 11.表单事件 12.事件委托 13.onready 14.键盘事件
|
|
正则RegExp
|
1.可用正则的方法 2.正则直接量方式 3.元字符 4.量词5.分组
|
|
Cookie
|
cookie设置 cookie过期时间 cookie删除
2.cookie封装cookie getCookie removeCookie封装
|
|
第三阶段
|
HTML5介绍
|
1.HTML 5的语法 2.HTML 5结构标签 3.其他标签 4.新增的js属性
|
|
HTML 5新的属性以及选择器
|
1.HTML 5的标签 2.HTML选择器
|
|
CSS3背景属性
|
1.新增的背景属性 2.线性渐变
|
|
圆角以及文本属性
|
1.border-radius 2.文字的属性
|
|
过度与动画
|
1.transition 2.动画 3.阿里图标的使用
|
|
阴影与盒子模型
|
1.正规的投影 2.不规则投影以及filter 3.flex的计算
3.flex-wrap以及flex-direction 4.父级的其他属性
5.子元素的属性以及其他的属性
|
|
智能表单
|
1.表单的新类型 2.表单属性
|
|
Transform与3D变换
|
1.2d变换 2.3d变换 3.立方体例子
|
|
响应式布局
|
1.微软头部样式 2.banner与头部
|
|
Canvas
|
1.canvas的基础以及绘制线条 2.canvas曲线 3.canvas颜色以及线型
4.canvas渐变 5.canvas文字 6.canvas图片 7.变形以及动画
8.canvas绘制时钟 9.canvas刮刮卡效果 10.canvas粒子 11.长尾效果
|
|
SVG
|
1.SVG的基本命令 2. Stroke 3.渐变与填充 4.text文本 5.SVG坐标系统
6.symbol，use元素 7.JS创建SVG标签 8.SVG动画介绍 9.SVG动画
10.SVG的动画属性 11.snap
|
