卓象程序员 | 哈尔滨PHP | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

龙江地区WEB和PHP技术的推广者 联系我们15124584610

Web前端工程师高薪就业课程大纲

Web前端课程大纲

第一章:前端代码初识
1、前端开发环境及软件

熟悉前端开发基础知识及相关开发工具,理解什么是计算机语言,了解前端开发语言的种类及作用,初步接触HTML语言语法及HTML页面基本结构,初步了解CSS语言的语法及用法 熟练所有常用CSS声明属性,做到灵活运用。

2、前端需要哪些语言
3、页面基本结构
4、样式表的书写规则及出现的位置
5、常见样式汇总
第二章: 常用html标签及css基础
1、常用标签

熟练使用常用的HTML标签及其类型特性,常用选择器的应用, 理解选择器优先级的原理,熟练优先级的应用场景及日常开发注意事项, 知道常用开发的样式初始化作用及好处, 熟记标签的各种类型及其特性, 熟练用CSS转换标签之间的类型, 对比块及行内标签,理解行内块标签的特性及使用, 会用CSS重新定义鼠标形状, 熟悉通用的公司编码规范。

2、常用选择器
3、选择器优先级
4、标签类型
5、标签类型转换
6、鼠标图标形状设置
7、编码规范
第三章:页面布局之浮动
1、浮动的前世今生

理解什么是文档流, 了解什么是浮动, 熟悉浮动的基本语法及用法, 能解理并熟记浮动的特性, 理解什么是清除浮动, 了解清除的应用情况, 理解及熟练使用清除浮动的各种方式,特别是最后一种, 理解什么是块级格式化上下文,明白其作用,并熟练它的特性及触发条件。

2、浮动基本语法
3、浮动的特性
4、为什么需要清除浮动
5、清除浮动的几种方法
6、BFC (Block Formatting Context)模式
7、扩展-内容溢出显示方式:overflow: hidden | scroll | auto
第四章:页面布局之定位
1、 position:relative 相对定位

熟练使用相对定位、绝对定位,定位的移动规律,了解层级关系,会设置层级 会使用固定定位,及了解应用场景。

2、如何用定位移动标签
3、浮动的特性
4、position:absolute 绝对定位
5、z-index 定位层级
6、 position:fixed 固定定位
7、扩展- opacity 透明度
8、 扩展-多背景设置
9、扩展-linear-gradient 线性渐变
10、 扩展-radial-gradient 径向渐变
11、扩展-text-shadow 文字阴影
12、 扩展-box-shadow 盒子阴影
13、扩展-text-filter 滤镜
14、 扩展-border-radius 圆角设置
第五章:表格和表单及其相关样式
1、表格标签

熟悉表格HTML结构,会用CSS设置表格样式, 熟练代码层面的合并行列, 初步了解表单,熟记并熟练所有常用表单元素,使用常用属性, 熟练使用CSS3属性选择器,操作相应标签, 理解什么是伪类,并熟悉其应用场景。

2、表格边框样式重置
3、 colspan 属性规定单元格可横跨的列数
4、rowspan 属性规定单元格可横跨的行数
5、form 表单
6、input 表单元素
7、label标签 input元素定义标注
8、select/optgroup/option 下拉选框
9、textarea 文本域
10、表单元素属性
11、属性选择器
12、 表单相关伪类
第六章:结构选择器
1、E>E 找到元素下的第一层子元素

熟练并灵活使用各类型伪类选择器。

2、E+E 相邻元素选择器
3、E~E 同级元素选择器
4、E:nth-child(n) 表示E父元素中的第n个子节点
5、 E:nth-last-child(n) 表示E父元素中的第n个子节点,从后向前计算
6、E:nth-of-type(n) 表示E父元素中的第n个子节点,且类型为E
7、 E:nth-last-of-type(n)表示E父元素中的第n个子节点,且类型为E,从后向前计算
8、E:first-child 表示E元素中的第一个子节点
9、E:last-child 表示E元素中的最后一个子节点
10、E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
11、E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
12、 E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
13、E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
第七章:PC 端整站开发
1、 css sprites 技巧

拥有整站页面开发能力,及常见开发经验技巧。

2、项目文件目录规划与管理
3、页面标签分析
4、难点解析:电商类网站导航结构分析 - 视频类网站列表细节处理
第八章:CSS 预处理语言-LESS
1、什么是CSS预处理语言-LESS

了解什么是CSS预处理语言,熟练less的语法及常用操作,能自主写出实用的less代码。

