前端技术涵盖了美工设计、HTML、CSS、JavaScript、TypeScript、WebAssembly 等一系列关键组成部分。其核心目标在于通过浏览器，将代码转化为用户可感知和交互的视觉界面，致力于优化网站呈现效果与用户体验。

以往，掌握 Photoshop 图像处理与 Dreamweaver 的 HTML + CSS 就足以进行网页制作。然而，随着网站开发复杂度的提升和技术形态的多样化，现代前端开发已越来越接近传统后端开发的模式和强度，对开发者的工程化能力和编程素养提出了更高要求。

截止到目前为止，目前前端最火的几个个技术趋势分别是：

第一个是TypeScript，TypeScript整个呈现出爆发性的增长，在NPM它的下载量达到了四;

第二个就是React下载量达到了第一，但是Vue的star增长最多;

第三个就是WebAssembly已经逐渐崭露头角，而且我们浏览器这样的桌面应用化的趋势会越来越明显，在前端去增强web应用，WebAssembly在整个下一年会有更加强劲的趋势;

第四个就是no-code、low-code、pro-code在今年随着产业互联网的提出，整个行业进入了to B的转型期，未来的低代码会越来越受到大厂的重视。

1、HTML

HTML是一种超文本标记语言，该语言主要是给浏览器解析成用户看得懂的UI界面，HTML标签格式和XML类似，通常以作为根节点开头和，内容常常放在内容标签里面。

2、CSS

CSS又名层叠样式表(英文全称：Cascading Style Sheets)，它是用来美化和修饰HTML标签用的语言。CSS能让HTML的界面按照人类理解和欣赏的布局进行显示。CSS一般是以.css为后缀的文件进行存储，并且在html通过link标签进行引入，也可以嵌入写在html标签的style标签里面。CSS发展到现在不仅可以静态修饰HTML，还可以支持动画和过度效果。

3、javascript

JavaScript是一种运行是浏览器里面的脚本语言，不过随着发展目前JavaScript也是一个全栈的开发语言了，比如可以运行在后端的nodejs,能做跨平台桌面应用程序开发的election等，目前JavaScript正在变成一门全面的语言。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

4、vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

5、react

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

6、Jquery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

7、bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。

8、Angular 框架

1)jQuery：库

库一般都是封装了一些常用的方法

自己手动去调用这些方法，来完成我们的功能

code $('#txt').val('我是小明'); $('div').text('xx');

2)angular：框架

框架都是提供一种规范或者模式,

我们却要按照它提供的这种规则去写代码

框架会自动帮助我们去执行相应的代码.

其实可以简单的理解为：大而全的是框架，小而精的是库

模块由一块代码组成，可用于执行一个简单的任务。

Angular 应用是由模块化的，它有自己的模块系统：NgModules。

每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。

Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下：

declarations (声明) - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。

exports - 声明( declaration )的子集，可用于其它模块中的组件模板 。

imports - 本模块组件模板中需要由其它导出类的模块。

providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。

bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。

9、Webpack

Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。

webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布。

作为一款 Grunt和Gulp的替代产品，Webpack受到大多数开发者的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。