前端三要素

1、HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容

2、CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式

3、JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

一、结构层（HTML）

略

CSS层叠样式表是一门标记语言，而不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它的主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式重复输出，导致难以维护

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率

CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是"用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用"

SASS：基于Ruby，通过服务端处理，功能强大，解析效率高。需要学习Ruby语言，上手难度高于LESS

LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS

JavaScript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称是ES，特点是大部分浏览器都支持。截止到目前，ES3标准已发布如下版本：

ES3

ES4（内部，未正式发布）

ES5（全浏览器支持）

ES6（常用，当前主流版本）

ES7

ES8

ES9（草案阶段）区别就是逐步增加新特性浏览器不支持新特性是前端发展的一个很大阻碍，需要进行额外的操作，把ES6写完的代码打包编译成ES5，这样才能让全浏览器支持