下面是网上一个“Web前端开发工程师”的任职要求。

从上述的任职要求以及上节的岗位职责来看，Web前端开发工程师的技能要求主要有：一是HTML、CSS和JavaScript三大件；二是Vue、React、Augular等前端框架。

HTML、CSS和JavaScript三大件

总之，HTML控制网页的结构和内容（“是什么”），CSS设定网页的外观表现样式（“什么样子”），JavaScript控制的是网页的行为（“做什么”）。

HTML

HTML是超文本标记语言（HyperTextMarkupLanguage，简称HTML）,一种用来设计网页的标记语言。HTML是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。

html/html：标记符html说明该文件是用超文本标记语言来描述的，它是文件的开头，而/html则表示该文件的结尾，它们是HTML文件的开始标记和结尾标记。

body/body；网页中显示的实际内容均包含在这2个正文标记符（也称为实体标记符）之间。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML文件中也可以嵌入（或引用）CSS层叠样式表来定义文本和其它元素的外观与布局，嵌入JavaScript脚本语言来改变网页的行为。

HTML5是Web中核心语言HTML的规范，它结合了的相关标准并革新，符合现代网络发展要求。HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

为了更好地处理PC端和移动端的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制、多媒体内容，更好的页面结构，更好的形式处理、网页应用程序缓存，等等。虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性和新功能，Web前端开发人员还是要有所了解的。

CSS

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。相对于传统HTML的表现而言，其样式是可以复用的，极大地提高了前端开发人员的速度，降低了维护成本。

CSS中的“C”是“层叠”的意思，表示样式表规则应用于HTML文档元素的方式。具体来说，CSS样式表中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

CSS3规范的一个新特点是它被分成若干个相互独立的模块。一方面，这一新特点有利于CSS3规范及时更新和发布。这些模块独立实现和发布，能够及时调整模块的内容，为CSS3的扩展奠定了基础。另一方面，由于受设备支持和浏览器厂商的限制，设备或者浏览器可以有选择的支持一部分模块（CSS3模块的一个子集），这种可选的模块支持模式易于受行业和企业界的接受，也有利于CSS3规范的应用推广。但是，不同浏览器（设备）在不同时间支持不同模块，这也让浏览器兼容问题变得复杂了。

JavaScript

JavaScript（简称“JS”）是为满足制作动态网页的需要而诞生的一种编程语言，是由Netscape（网景通信公司）开发的嵌入到HTML文件中的基于对象（Object）和事件驱动（EventDriven）的解释型脚本语言。JavaScript提供了一些内置函数、对象和DOM操作，借助这些内容我们可以实现一些客户端的特效、验证、交互等网页和用户的实时、动态交互。目前几乎所有的浏览器都可以很好地支持JavaScript。由于JavaScript可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。

JavaScript是当前最流行、应用最广泛的客户端脚本语言，常用来在网页中添加一些动态效果与交互功能，为用户提供更流畅美观的浏览效果，在Web开发领域有着举足轻重的地位。虽然它是作为开发前端页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，比如，就是一个基于ChromeV8引擎的JavaScript运行环境，以前JS只能运行在浏览器中，出现之后，不管是服务器上，还是我们个人的笔记本上，只要安装了就可以运行JS代码了。

JavaScript与HTML和CSS共同构成了用户浏览器所看到的Web网页，其中，HTML用来定义网页的内容，例如标题、正文、图像等；CSS用来控制网页的外观，例如颜色、字体、背景等；JavaScript用来实时更新网页中的内容，比如，在HTML页面嵌入动态文本；对浏览器事件做出响应；读写HTML元素；在数据被提交到服务器之前验证数据；检测访客的浏览器信息；创建和修改cookies，等等，可以让网页更加生动。

完整的JavaScript是由以下三个部分组成：

核心（ECMAScript）：脚本语言的核心内容，定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。

文档对象模型（DOM）：它是HTML和XML文档的应用程序编程接口，提供处理网页内容的方法和接口。浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档。用DOMAPI可以轻松地删除、添加和替换文档树结构中的节点。

