前端技术学习路线及技术汇总

对于刚入门的同学，相信大家都会很迷茫，不知道该从何学起。曾经的我也是很迷茫，完全没有方向，胡乱学习一通。了解了学习路线之后，按照它前进的时我才发现其中的乐趣。下面是个人的见解与查阅资料整理的文章，希望对阅读此文章的你们能够有帮助。

首先。你们了解什么叫前端技术吗？请接着往下看。
前端技术包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe RIA、Google Gears，以及概念性较强的交互式设计，艺术性较强的视觉设计等等。

下面是简单整理的一些前端的学习路线：
第一阶段：

1. HTML+CSS：HTML主要就是网页编辑。包括HTML进阶、CSS进阶、div+css布局、HTML+css整站开发。
2. Javascript 语言：JavaScript是web前端中最重要的知识，包括Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
3. JS基本特效：常见特效，如tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
4. JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。
5. jQuery：包括学习悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：掌握一些HTML5和CSS3知识。

1. HTML5：HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。
2. CSS3：学习通过 css 开发网页和各种可视 UI 组件。CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
3. **Bootstrap框架：**响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS

第三阶段：HTTP服务和AJAX编程

1. WEB服务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
2. PHP基础：PHP基础语法、使用PHP处理简单的GET或者POST请求。
3. AJAX：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：面向对象

1. 面向对象终极篇：从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
2. 面向对象三大特征：继承性、多态性、封装性、接口。
3. 设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

1. Node.js：掌握Node.js 核心 API ，具备后端开发能力。
2. Express 5.x 框架：掌握 Express 框架，从而具备快速开发后端程序的能力。
3. socket.io 库：让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。
4. Mongoose 框架：可以让程序具备文档数据储存能力。
5. Git 命令与 github：可以对项目进行版本管理，从而能团队开发项目。
6. Gulp 构建工具实战：通过 gulp 工具，灵活对项目进行构建。
7. Webpack：可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。

参考链接：https://www.cnblogs.com/bianyuanzhe/p/6369478.html
https://baijiahao.baidu.com/s?id=1581559180536219353&wfr=spider&for=pc

下面是一些前端技术体系汇总：

• HTML HTML5 CSS CSS3 JavaScript
• jQuery jQuery UI jQuery EasyUI ExtJS
• ECharts Tree.js Video.js
• JSP ASP.NET PHP Python
• MySQL SQL Server Oracle MongoDB
• XML JSON AJAX
• Bootstrap Layui Foundation
• jQuery Mobile MUI WeUI Reactive Native
• Node.js Gulp Webpack AngularJS Vue
• 基础 脚本 类库 服务器 数据 响应式 移动端 框架