| WEB前端课纲 |
| Level 1 | Level 2 | Level 4 | 知识点清单 |
| 网站布局基础 | PhotoShop基础 | Adobe公司介绍，版本编号，发展历史，安装过程 |
| 移动工具介绍与操作 |
| 选区工具介绍与操作 |
| 套索工具，磁性套索，框选工具，魔棒工具，快速选择工具介绍与操作 |
| 图层介绍，图层合并 |
| 切片工会介绍与操作 |
| 图片格式，精灵图，图片保存方式 |
| HTML标签及规范 | HTML定义，HTML历史，HTML版本、常用浏览器介绍、HTML整体结构、标签结构、注释 |
| 块级标签介绍，div，h1，h2，h3，h4，h5，h6，p，ul，li，ol，dl，dt，dd，hr |
| 行内标签介绍，span，a，img，b，strong，i，em，br |
| 什么是W3C标准，DOCTYPE ，语言编码，嵌套规则，HTML手册查询 |
| HTML标签属性 | class，id，style，title |
| 属性（align，bgcolor，border，cellpadding，cellspacing，frame，rules，summary，width）tr，td，th，tbody，thead，tbody，表格嵌套 |
| 属性（action，method，name），input标签（type，name，id，value)，button，textarea,select |
| 属性（align，frameborder，height，name，scrolling，src，width）,iframe嵌套 |
| CSS基础 | CSS介绍，CSS发展历史 |
| CSS的三种引用方式，CSS基本语法、属性、值、CSS手册查询 |
| CSS选择器（id、class、标签、属性、后代、伪类等），CSS优先级 |
| font、font-size、font-family、font-weight、font-style |
| color，line-height，letter-spacing，text-align，text-decoration，text-indent，text-shadow，white-space，word-spacing |
| background，background-color，background-position，background-size，background-repeat，background-origin，background-image |
| list-style |
| CSS浮动布局&盒模型 | width、height、padding、border、margin |
| 标准模式是什么、怪异模式是什么 |
| float，清除浮动常用的三种方法，clear，overflow |
| CSS定位布局 | 定位概述position，相对定位，绝对定位，浮动，left\right\top\bottom，z-index |
| 双飞翼布局，圣杯布局，侧边栏固定 |
| 什么是BFC、什么是IFC |
| 什么是CSS hack，hack解决的问题及应用情景，浏览器识别字符标准对应表 |
| 项目实战 | 纽曼官网项目实战 |
|
|
|
|
|
|
| HTML5网站开发 | HTML5新特性 | 发展历程（设计目的），特性（语义特性，本地存储特性，设备兼容性，网页多媒体特性），规范，优缺点，移除元素 |
常用标签（header、footer、main、section、nav、article、aside、figure）
多媒体标签(video、audio、embed、canvas) |
表单标签（email、url、number、color、range、date、search）
datalist，progress |
form属性（autocomplete，novalidate） input 属性（autocomplete，autofocus，form，
min，max，step，multiple，pattern (regexp)，placeholder，required） |
| CSS3新特性学习 | 通用选择器、属性选择器、伪类选择器 |
| text-shadow，word-wrap，word-break，text-wrap，text-overflow |
| border-radius，box-shadow，border-image |
| background-size，background-origin |
| RGBA，HSL，HSLA |
| 线性渐变，径向渐变 |
| box-sizing |
| CSS3基础属性--动画 | 过渡属性transition，transition-property，transition-duration，transition-timing-function，transition-delay |
| trasform，translate，rotate，scale，skew，matrix |
| perspective，trasform-style，rotateX，rotateY，rotateZ |
| CSS3 动画属性，@keyframes，animation，animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode |
| CSS3基础属性--布局 | display: -webkit-box，box-orient，box-direction，box-pack，box-align，box-flex，box-ordinal-group，box-flex-group，box-lines |
| display: flex，flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-self，flex，order，flex-grow，flex-shrink，flex-basis |
| 媒体查询@media、自适应布局、rem布局 |
| @font-face、iconfont的使用 |
| 项目实战 | 纽曼官网移动端项目实战 |
|
|
|
|
|
|
| 网站动效交互开发 | Javascript基础 | JavaScript介绍、变量命名规则，变量声明 |
| number，string，boolean，Array，object |
| 算术运算符，关系运算符，逻辑运算符 |
| if，for |
| 函数定义语句，参数，返回值 |
| jQuery基础 | jQuery介绍、特点、优势、文件下载、引入方式 |
| id，class，标签，属性 |
| 属性类，css类，html\text\value |
| DOM节点插入、删除、修改、复制 |
| jQuery动画以及事件 | 常用鼠标事件、键盘事件、页面加载事件，事件绑定方式 |
| animate动画方法、show/hide、fade、slide动画实现、时间控制 |
| 项目实战 | 用户交互实战一 |
|
|
| 用户交互实战二 |
|
|
| 响应式网站开发 | Bootstrap | Boostratp介绍、Boostratp文件的下载、引入方式、注意事项 |
| 表单组件、表格组件、导航组件、分页组件、按钮组件 |
| 字体图标的引入、字体图片的使用方式 |
| 栅格系统介绍、使用规则 |
| JavaScript插件、快速布局工具 |
| Bootstrap响应式案例实现 |
|
|
|
|
第二阶段
（逻辑交互） | 用户交互开发 （逻辑业务开发思想） | Javascript基础语法 | JS发展历史，定义，版本 |
| 标识符的命名，命名规范，保留字，关键字 |
| 变量的定义，字面量的使用 |
| 转义字符是什么，空格，大于，小于，版权等转义字符 |
| 算术运算符，赋值运算符，逻辑运算符，条件运算符，位运算符，三目运算符 |
| 字符串（String），数字(Number)，布尔(Boolean)，数组(Array)，对象(Object)，空（Null），未定义（Undefined） |
| Javascript流程控制 | if，switch |
| for，for..in，while，do…while |
| break，continue |
| Javascript函数 | 函数常见的定义方式、函数的作用 |
| 函数的调用方式 |
| 函数参数设置 |
| return |
| 匿名函数的定义 |
| 变量提升，全局作用域，局部作用域，闭包 |
| 递归函数的定义与使用，算法实现 |
| Array对象方法 | 对象的介绍，对象的定义方式，常见对象介绍 |
| 数组的介绍，数组的定义方式 |
| 一维数组，二维数组，对象数组 |
| concat()，join()，pop()，push()，reverse()，shift()，slice()，sort()，splice()，toSource()，toString()，toLocaleString()，unshift()，valueOf() |
【增】：arr.push()，arr.unshift()
【删】：arr.pop()，arr.shift()
【改】：arr.reverse()，arr.sort()，arr.concat()，arr.join()，arr.slice()，arr.splice()，arr.toString()
【查】：arr.indexOf() |
| String，Number，Date对象方法与定时器 | anchor()，big()，blink()，bold()，charAt()，charCodeAt()，concat()，indexOf()，italics()，link()，match()，replace()，slice()，small()，split()，sub()，substr()，substring()，sup()，toLocaleLowerCase()，toLocaleUpperCase()，toLowerCase()，toUpperCase() |
| toString，toLocaleString，toFixed，valueOf |
| Date()，getDate()，getDay()，getMonth()，getFullYear()，getHours()，getMinutes()，getSeconds()，getMilliseconds()，getTime()，setDate()，setMonth()，setFullYear()，setHours()，setMinutes()，setSeconds()，setMilliseconds()，setTime()，toLocaleString()，toLocaleTimeString()，toLocaleDateString() |
| setInterval()，clearInterval()，setTimeout()，clearTimeout() |
| Math对象方法，正则表达式 | abs(x)，ceil(x)，floor(x)，round(x)，max(x,y)，min(x,y)，pow(x,y)，sqrt(x)，random()，sin(x)，cos(x)，tan(x) |
| 正则表达式介绍、定义、元字符、限定符、定位符 |
| compile，exec，test，match |
| DOM 节点的获取以及增删改 | DOM介绍、DOM树 |
| 通过 id ，标签名，类名找到 HTML 元素 |
| 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 |
| DOM 属性操作 | document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName，document.querySelector |
| Elements ，Sources，Console，Network |
| BOM 操作 | BOM介绍 |
| window对象介绍 |
| Location 对象包含有关当前 URL 的信息。 |
| Screen 对象包含有关客户端显示屏幕的信息。 |
| Navigator 对象包含有关浏览器的信息。 |
| History 对象包含用户（在浏览器窗口中）访问过的 URL。 |
| frames 属性返回窗口中所有命名的框架。 |
| Javascript基础事件以及Event对象 | onabort，onblur，onchange，onclick，ondblclick，onerror，onfocus，onkeydown，onkeypress，onkeyup，onload，onmousedown，onmousemove，onmouseout，onmouseover，onmouseup，onreset，onresize，onselect，onsubmit，onunload |
| attachEvent，detachEvent，addEventListener，removeEventListener |
| 事件自定义方式 |
| scrollHeight，scrollLeft，scrollTop，scrollWidth，offsetHeight，offsetLeft，offsetTop，event.clientX，event.clientY，event.offsetX，event.offsetY， |
| event，鼠标坐标获取，键盘值获取 |
| Javascript优化(事件委托，懒加载，预加载)与浏览器调错 | 捕获阶段、处于事件阶段、冒泡阶段 |
| 事件处理程序说明 |
| 事件委托原理 |
| 懒加载是什么，预加载是什么 |
| 案例实战 |
|
|
|
| HTML5 API | video/audio的Javascript API属性、方法，事件 |
| touchstart、touchend、touchmove，devicemotion、deviceorientation |
| 拖放（Drag 和 drop），定位获取 |
| HTML5 Canvas | canvas 元素用于在网页上绘制图形。 |
| getContext 上下文、beginPath()，closePath()，lineTo()、moveTo()，rect()，arc()，fill()，stroke()，fillRect()，strokeRect()，clearRect() |
| jQuery基础补充 | 基本筛选器、子元素、表单、可见性 |
| 对象访问、数据缓存、对象筛选查找 |
| 内部插入、外部插入、包裹、替换 |
| 动画队列控制、delay、stop、finish |
| 事件委托介绍、绑定方式 |
| each、trim、param |
| JQuery高级技能 | 插件封装方式、封装技巧 |
| swiper.js |
| 介绍、优缺点、移动端zepto方法、组件介绍 |
| 商城网站项目 |
|
|
|
|
|
| 动态数据交互与存储 | json/xml ，cookie，本地存储与离线存储 |
|
|
|
|
| AJAX交互原理（原生，JQ） | HTTP协议，它规定了在网络中发布，传输和接收html页面的方法。大家都遵循这个协议，就能实现信息的传输。
|
| AJAX介绍、GET、POST |
| XMLHttpRequest声明、兼容处理、数据获取操作 |
| ajax的属性介绍、数据调用 |
| axios.create()，get/post方法，属性控制 |
| 面向对象开发思想 | 面向对象编程 | 基本模式的定义、优缺点 |
| 工厂模式定义、优缺点 |
| 构造模式定义、优缺点 |
| 原型链、原型模式定义、优缺点 |
| 混合模式定义 |
| 面向对象编程应用 | 原型（prototype）实现继承、构造函数实现继承、call , apply实现继承 |
| 对象封装作用、封装的方式 |
| 浅克隆、深克隆 |
| 原型链介绍、原型链应用 |
| this的指向说明 |
| 面向对象实际应用 |
|
|
第三阶段
（前后端交互） | Node.js | Node.js：基础模块 |
|
|
|
|
|
|
|
|
| Node.js：基础模块 |
|
|
|
|
|
|
| Node.js：express |
|
|
|
|
|
| Node.js：mongodb |
|
|
|
|
|
| 自动化工具 |
|
|
| 项目实战 | 项目版本管理工具 | git介绍、远程仓库介绍、暂存区介绍、指令配置、初始化指令、仓库添加指令、项目拉取、提交、推送指令、版本控制指令 |
| github介绍、注册、项目创建、权限配置 |
| SVN的安装、版本管理操作 |
| 移动端商城项目实战 |
|
|
| 移动端商城项目实战 |
|
|
| ECMAScript 6高级语法 | ES6基础指令一 | babel介绍、安装与检查、转换配置、运行指令 |
| let变量声明、新增特性、块级作用域 |
| const常量声明、本质区别 |
| 解构介绍、数组解构、对象解构、字符串解构、函数参数的解构 |
字符的 Unicode 表示法、codePointAt()、String.fromCodePoint()
字符串的遍历器接口、at()、normalize()、includes(), startsWith(), endsWith()、repeat()、padStart()，padEnd()、matchAll()、模板字符串 |
| ES6基础指令二 | 扩展运算符、Array.from()、Array.of()、copyWithin()、find() 和 findIndex()、fill()、entries()，keys() 和 values()、includes()、数组的空位 |
| 函数参数的默认值、rest 参数、严格模式、箭头函数、双冒号运算符 |
| 属性的简洁表示法、属性名表达式、方法的 name 属性、Object.is()、super 关键字、对象的扩展运算符 |
| ES6基础指令三 | constructor 方法、类的实例对象、Class 表达式、不存在变量提升、私有方法和私有属性、this 的指向、name 属性、Class 的取值函数（getter）和存值函数（setter）、Class 的 Generator 方法、Class 的静态方法、Class 的静态属性和实例属性 |
| export 命令、import 命令、模块的整体加载、export default 命令 |
| ES6基础指令四 | Promise 的含义、then()、catch()、finally()、all()、race()、resolve()、reject() |
| 基本用法、async 函数的实现原理、与其他异步处理方法的比较 |
| 介绍、作为属性名的 Symbol、属性名的遍历、Symbol.for()，Symbol.keyFor()、内置的 Symbol 值 |
| 微信开发 | 微信公众号 |
|
|
|
| 微信小程序快速入门 | 小程序账号注册、开发工具安装、界面操作、项目搭建、项目配置 |
| 微信小程序界面交互 | WXML、WXSS、组件使用、静态页面搭建 |
| 微信小程序接口调用 | 小程序API介绍、网络、界面、设备、媒体、文件、数据缓存等接口调用 |
| 项目实战 | 微信小程序案例 |
|
|
第四阶段
（框架开发） | Vue.js开发 | Vue.js 基础指令 | Vue.js介绍、发展历史、特点、文件下载、Vue实例 |
| 插值方式、指令参数、修饰符、代码缩写 |
| 文本、原始HTML、特性、Javascript表达式 |
| 样式绑定、条件渲染、列表渲染、事件绑定 |
| Vue.js 基础方法 | 方法介绍、定义方式 |
| 计算属性介绍、定义、比较计算属性和methods方法 |
| 过滤器介绍、使用方式、自定义过滤器 |
| 事件监听、事件处理方式、事件修饰符、按键修饰符 |
| 表单数据绑定、表单修饰符、双向数据绑定 |
| Vue.js组件开发一 | 组件介绍、组件定义方式、组件引用 |
|
| 父子组件数据传输、多级组件数据传输 |
|
| Vue.js组件开发二 | 生命周期介绍、应用 |
| slot插槽的定义与使用 |
|
| Vue.js组件开发三 | 动态组件介绍、注册动态组件 |
| Vue动画定义方式、CSS动画设置、自定义动画效果 |
| 数据变化追踪、异步更新队列 |
| Vue.js插件 | Vue-cli介绍、安装与检查、Vue项目搭建流程 |
| Vue-router介绍、路由、路由守卫 |
| axios.create()，get/post方法，属性控制 |
| Vue.js高级语法 | Vuex介绍、状态state、项目配置 |
|
| 项目实战 | WEB APP项目实战 |
|
|
|
|
| React 开发 | React | React介绍、历史发展、安装方式、环境配置 |
| JSX基础语法、JS表达式使用、样式、注释 |
| React组件开发、复合组件 |
| React语法 | 事件注册、绑定this |
| ReactDOM介绍以及使用、render DOM渲染 |
| 表单事件绑定、表单值获取、state修改 |
| React环境搭建 | 环境介绍、整体搭建、项目部署 |
| 集成router、路由嵌套、路由参数 |
| React数据交互 | Fetch介绍、get封装、post封装、JSX调用 |
| React跨域处理，header处理 |
| React的promise应用 |
| 项目实战 | React案例实战分析 |
|
|
|
| 拓展学习：react+native | react+native环境搭建及介绍 | React Native介绍 |
| 软件安装，环境配置，环境测试 |
| 服务器搭建，项目搭建 |
| Angular介绍 | Angular框架、MVC思想 |
| 数据可视化介绍 | echart.js介绍、基础使用 |
| D3.js介绍、基础使用 |
| 3D动画框架介绍 | Three.js介绍、基础使用 |
| tween.js介绍、基础使用 |
| 产品经理职责介绍 | 产品经理职责介绍 |
| 架构师职责介绍 | 架构师职责介绍 |
学员点评