第一章 页面结构解析-HTML
1-1 浏览器介绍
  • 认识网页
  • 常见浏览器
  • 浏览器内核
  • web标准
1-2 HTML基本结构
  • HTML初识
  • HTML骨架
  • 我的第一个页面及其标签简介
  • 猪八戒版骨架记忆法
1-3 HTML常用标签
  • 什么是标签及其分类
  • 标签嵌套和并列关系
  • 简单小测验
  • 开发工具sublime
  • sublime生成html骨架
  • doctype文档类型
  • 字符集简介
  • 标签的语义化及其标题标签
  • 段落标签和水平线标签
  • 课堂案例-新闻页面
  • 换行和div span标签
  • 文本格式化标签
  • 标签属性
  • 图像标签
  • 链接标签
  • 锚点定位
  • base标签
  • 特殊字符
  • 注释标签
1-4 相对路径
  • 相对路径(一)
  • 相对路径(二)
1-5 列表
  • 无序列表的使用
  • 无序列表注意事项
  • 有序列表
  • 四大名著案例
  • 自定义列表
  • 第一天HTML总结
1-6 表单和表单控件
  • 表单的作用
  • 文本框和密码框
  • 单选按钮和复选按钮
  • 默认选中表单属性
  • input按钮组
  • 最多字符数和文本值
  • label标签
  • 文本域
  • 下拉菜单
  • 表单域
第二章 页面美容师-CSS/CSS3
2-1 CSS介绍
  • CSS产生的原因
  • CSS网页的美容师
  • 体会CSS样式
  • CSS样式规则
2-2 font字体
  • 字体样式字号和字体
  • 字体字号常用技巧
  • unicode字体
  • CSS注释
  • 字体加粗
  • 字体倾斜
  • 字体综合设定
2-3 CSS基本选择器
  • 调试工具chrome使用
  • 标签选择器
  • 体会类选择器
  • CSS命名规范
  • 谷歌课堂案例
  • 多类名选择器
  • ID选择器
  • id选择器和类选择器的区别
  • 通配符选择器
  • 链接伪类选择器的使用
  • 链接伪类的简写方式
2-4 CSS外观样式及应用
  • CSS颜色
  • 行高对齐和首行缩进
  • 字间距和单词间距
  • 颜色半透明
  • 文字阴影初识
  • sublime快捷方式
2-5 CSS样式表
  • 内部样式表
  • 行内样式表
  • 外部样式表
  • 三种样式表总结
2-6 标签显示模式
  • 块级标签显示模式
  • 行内标签显示模式
  • 行内块元素
  • 显示模式转换
2-7 CSS复合选择器
  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子元素选择器
  • 课堂练习-测试选择器
  • CSS书写规范
2-8 CSS背景及应用
  • 背景颜色图片及其平铺
  • 背景位置(一)
  • 背景位置(二)
  • 背景附着(固定)
  • 背景简写
  • 背景半透明
  • 背景缩放(一)
  • 背景缩放(二)
  • 多背景图片
2-9 CSS三大特性
  • CSS层叠性
  • CSS继承性
  • CSS优先级
  • 权重叠加
  • 继承的权重为0
  • css权重6道精华题
  • 优先级总结
2-10 CSS盒模型及应用
  • 看透网页布局本质
  • 认识盒子模型组成
  • 盒子边框
  • 边框综合写法(一)
  • 边框综合写法(二)
  • 圆角矩形
  • 盒子内边距
  • 外边距以及盒子居中对齐
  • 文字盒子居中图片和背景区别
  • 清除内外边距
  • 行内元素上下内外边距的问题
  • 外边距合并(一)
  • 外边距合并(二)
  • 盒子的计算尺寸
  • padding不影响盒子大小的情况
  • 盒子模型布局稳定性
2-11 浮动及应用
  • 文档流介绍
  • 浮动是用来做文字环绕效果的
  • 体会浮动
  • 浮动就是漂浮的意思
  • 浮动首先需要添加标准流父级
  • 浮动特性对齐父盒子
  • 浮动特性盒子排列
  • 浮动影响盒子显示模式
  • 浮动总结