2、LESS编译
3、LESS常用语法
第九章:移动端开发(响应式开发)
1、移动端测试环境搭建

本课程主要讲解数据库,以MySQL为例,讲解了数据库的相关技术,让同学们快速掌握数据库的应用。

2、物理分辨率和显示分辨率的关系
3、 什么是 window.devicePixelRatio 像素比
4、如何清除IOS下按钮的圆角
5、如何消除移动端链接和按钮的阴影
6、移动端rem布局
7、box-sizing 怪异盒模型的灵活使用
8、弹性盒模型在移动端的优势
第十章:CSS框架Bootstrap
1、媒体查询Media Queries

了解移动开发与PC开发的区别,理解移动端的特点。会测试移动项目。 熟练应用适合移动端开的CSS3声明特性。

2、什么是 ootstrap
3、Bootstrap的特性
4、Bootstrap工程环境
5、Bootstrap设计思想
6、Bootstrap页面的基本结构
7、栅格系统
8、栅格系统响应式工具
第十一章:git、github及SVN的使用
1、使用版本控制工具的好处

熟练各种类型的版本控制工具操作,以适应不同公司的不同需求

2、什么是git
3、分布式的版本控制工具
4、SVN介绍
5、集成式的版本控制工具
6、拉取服务器代码-updata
7、提交代码-commit
第十二章:JavaScript入门
1、javascript是用来做什么的

了解javascript语言是什么,及它的能力,掌握编程的基本语法,理解什么是事件,什么是函数,及函数的好处及作用

2、js的引入方式
3、js获取页面标签的能力
4、什么是事件Event
5、变量是什么及存在意义
6、变量命名规范
7、初识函数function
8、html属性操作的第一种方法
9、什么是字符串
10、html属性操作的第二种方式
11、初识if判断
12、新的获取元素的方法-querySelector
13、获取一组元素操作
14、初识for循环
15、运算符之算术运算符
16、函数中的this关键字
17、基本选项卡思路讲解
第十三章:数据类型和流程控制
1、数据类型划分

理解并熟记数据类型、熟练使用typeof运算符,并熟悉返回类型的区别、熟练掌握数据类型相互转换的方法,及特殊类型(如NaN)的特点、熟练使用算术运算符,并了解在运算中的一些隐式操作、熟练使用赋值运算符、详尽理解分支结构,熟练使用各种分支结构的代码、详尽理解循环结构,及熟练使用各种循环结构

2、typeof运算符
3、强制数据类型转换
4、算术运算符
5、赋值运算符
6、比较关系运算符
7、逻辑运算符
8、三目运算符(三元运算符)
9、运算符优先级
10、流程结构之判断:if、switch
11、流程结构之循环及其四个组成:初始值,判断条件,自增,执行语句
12、循环的打断与跳出:break、continue
第十四章:function函数详解
1、function 函数

深入学习理解函数的相关语法及作用,理解形参及实参概念,熟练应用,理解并使用return函数返回值 ,知道其常用见应用场景,养成定义的函数的思维,理解闭包,及会使用常用见闭包操作,理解递归思想,会简单写出递归逻辑代码。

2、带参的函数
3、 arguments不定参的函数
4、函数返回值-return
5、什么是计算后的样式值
6、函数封装的基本思维
7、预解析机制
8、作用域
9、作用域链
10、什么是闭包
11、匿名函数表达式
12、什么是递归
第十五章:字符串和数组方法
1、string.length 字符串中包含的字符个数

熟练使用字符及数组的相关方法,熟练操作字符串及数组

2、string.charAt(index) 根据传入的下标值,返回字符串中对应位的字符
3、 string.charCodeAt(index) 根据传入的下标值,返回字符串中对应位字符的Unicode编码
4、 string.indexOf("str") 返回指定字符串在整段字符串中首次出现的位置
5、string.lastIndexOf("str") 返回指定字符串在整段字符串中最后一次出现的位置
6、string.slice(start,end) 返回从已有字符串的start抽去到end位形成的新字符串
7、string.split(separator) 根据分割符,把字符串分割成数组
8、string.substring(start,end) 返回从已有字符串的start抽去到end位形成的新字符串
9、string.toLowerCase() 返回,全部转换成小写字母的新字符串
10、string.toUpperCase() 返回,全部转换成大写字母的新字符串
11、string.trim() 返回,去掉首尾空格的新字符串
12、模板字符串
13、arr.length数组中存储的数据个数
14、arr.push(data) 向数组的末尾添加一到多条数据,返回数组的新长度
15、arr.unshift(data)向数组的头部添加一到多条数据,返回数组的新长度
16、arr.pop() 删除数组的最后一位,返回删除掉的数据
17、arr.sort() 对数组中的数据进行排序
18、arr.pop() 删除数组的最后一位,返回删除掉的数据
19、arr.concat(arr2) 连接两个或多个数组,返回连接后的新数组
20、arr.reverse() 对数组进行翻转
21、arr.join(separator) 用分隔符把数组中的数据,连成字符串,返回连接后的字符串
22、 arr.splice() 从数组中添加/删除项目,然后返回被删除的项目
23、arr.forEach() 循环调用数组的每一位
24、arr.map() 循环修改数组的每一位,返回修改后的新数组
25、arr.filter() 对数组中的数据进行筛选,返回筛选后的新数组
第十六章:对象
1、创建对象

