web前端开发技术

徐照兴 夏贤铃 杨志文 刘鼐 李教文

目录

  • 1 课程介绍
    • 1.1 通往高级前端工程师的学习路线
    • 1.2 课程目标与课程内容简介
  • 2 网页开发工具及网页基本结构的认识
    • 2.1 什么是网页、开发工具选择及基本操作
    • 2.2 ⽹⻚主要三对标签及<!DOCTYPE>标签作用
    • 2.3 head内部标签元素详细介绍
    • 2.4 网页的分“层”含义及各层的注释写法
  • 3 网页结构层HTML常见标签的使用
    • 3.1 构造页面的html常见标签元素（一）
    • 3.2 构造页面的html常见标签元素（二）
    • 3.3 构造页面的html常见标签元素（三）
    • 3.4 构造页面的html常见标签元素（四）——input标签
    • 3.5 构造页面的html常见标签元素（五）
    • 3.6 Html页面常见标签元素——表格（table）
    • 3.7 Html页面常见标签元素——表单
    • 3.8 ⾏内元素、块级元素和⾏内块级元素的区别
  • 4 网页表现层CSS基础与使用
    • 4.1 CSS是什么？
    • 4.2 CSS样式的三种写法
    • 4.3 颜色与背景
    • 4.4 字体
    • 4.5 文本
    • 4.6 链接
    • 4.7 元素的分类与标识（class和id）
    • 4.8 组织元素（span和div）
    • 4.9 盒状模型
    • 4.10 外边距和内边距
    • 4.11 边框
    • 4.12 高度和宽度
    • 4.13 浮动元素（float）
    • 4.14 元素的定位
    • 4.15 用z-index进行层次堆叠
    • 4.16 css选择器的优先级
    • 4.17 CSS应用举例——导航条设计
    • 4.18 CSS应用举例——常见两栏、三栏自适应布局
    • 4.19 常⻅⽔平居中垂直居中实现⽅式
  • 5 HTML+CSS静态页面项目实战（移动端项目）
    • 5.1 项目首页框架分析
    • 5.2 头部设计与实现
    • 5.3 分类导航等设计与实现
    • 5.4 中间部分设计与实现1
    • 5.5 中间部分设计与实现2——宝贝展示
    • 5.6 底部导航的设计与实现
  • 6 Html5新特性与新标签使用
    • 6.1 什么是Html5，html4与html5有什么区别
    • 6.2 HTML5常⽤的语义和结构化元素
    • 6.3 H5图形绘画标签canvas的使用
    • 6.4 使用canvas绘制矩形和圆
    • 6.5 canvas绘制图像等其他属性、方法应用
    • 6.6 H5⽮量图形SVG使用
    • 6.7 H5媒体播放常⽤标签
    • 6.8 H5新增的input输入类型
    • 6.9 H5常⽤的表单属性
    • 6.10 H5 Web的本地储存及会话存储
  • 7 CSS3新特性及其应用
    • 7.1 CSS3新增属性选择器
    • 7.2 CSS3新增结构伪类选择器（上）
    • 7.3 CSS3新增结构伪类选择器（下）
    • 7.4 CSS3新增UI伪类选择器（上）
    • 7.5 CSS3新增UI伪类选择器（下）
    • 7.6 CSS3的重新大小、轮廓和圆角属性
    • 7.7 CSS3的盒子阴影属性
    • 7.8 CSS3背景新特性
    • 7.9 CSS3⽂本效果及特殊字体引⼊
    • 7.10 CSS3的多列布局
    • 7.11 多种尺寸设备兼容必备知识
    • 7.12 CSS3的2D转换动画效果
    • 7.13 CSS3的3D转换动画效果
    • 7.14 CSS3过渡实⽤技巧
    • 7.15 CSS3动画实⽤技巧
  • 8 CSS3的flex弹性布局使用
    • 8.1 flex弹性布局基本概念
    • 8.2 flex布局容器六⼤属性之flex-direction
    • 8.3 flex布局容器六⼤属性之flex-wrap和flex-flow
    • 8.4 flex布局容器六⼤属性之justify-content
    • 8.5 flex布局容器六⼤属性之align-items
    • 8.6 flex布局容器六⼤属性之align-content
    • 8.7 flex布局项目六⼤属性之order和flex-grow
    • 8.8 flex布局项目六⼤属性之flex-shrink
    • 8.9 flex布局项目六⼤属性之flex-basis和flex
    • 8.10 flex布局项目六⼤属性之align-self
  • 9 HTML5+CSS3综合项目实战（仿美团首页）
    • 9.1 实例运行效果及实例框架分析
    • 9.2 头部header设计与实现（滚动时上面固定部分）
    • 9.3 主要main中banner设计与实现
    • 9.4 主要main中导航菜单设计与实现
    • 9.5 如何引入第三方字体图标
    • 9.6 主要main中【附近拼团】设计与实现
    • 9.7 主要main中【猜你喜欢】设计与实现html代码
    • 9.8 主要main中【猜你喜欢】设计与实现CSS代码
    • 9.9 底部footer设计与实现
    • 9.10 课程总结和实现⽔平垂直居中的方法总结
  • 10 网页行为层JavaScript的基础知识
    • 10.1 认识Javascript
    • 10.2 编写第⼀个JS脚本
    • 10.3 如何获取标签元素并进⾏操作
    • 10.4 js代码编写的位置
    • 10.5 JS输出及调试⽅式
    • 10.6 何为JS事件及常⻅的事件
    • 10.7 动⼿操作DIV的任意样式
    • 10.8 JS常用的数据类型
    • 10.9 JS的变量意义及命名规则
    • 10.10 JavaScript 算术运算符与赋值运算符
    • 10.11 数据类型之间的转换
    • 10.12 如何创建复杂数据类型（数组和对象）
  • 11 JavaScript函数、作用域及流程控制
    • 11.1 函数的意义及其定义与调⽤
    • 11.2 变量、函数及常量的命名规范
    • 11.3 带参函数写法与调用
    • 11.4 函数传参为不定参时arguments关键字应用
    • 11.5 变量作⽤域与闭包
    • 11.6 函数的返回值
    • 11.7 JS分支语句if及三目运算
    • 11.8 JS分支语句switch case
    • 11.9 JS循环结构for
    • 11.10 JS循环结构while
    • 11.11 流程控制中的break、continue
    • 11.12 JS条件判断真假情况举例
    • 11.13 JS逻辑运算符
  • 12 Json、数组操作及定时器应用
    • 12.1 JSON是什么
    • 12.2 JSON的序列化和反序列化
    • 12.3 JSON对象的增删改查及JSON数组遍历操作
    • 12.4 数组元素的删除及添加操作
    • 12.5 数组的合并、转字符串、字符串分割及翻转操作
    • 12.6 数组的排序、切片、查找
    • 12.7 延时性与间隔性定时器的应用
    • 12.8 如何清除定时器
    • 12.9 定时器应用举例——通过延时定时器实现弹窗
    • 12.10 定时器应用举例——通过间隔性定时器实现滚动展示图⽚
  • 13 DOM与BOM操作
    • 13.1 什么是DOM
    • 13.2 获取DOM子节点、父节点及判断节点类型
    • 13.3 获取DOM第一个、最后一个子节点及兄弟节点
    • 13.4 改变元素属性操作的三种⽅式
    • 13.5 如何创建、插⼊和删除DOM节点
    • 13.6 要多次改变dom节点如何操作可减少页面渲染dom次数
    • 13.7 如何快速获取表格dom元素
    • 13.8 BOM基础介绍
    • 13.9 BOM常⽤属性和系统对话框
    • 13.10 BOM常⽤事件应用
  • 14 JavaScript的动画实现和事件应用
    • 14.1 JS的动画初步认识
    • 14.2 多物体动画
    • 14.3 针对多个物体每个物体改变不同样式的动画
    • 14.4 针对同一个对象按顺序改变不同的属性（链式动画）
    • 14.5 针对同一个对象同时改变多个样式的动画
    • 14.6 事件对象event和事件冒泡
    • 14.7 事件绑定、事件解绑及事件捕获
    • 14.8 键盘事件
    • 14.9 默认⾏为及阻⽌默认⾏为
用z-index进行层次堆叠