浏览器对象模型（BOM）：浏览器对象模型描述对象与对象之间层次关系的模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，以及与浏览器进行交互的方法和接口。

JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

Vue、React、Angular等前端框架

框架是对基础代码进行封装，并且提供对应的API接口。开发人员基于框架的开发可以直接调用封装好的API，避免重复编写很多基础代码，也就是不需要重复“造轮子”。前端常用的框架有Vue、React、Angular等,后端常用的框架有Spring、SpringBoot、Mybatis等。这些框架都有一个共同的特点——简单、高效，所以基于框架的开发极大地提高了开发人员的工作效率。

形象来说，框架可以理解为一个毛坯房。有了这个毛坯房，你可以装修成自己想要的样子，而不需要再一砖一瓦的去盖房子，省略了盖房子主体架构这些步骤。

框架可以帮助开发者不再重复编写一些基本的底层代码，只需调用框架的API接口方法就可以实现想要的功能。学习框架的目的就是提高开发人员的工作效率，使开发人员不再需要重复“造轮子”，可以把更多的时间用在业务流程和逻辑的理解以及编写业务相关的代码。虽然没有框架我们依然能够进行开发，但是没有框架我们就要编写那些原生的API，我们的开发效率将远低于基于框架的开发。而且，与经过多年不断更新迭代的成熟框架相比，我们自己编写的代码（自己造的轮子）的安全性和稳定性肯定是远远不足的。

GitHub的调查数据显示，2021年最主流的前端框架分别是：Vue、React、Angular。国际使用人数排名从高到低分别为React、Angular、Vue，使用难度分级从低到高分辨是Vue、React、Angular,目前最容易入门的是Vue,也是最受欢迎的前端框架之一，排名第二的是React,这也是一款非常成熟的框架，而Angular是一款重量级框架，排名第三。

Vue的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。响应式数据绑定就是当数据发生变化的时候，视图自动更新，即双向数据同步；组合的视图组件即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。它不是一个全能框架——它只聚焦于视图层，因此前端开发人员学习Vue比较容易上手。

Vue提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。从技术上讲，Vue集中在MVVM模式上的ViewModel视图模型层，并通过双向数据绑定连接视图和模型,实际的DOM操作和输出格式被抽象成为指令和过滤器。

Vue框架是中国人尤雨溪开源的项目，是我们国人的骄傲。目前，Vue应该是在国内各大公司用得最多的前端框架。

React起源于Facebook的内部项目。因为Facebook公司对市场上所有JavaScriptMVC框架都不满意，就决定自己写一套来架设Instagram网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

组件化：创建拥有各自状态的组件，再由这些组件构成更加复杂的界面。组件逻辑使用JavaScript编写而非模板代码，因此你可以轻松地在应用中传递数据，并使得状态与DOM分离。

使用方便：无论你现在正在使用什么技术栈，你都可以随时引入React来开发新特性，而不需要重写现有代码。React还可以使用进行服务器渲染，或使用ReactNative开发原生移动应用。

React主要得益于虚拟DOM的思想。在React中，对于每个DOM对象，都有一个对应的“虚拟DOM对象”。虚拟DOM能够在DOM改变时，分辨出新旧版本DOM的不同，只将DOM中改变的部分进行渲染，这是一种单向数据绑定，由于修改时不需要实时向屏幕渲染，因此操作虚拟DOM比更新原始DOM快很多，这是一种非常高效的浏览器DOM更新方式。

AngularJS

AngularJS诞生于2009年，是一款构建用户界面的前端JavaScript框架，后被Google收购。Angular一般指的就是AngularJS，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。

AngularJS是一个客户端的JavaScript开源框架，特别为使用MVC架构模式的单页面Web应用而设计，可用于开发动态Web应用程序。它不是一个完整的技术栈，而是一个处理Web页面的前端框架。

AngularJS完全基于HTML和JavaScript，因此无需学习其他语法或语言。AngularJS将静态HTML更改为动态HTML，它通过添加内置属性和组件扩展了HTML的功能，还提供了使用简单JavaScript创建自定义属性的功能。

AngularJS最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular通过指令扩展了HTML，以一个JavaScript文件形式发布，通过script标签添加到网页中。