web前端开发需要掌握的几个必备技术

接下来由小编简单的列举出几个前端开发中必须要学会的知识：

第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树 *** 作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、d出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM *** 作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocityjs框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、d性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zeptojs、手机聚划算页面、手机滚屏。

第三阶段：

>

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、>

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XML>

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angularjs、Backbonejs、Knockout/Ember。

常用库：

Reactjs、Vuejs、Zeptojs。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Nodejs全栈开发：

快速入门：

Nodejs发展、生态圈、Iojs、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径 *** 作，序列化和反序列化、文件流 *** 作、>

Web开发基础：

>

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

web前端作为互联网相关的重要岗位，许多互联网大厂（如阿里腾讯等）在招聘时会作出要求。学好web前端对于将来掌握前端后端开发、成为全栈架构师的学习很有帮助。

想学习web前端需要掌握的内容也是不少的，对于自学的同学来说会有一些难度，不推荐自学能力差的人。我们在学习的时候需要分阶段进行，做到有计划的学习与训练，具体的学习顺序如下：

web前端学习顺序：

①计算机基础以及PS基础

②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）

③移动开发

④前端高级开发（ECMAScript6、Veujs框架开发、webpack、前端页面优化、React框架开发、AngularJS 20框架开发等）

⑤小程序开发

⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）

⑦就业拓展（网站SEO与前端安全技术）

想要系统学习，你可以考察对比一下开设有IT专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。

祝你学有所成，望采纳。

前端虽然学习起来是相对简单的，但是内容也不少，同时后期可以补充后端技能，成为现在热门的web全栈工程师。

要学的内容主要有：

①计算机基础以及PS基础

②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）

③移动开发

④前端高级开发（ECMAScript6、Veujs框架开发、webpack、前端页面优化、React框架开发、AngularJS 20框架开发等）

⑤小程序开发

⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）

⑦就业拓展（网站SEO与前端安全技术）

互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。

想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。

祝你学有所成，望采纳。

1HTML
知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4DOM
知识要点：DOM模型、节点类型、节点的基本 *** 作、JS *** 作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7vue案例
知识要点：将知识点融会贯通到案例中。
8react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本 *** 作、express框架、koa框架

一个专业的前端开发工程师是必须掌握前端开发三大基本基石HTML、CSS，JavaScript。光会这些还不够，有了这些语言还需要各种工具的支撑，比较常见的有Dreamweaver，Sublime，HBuilder。还有FontelloFontello 、Secureheaders、Visual Studio CodeVisual Studio Code。

工具只能解决一些特定问题，要解决更加全面的问题就要接触到框架，三大基本框架有Angular、React、Vue，当然，以后还会接触到更多Bootstrap、 Fbootstrapp、BootMetro、Gumby、IVORY、Kube这样的框架。另外，一个优秀的前端开发工程师可能还要掌握SEO、DOM、BOM、Ajax等技能，甚至，网站性能优化和服务器端的相关基础知识也是需要了解的。

学会这些还不够，前端开发是一门发展的学科，不是学好了就可以停止学习，后面还会接触到更多新的内容。

由此可见，要想学好前端，绝对不简单，前端开发的广度和深度是其他行业所不能比拟的，你必须付出不懈的努力，才能收获这份果实。