2-12 清除浮动
  • 清除浮动的本质
  • 额外标签法
  • 父级添加overflow方法
2-13 CSS四种定位及应用
  • 为什么学习定位
  • 定位属性
  • 静态定位(1)
  • 相对定位
  • 绝对定位脱标
  • 父级没有定位
  • 父级有定位
  • 何为子绝父相
  • 定位练习-哈根达斯
  • 绝对定位水平垂直居中
  • 固定定位
  • 叠加次序
  • 定位总结
  • 固定绝对定位模式转换
第三章 JavaScript基础知识
3-1 JavaScript介绍
  • 网页、网站和应用程序
  • JavaScript的强大
  • JavaScript最初的目的
  • JavaScript现在的意义
  • JavaScript和HTML、CSS的区别,以及组成
  • JavaScript初体验
  • 计算机组成
3-2 JavaScript变量
  • 什么是变量
  • 变量的使用
  • 变量命名规则和规范
  • 交换两个变量
3-3 JavaScript数据类型
  • 数据类型-Number
  • String类型
  • Undefined和Null
  • typeof和注释
  • 转换成字符串类型
  • 转换成数值类型1
  • 转换成数值类型2
  • 转换成布尔类型
3-4 JavaScript操作符
  • 数学运算符
  • 一元运算符讲解
  • 逻辑运算符
  • 关系运算符
  • 赋值运算符和运算符的优先级
3-5 JavaScript流程控制及应用
  • 表达式和语句
  • 流程控制
  • 分支结构
  • 分支结构补充和作业
  • 三元运算符讲解
  • switch
  • 成绩转换案例
  • 布尔类型的隐式转换
  • while循环
  • while案例
  • dowhile
  • dowhile案例
  • for循环
  • 循环案例1
  • 打印正方形
  • 打印三角形
  • 打印99乘法表
  • break和continue
  • 调试
3-6 JavaScript数组及应用
  • 数组1
  • 数组2
  • 数组3
  • 求一组数的和和平均值
  • 求最大值和最小值-剪裁
  • 分隔符
  • 筛选数组
  • 翻转数组
3-7 JavaScript函数及应用
  • 为什么要有函数
  • 函数的参数
  • 函数的参数案例-剪裁
  • 函数的返回值
  • arguments
  • 函数案例1-剪裁
  • 函数案例2
  • 函数案例3
  • 函数案例4
  • 函数其它概念
  • 代码规范
  • 作用域
  • 作用域链
  • 预解析
  • 对象概念
3-8 JavaScript对象
  • 对象之字面量
  • 创建对象的方式
  • new关键字的执行过程
  • this
  • 遍历对象和删除对象的属性
第四章 页面动效实现-WebAPI
4-1 DOM介绍
  • WebAPI的概念
  • JavaScript组成
  • DOM相关概念
4-2 获取页面元素
  • 根据id获取元素-剪裁
  • getElementsByTagName1
  • getElementsByTagName2
  • 获取元素的其它方式
4-3 注册事件及应用
  • 注册事件
  • 点击按钮切换图片
  • 非表单元素的属性
  • 点击按钮div显示隐藏
  • 表单元素的属性
  • 给文本框赋值
  • 检测用户名和密码
4-4 样式操作及应用
  • 样式操作1
  • 样式操作2
  • 开关灯
  • 显示隐藏二维码案例
  • 高亮显示正在输入的文本框
  • 设置大小和位置
  • 隔行变色和高亮显示
4-5 BOM介绍及应用
  • BOM
  • 对话框
  • js中的加载讲解
  • setTimeout讲解
  • 删除提示讲解
  • setInterval讲解
第五章 项目实战-在线教育培训网站
5-1 项目实战导学
  • 项目实战-教育培训网站导学
5-2 网站顶部内容实现
  • 顶部内容实现导学
  • 项目环境搭建
  • 网站顶部结构实现
  • PxCook工具下载与使用
  • 顶部具体样式(上)
  • 顶部具体样式(下)
  • 总结
