卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!
卓象程序员让每一位学员高薪就业 联系我们13101507057
第一章:前端代码初识
|
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 后端通信 |