你造身为一个前端开发狮你要掌握神马知识嘛

Web前端开发需要掌握许多知识。需要用到模块化开发、多屏兼容、MVC，各种复杂的交互与优化，甚至要用到Node.js来协助前端开发。这就需要前端开发狮需要熟悉各种技术。今天小编就以千锋的html5为例，来说明一下前端开发狮需要掌握什么。

第一阶段：前端页面重构

1）PC端网站布局项目

1.前端开发环境介绍（DreamWeaver、 Notepad++、HBuilder)

2.HTML基础，CSS基础，CSS核心属性

3.CSS样式层叠，继承，盒模型

4.容器，溢出及元素类型

5.浏览器兼容与宽高自适应

6.定位，锚点与透明

7.图片整合

8.表格，CSS属性与滤镜

9.CSS优化

2）HTML5+CSS3基础项目

1.HTML5新增的元素与属性

2.表单域增强元素

3.CSS3选择器

4.文字字体相关样式

5.CSS3位移与变形处理

6.CSS3 2D转换与过度动画

7.CSS3 3D转换与关键帧动画

8.弹性盒模型

9.媒体查询

10.响应式设计

3）WebApp页面布局项目

1.移动端页面设计规范

2.移动端切图

3.文字流式/控件弹性/图片等比例/特殊设计的100%布局

4.等比缩放布局

5.viewport/meta

6.rem/vw的使用

7.flexbox详解

8移动 web特别样式处理（reset, 1px border, 高清图片）

第二阶段：JavaScript高级程序设计

1）原生 JavaScript交互功能开发

1.基本语法

2.循环语句

3.函数与数组

4.String与 Date

5.BOM与 DOM

6.事件

7.拖拽效果

8.cookie存储

9.正则表达式

10.Ajax

11.面向对象基础

12.运动与游戏开发

2）面向对象进阶与 ES5/ES6应用项目

1.Promise/A+

2.设计模式（观察者模式等）

3.原型链

4.构造函数

5.执行上下文栈与执行上下文

6.变量对象与活动对象

7.作用域链

8.闭包

9.this

10.ES5

11.ES6

3）JavaScript工具库自主研发项目

1.DOM库

2.事件库

3.AJAX库

4.原型和继承库

第三阶段：PC端全栈项目开发

1）jQuery经典交互特效开发

1.HTTP(s)协议详解

2.Ajax进阶、跨域与 Defered

3.PHP基础

4.MySQL基础

5.Apache与 Nginx 环境搭建与配置

6.接口的定义

7.Mock数据

8.Restful

9.前后端联调

10.前端安全(XSS,CSRF,JSON注入)

2）HTTP协议、Ajax进阶与PHP/JAVA开发项目

1.Gulp

2.Webpack

3.NPM

4.Git/SVN

5.CommonJS

6.AMD

7.CMD

8.ES6模块化

3）前端工程化与模块化应用

1.大首页、列表页与详情页

2.展示与交互特效

3.搜索

4.登录与注册

5.购物车

4）PC端网站开发项目

1.基础知识（ng-app,Modules,

2.Controller,$apply,$watch）

3.指令(ng-repeat,ng-class,ng-show,ng-hide)

4.过滤器(date,limitTo,filter)

5.表单(NgModelController，表单验证)

6.服务（自定义服务，Angular提供的服务：$log,$timeout,$q,$http）

7.其他（Controller as 语法，安全的依赖注入方法）

8.directive（指令，组件）

9.ng-router

10.标准项目结构设计

5）PC端管理信息系统前端开发项目

1.jQueryUI 与 jQuery EasyUI

2.Bootstrap框架(ACE)

3.Highcharts/Echarts

4.ArtTemplate

5.velocity

6.smarty

7.云平台系统前端

第四阶段：移动端项目开发

1）Touch端项目

1. Canvas 基础知识

2. 绘制矩形、圆弧、线段、曲线、渐变与图像

3. Canvas 图表绘制案例

4.localStorage、sessionStorage 与离线缓存

5.animate.css

6.Yo/Mui

7.touch.js

8.zepto.js

9.swiper

10.iScroll

2）场景项目

1.WeUI

2.Swiper animate 在微信场景项目中的使用

3.常见的页面布局

4.常见的交互与动画

5.实战项目

3）应用 Angular+Ionic开发 WebApp项目

1.Vue.js基础

2.模块化

3.单文件组件

4.路由

5.与服务器通信

6.状态管理

7.单元测试

8.生产发布

4）应用 Vue.js开发 WebApp项目

1.css components

2.ionic基于 angularJS扩展的交互指令介绍

3.blank模板的安装

4.头部与尾部

5.内容区域

6.列表

7.区域滚动

8.下拉刷新与上拉加载

9.页签导航

10.背景层与旋转 SVG图标

11.loading 效果

12.actionsheet 效果

13.弹出窗口

14.弹出浮动层

15.底部满屏滑动窗口

16.ionic 自带的 swiper滑动

17.基于 swiper组件的 swiper滑动

18.页面导航切换

19.侧边栏菜单

5）应用 React.js开发 WebApp项目

1.ReactJS基础

2.JSX语法

3.组件

4.flux架构

5.配置模块化开发环境

6.动画效果

7.数据双向绑定

第五阶段：混合（Hybrid,ReactNative）开发

1）小程序开发

1.小程序简介及从技术上和产品上的分析

2.构建第一个应用：创建项目、创建小程序实例与创建页面

3.框架、组件、API及工具详解

4.小程序项目开发

2）React Native

1.React Native介绍

2.BS架构程序介绍

3.原生组件

4.异步执行与加载

5.触摸事件处理

6.弹性盒(Flexbox)和样式

7.兼容通用标准和扩展性

8.React Native项目开发

3）各类混合应用开发

1.Cordova/Phone gap

2.嵌入客户端(iOS、Android)

3.微信服务号接口(JSSDK)开发

4.HTML5+

第六阶段：NodeJS全栈开发

WebApp后端系统开发

一、NodeJS基础与NodeJS核心模块

1.NodeJS介绍

2.NodeJS环境搭建与入门

3.ES6在 NodeJS中的应用

4.CommonJS模块

5.fs与 path模块

6.stream

7.socket.io

8.http模块 API

9.URL模块

10.数据的本地存储

二、Express

1.express api

2.express 中间件

3.ejs/jade

三、noSQL数据库

1.mongodb 与 mongoose

2.框架中间件

3.项目实战导入