5-3 网站导航条内容实现
  • 导航条内容导学
  • 导航条结构实现
  • 导航条样式(1)
  • 导航条样式(2)
  • 导航条样式(3)
  • 总结
5-4 网站下拉菜单内容实现
  • 下拉菜单导学
  • 下拉菜单结构实现
  • 下拉菜单定位实现
  • 下拉菜单美化
  • 下拉菜单显示与隐藏
  • 总结
5-5 网站横向菜单内容实现
  • 横向菜单内容导学
  • 横向菜单结构实现
  • 横向菜单样式实现
  • 横向菜单显示与隐藏
  • 总结
5-6 网站轮播图实现
  • 轮播图-导学
  • 轮播图结构实现
  • 轮播图图片布局
  • 轮播图图片呈现顺序调整
  • 解决元素的层级关系
  • 在轮播图上添加箭头图标
  • 轮播图底部(横向)图标结构创建
  • 轮播图底部图标样式设定
  • 单击右侧箭头图标,实现轮播图切换
  • 实现轮播图循环播放
  • 底部图标切换
  • 单击左侧箭头图标,实现轮播图切换
  • 单击底部图标,完成轮播图切换
  • 轮播图自动播放效果实现
  • 总结
5-7 网站优势版块实现
  • 优势版块导学
  • 优势版块结构实现
  • 优势版块整体样式设计
  • 优势版块具体内容样式设定
  • 总结
5-8 网站问题项目版块实现
  • 问题项目版块导学
  • 问题项目版块标题区域结构设计
  • 问题项目版块标题区域样式设定
  • 问题项目版块具体内容结构
  • 问题项目版块具体内容版心区域样式
  • 问题项目版块具体内容样式设定
  • 问题项目版块'预约试听按钮'样式
  • 总结
5-9 网站课程中心版块实现
  • 培训课程中心版块实现导学
  • 培训课程中心版块标题区域实现
  • 培训课程中心版块课程内容结构
  • 培训课程中心版块版心样式设计
  • 培训课程中心版块版心文本样式设计(1)
  • 培训课程中心版块文本版心样式设计(2)
  • 培训课程中心版块'查看详情'样式
  • 总结
5-10 网站解决方案版块实现
  • 解决方案版块导学
  • 解决方案版块标题区域结构
  • 解决方案版块标题区域样式
  • 解决方案版块具体内容结构
  • 解决方案版块版心区域样式
  • 解决方案版块背景图像添加
  • 解决方案版块伪类样式
  • 解决方案文本样式
  • 总结
5-11 网站讲师团队版块实现
  • 讲师团队版块导学
  • 讲师团队标题区域实现
  • 讲师团队版块讲师列表结构
  • 讲师团队版块版心区域样式
  • 讲师团队版块第一位讲师样式效果
  • 讲师团队版块“查看详情”样式实现
  • 讲师团队版块讲师列表样式
  • 讲师团队版块讲师简介样式
  • 讲师团队版块‘查看更多’样式
  • 总结
5-12 网站课程合作案例版块实现
  • 合作案例版块导学
  • 合作案例整体结构实现
  • 总结
5-13 网站服务版块实现
  • 服务版块导学
  • 服务版块标题结构实现
  • 服务版块标题样式
  • 服务版本服务内容结构设计
  • 服务版块服务内容样式设计
  • 服务版块'我们的优势'内容样式设计
  • 服务版块’我们的优势‘文本样式
  • 总结
5-14 网站公司介绍版块实现
  • 公司介绍版块导学
  • 公司介绍版块结构实现
  • 公司介绍版块图片定位
  • 公司介绍版块图片样式
  • 公司介绍版块文本样式
  • 总结
5-15 网站在线报名版块实现
  • 在线报名版块导学
  • 在线报名版块表单创建
  • 在线报名版块版心样式
  • 在线报名版块表单样式
  • 在线报名版块文本样式
  • 在线报名表单校验
  • 总结
5-16 网站底部信息版块实现
  • 页面底部版块导学
  • 页面底部结构实现
  • 页面底部版块文本样式
  • 总结