前端三要素
-
HTML(结构)：超文本标记语言(Htper Text Markup Language)，确定网页结构和内容
-
CSS(表现)：层叠样式表（Cascadiong Style Sheets）,设定网页的表现样式
-
JavaScript(行为)：是一种弱类型脚本语言，其源代码不需要编译，而是由浏览器解析运行，用于控制网页行为
结构层(HTML)
都是一些简单的标签，略
表现层(CSS)
CSS是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说是不具备任何语言支持，它的主要缺陷如下：
-
语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
-
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致我们在工作中增加了许多工作量，比如到节假日想要给网站换个样式就得一个一个的改，为了解决这个问题，前端开发人员会使用CSS预处理器的工具，提供CSS缺失的样式复用机制,减少冗余代码，提高样式代码维护性。
什么是CSS预处理器
CSS 预处理器提供了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。通俗的说就是：用一种专门的编程语言，进行web页面样式设计，以供项目使用。
常见的CSS预处理器
-
SASS:基于Ruby,通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
-
LESS：基于NodeJs,通过客户端处理，使用简单。功能比SASS简单，解析效率 也低于SASS，但实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。
行为层（JavaScript）
JavaScript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照ECMAScript标准的开发方式，简称ES，特点是所有浏览器都支持。ES标准已发布如下版本，区别就是逐步增加新特性：
-
ES3
-
ES4(内部，未正式发布)
-
ES5（全浏览器支持）
-
ES6（常用，当前主流版本:webpack打包生成ES5支持!）
-
ES7
-
ES8
-
ES9(草案阶段)
TypeScript微软的标准
TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯.海尔斯伯格（C#，Delphi,TypeScript之父；.NET创立者）主导。
该语言特点就是除了具备ES的特性之外还纳入许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持它的语法，需要编译成JS后才能被浏览器正确执行。
JavaScript框架
-
jQuery:大家熟悉的JavaScript框架，里面封装了成千上万的JS方法，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6,7,8;
-
Angular:goole收购的前端框架,由一群Java程序员开发，其特点是将后台的MVC搬到了前端并增加了模块化开发理念，与微软合作，采用TypeScript语言开发，对后端人员开发友好，对前端开发人员不友好，缺点是版本迭代不合理；
-
React:Facebook出品，一款高性能的JS前端框架；特点是提出了新概念虚拟DOM用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是学起来复杂；
-
Vue:一款渐进式JS框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发，路由，状态管理等新特性，其特点是综合了Angular和React的优点；
-
Axios:前端通信框架，因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时需要额外使用一个通信框架与服务器交互，当然可以直接使用jQuery提供的AJAX通信功能；
UI框架
-
Ant-Design:阿里巴巴出品，基于React的UI框架
-
ElementUI,iview,ice:饿了么出品，基于Vue的UI框架
-
Bootstrap:Twitter推出的一个用于前端开发的开源工具包
-
AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架
JavaScript构建工具
-
Babel:JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
-
WebPack:模块打包器，主要作用是打包，压缩，合并及按序加载。
注:以上知识点基本就是WebApp前端开发所需全部技能