理解对象,熟练创建对象及其语法格式,熟练使用各种内置对象

2、利用对象来存储数据(JSON)
3、in 操作符 通过in操作符可以判断对象中是否含有某个对象
4、for-in语句
5、JSON(JavaScript Object Notation)
6、Math 对象下的属性和方法
7、Date对象主要用于获取或设置时间,用法 new Date()
8、日期获取相关参数
9、日期设置相关参数
第十七章:BOM对象模型
1、什么是 BOM (browser object model)

理解什么是BOM,并能熟练BOM的各种操作

2、window 对象及共其属性和方法
3、 location 对象的属性和方法
4、 navigator的作用
5、获取屏幕相关参数 - screen
6、操作历史对象 - history
第十八章:事件基础
1、什么是事件

理解什么是事件,熟悉事件绑定操作,并简单理解事件冒泡原理,理解什么是事件对象,并熟悉不同事件对象所能获取的信息,会用事件对象处理冒泡及默认行为。理解什么是事件委托及事件委托的好处。

2、事件监听器 el.addEventListener("event",func,事件流)
3、 取消事件监听 el.removeEventListener("event",func,事件流)
4、 事件流-事件冒泡过程
5、事件对象
6、常用事件汇总
第十九章:事件应用
1、拖拽的原理分析

理解各常用事件应用特效的原理,做到常见功能的自我分析能力,并实拥有实现代码能力。

2、碰撞检测
3、自定义滚动条
第二十章:移动端事件
1、touch事件

熟练应用移动这端的各类型事件,并对移动端事件所带来的一些问题,能动手解决。熟悉IOS与android端的细微兼容差别

2、touchEvent
3、orientationchange 事件,监听手机横竖屏切换
4、devicemotion 事件,监听手机加速度发生变化
5、deviceorientation 事件, 监听手机旋转角度发生变化
第二十一章:定时器和动画帧
1、setInterval(执行函数,间隔时间) 间隔型定时器

了解interval计时器运行原理 了解timeout计时器运行原理, 学会计时器的管理思路, , 了解requestAnimateFrame与settimeout的优劣。

2、setTimeout(执行函数,延迟时间) 延迟型定时器
3、定时器管理
4、es6新增 requestAnimateFrame(function) 动画帧
5、停止动画帧CancelAnimationFrame(动画帧编号)
第二十二章:CSS3动画及2D,3D变换
1、transform 变换

熟悉各种变换的特性,能熟练的让CSS3变换,动画,过渡特性与配合使用。

2、transition 过渡
3、与 animation 动画
第二十三章:Nodejs及相关
1、node环境搭建

熟悉node环境在不同平台中的搭建 熟悉node相关的知识点, 了解node开发相关框架, 熟练express的安装 , 熟悉express基本操作, 理解路由概念,并会基本的路由使用, 了解node模板引擎种类,安装并使用swig模板引擎, 理解数据库的概念,了解常用数据库种类及它们之间的特点, 简单使用数据库。

2、Linux基本操作命令
3、node模块使用
4、commonJS规范
5、node内置模块
6、第三方模块
7、npm - node package manager 第三方模块包管理
8、nodejs-web开发框架介绍
9、express的安装
10、express项目初始化
11、Routing的使用
12、swig模板引擎
13、非关系型数据库MongoDB
第二十四章:服务器通信之AJAX
1、ajax介绍