这里整理了一份web前端学习路线，比较系统和全面，希望可以帮到你~
第一阶段：专业核心基础
阶段目标：
1 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。
2 熟练运用HTML+CSS特性完成页面布局。
4 熟练应用CSS3技术，动画、d性盒模型设计。
5 熟练完成移动端页面的设计。
6 熟练运用所学知识仿制任意Web网站。
7 能综合运用所学知识完成网页设计实战。
知识点：
1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。
2、CSS3选择器、伪类、过渡、变换、动画、字体图标、d性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。
3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。
第二阶段：Web后台技术
阶段目标:
1 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。
2 熟练掌握JavaScript的基本数据类型和变量的概念。
3 熟练掌握JavaScript中的运算符使用。
4 深入理解分之结构语句和循环语句。
5 熟练使用数组来完成各种练习。
6熟悉es6的语法、熟练掌握JavaScript面向对象编程。
7DOM和BOM实战练习和H5新特性和协议的学习。
知识点：
1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。
2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。
3、BOM *** 作和DOM *** 作。熟练使用BOM的各种对象、熟练 *** 作DOM的对象。
4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。
第三阶段：数据库和框架实战
阶段目标：
1 综合运用Web前端技术进行页面布局与美化。
2 综合运用Web前端开发框架进行Web系统开发。
3 熟练掌握Mysql、Mongodb数据库的发开。
4 熟练掌握vuejs、webpack、elementui等前端框技术。
5 熟练运用Nodejs开发后台应用程序。
6 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。
知识点：
1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Nodejs后台开发打下坚实基础。
2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Nodejs运行环境和后台开发框架完成Web系统的后台开发。
3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vuejs框架的基本使用有清晰的理解，能够运用Vuejs完成基础前端开发、熟练运用Vuejs框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。
4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Nodejs+Vuejs+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。
第四阶段：移动端和微信实战
阶段目标：
1熟练掌握Reactjs框架，熟练使用Reactjs完成开发。
2掌握移动端开发原理，理解原生开发和混合开发。
3熟练使用react-native和Flutter框架完成移动端开发。
4掌握微信小程序以及了解支付宝小程序的开发。
5完成大型电商项目开发。
知识点：
1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。
2、react-native、开发工具、视图与渲染、api *** 作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。
3、微信小程序基本介绍、开发工具、视图与渲染、api *** 作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。
4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Threejs 、TypeScript。

WEB前端学习应该要学习那些课程？

在这里我们把前端学习分为9个阶段，进行学习：

第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树 *** 作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、d出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM *** 作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocityjs框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、d性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zeptojs、手机聚划算页面、手机滚屏。

第三阶段：

>

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、>

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XML>

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angularjs、Backbonejs、Knockout/Ember。

常用库：

Reactjs、Vuejs、Zeptojs。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Nodejs全栈开发：

快速入门：

Nodejs发展、生态圈、Iojs、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径 *** 作，序列化和反序列化、文件流 *** 作、>

Web开发基础：

>

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

最后学习计划有啦，那就赶快开始学习吧！

今天小编要跟大家分享的文章是关于2020年Web前端自学之路指南。许多人可能跟着网络上的各种教程就入了前端这行的门，但大多数都只是机械的学习着资料中的内容。俗话说，选择要比努力重要。那么学习开发，首先应该要有一个清晰的学习路线。希望这篇文章，能为大家在选择未来的发展方向时提供一些参考和帮助。下面来和小编一起看一看吧！





1、基础学习


●HTML+CSS基础：


HTML进阶、CSS进阶、div+css布局、排版、html+css整站开发，样式美化和浏览器兼容


●JavaScript基础：


掌握Js基本语法、条件、语句和循环、js内置对象常用方法、ECMAscript、DOM、BOM、定时器和焦点图，并学习增强逻辑的常用算法，实现木马、拖放、放大镜等常见的网络特效。


●JavaScript高级特性：


正则表达式与JSON、正则表达式案例、JavaScript原理与库封装、闭包、函数节流、作用域链、面向对象基础、事件与运动框架封装


●JQuery基础使用：


DOM *** 作、特效和动画、方法链、拖拽、变形、JQueryUI组件的基本使用，开发复杂的交互功能和效果，并能熟悉JQuery的插件开发机制。


2、HTML5+CSS3和移动Web开发


●HTML5：


HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket


●CSS3：


CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocityjs框架、元素进场、出场策略、炫酷CSS3网页制作


●图像学：


Canvas、Canvas游戏、数据可视化、Heighchartsjs


●Bootstrap：


响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS


●移动Web开发：


跨终端WEB和主流设备简介、流式布局、d性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zeptojs、商城页面、滚屏


3、>