理解什么是ajax,及ajax的应用场景 充分理解ajax的原理,并熟练如何创建使用ajax, 熟悉ajax请求类型,及响应头相关信息的知识点, 了解ajax库的种类,并熟练使用jq及axios 库的ajax操作, 熟练ajax上传操作, 理解什么是跨域操作, 熟练用各种方案解决跨域请求问题, 理解cookie及其应用场景, 熟练cookie的操作, 理解H5新增本地存储与cookie的区别所在,并熟练localStorage操作。

2、如何创建及使用ajax技术
3、ajax涉及的知识点
4、jquery库的ajax使用
5、利用ajax上传资源
6、ajax跨域产生和解决方案
7、cookie介绍
8、各类操作cookie
9、本地存储localStorage介绍
10、localStorage基本操作
第二十五章:DOM对象
1、什么是DOM(文档对象模型)

熟悉dom操作的相关属性及方法,并能灵活使用创建去常见的文档操作

2、DOM树,DOM根据文档结构描绘出的一个层次化的节点树。
3、DOM节点的查找,创建,删除,属性等相关操作
第二十七章:正则表达式
1、什么是正则表达式

初步了解正则是什么,表理解其存在意义 熟记创建正则的方式, 理解正则表达式的组成单元, 精通正则表达式的语法及操作,达到数据基本筛选能力。

2、创建正则表达式
3、规则表达式组成
4、正则表达式的修饰符
5、正则的方法
6、字符串的方法
7、元字符
8、边界符
9、数量词
10、分组
11、字符集合
12、正则中的两种模式
第二十八章:面向对象(OOP)
1、为什么要面向对象编程

初始理解什么是面向对象编程,对比面向过程编程,它的优势在哪, 理解创建对象的几种形式,及优缺点, 熟练构造函数,以及它与对象之间的联系,熟悉操作构造函数的相关方法,及应用场景。

2、创建对象
3、构造函数模式
4、prototype(原型)模式
5、继承
6、ECMAScript 2015中的 class 使用
第二十九章:js库-jQuery3
1、 JQuery介绍

了解JS库的作用及好处,知道JQ库的特点及优势 了解JQ整个框架结构原理及一些思想,提高编写库的思想, 熟练JQ各种选择器使用,熟悉JQ常用的API方法, 对比JS,学习JQ对DOM/及BOM操作的方法及思想,熟练使用所有操作方法。

2、JQuery整体架构
3、JQuery选择器、常用API
4、DOM/BOM操作
5、JQuery事件系统
6、JQuery动画
7、编写和使用JQuery插件
8、JQuery 万年历插件
9、JQuery对象框插件
10、JQuery表单验证插件
第三十章:ECMAScript6
1、ECMAScript6介绍

了解什么是ECMASCRIPT,熟悉ECMASCRIPT6新增的语法特性,并做到熟练使用。

2、新的声明变量的方式
3、解构赋值
4、函数的扩展
5、箭头函数
6、操作数组方法的扩展
7、操作字符串的扩展
8、对象的扩展和简写
第三十一章:框架开发之React+redux
1、什么是React.js

了解react.js是什么 体验react.js带来的好处, 熟练常用的React操作,并写出成型的项目代码。

2、React.js 作用
3、React开发环境准备
4、 React中的组件
5、JSX语法
6、拆分组件与组件之间的传值
7、React developer tools 安装及使用
8、PropTypes 与 DefaultProps 的应用
9、props,state 与 render 函数的关系
10、深入了解React虚拟DOM
11、React的生命周期函数及使用场景
12、React 中实现 CSS 动画效果
13、Redux 概念简述和工作流程
14、使用Redux-thunk 中间件实现ajax数据请求
15、Redux-saga 中间件使用
16、React-redux 中间件使用
第三十二章:框架开发之vue 2.0
1、什么是Vue.js

了解什么是VUE,VUE特点及优势, 熟悉VUE的运行原理,熟练VUE的开发插件。独立写出成型的项目代码。

2、Vue的优势
3、 Vue的两大特点
4、前端组件化
5、单文件组件
6、组件间传值
7、Vue实例生命周期
8、 Vue的模版语法
9、计算属性,方法与侦听器
10、计算属性的 getter 和 setter
11、Vue中的样式绑定
12、Vue中的条件渲染
13、Vue中的列表渲染
14、Vue中的set方法
15、父子组件间的数据传递
16、 组件参数校验与非 props 特性
17、给组件绑定原生事件
18、非父子组件间的传值
19、 在Vue中使用插槽
20、作用域插槽
21、动态组件与 v-once 指令
22、Vue动画
23、vuex集中式应用状态管理器
24、什么时候需要用到vuex
25、axios 后端通信