前端必知必会的核心技术大致可以分为五大块，分别是：

  • HTML
  • CSS
  • JavaScript
  • 框架：Vue、React 等
  • 打包工具：Webpack、Vite 等

1、HTML

网页最核心的技术就是 HTML 了。我们看到的网页其实就是由 HTML 这种编程语言描述出来的。HTML 由标签组成，通过标签，我们可以在网页中插入文字、图片、链接、音频、视频等元素，进而描述网页。和 Windows 一样，随着技术的发展，HTML 经历了多次版本更新。后面我还会带你用 HTML 实现一个自己的网页。

比如这段代码可以实现一个简单的 HTML 页面，下面的图片是对上方代码的拆解，你能清晰地看到页面的整体结构以及不同的块级。核心部分就是 body，主要用来展示页面内容。需要明确的是，、、 这几个标签必须存在。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础网页</title>
</head>
<body>
<h1>标题内容</h1>
<p>文字段落</p>
</body>
</html>

前端必知必会的核心技术_打包工具

2、CSS 

只知道 HTML 还远远不够，组成网页要有三板斧，分别是 HTML、CSS、JavaScript。我们接着就来看下这第二板斧：CSS。

CSS 的官方定义是，层叠样式表（英文全称：Cascading Style Sheets），它是一种用来表现 HTML 的计算机语言。通俗地讲，如果 HTML 是搭建网页的砖瓦的话，那 CSS 就是涂料和装饰，它可以装饰 HTML 里的各种标签元素。

3、JavaScript

只有好看的网页仍然不够，人们还想给网页添加一些动态效果。比如常见的可以点击的按钮，页面上可以滚动的图片等等。这时候，我们就需要 JavaScript 了。它的简称是 JS，是一种轻量级的编程语言，主要作用是给网站添加动态效果，也可用作数据请求处理。

4、框架

框架是可复用的设计构件，每个框架都规定了其应用的结构，应用框架更加关注的是软件的设计高可用和对应系统设计的弹性。框架的优势就是本身帮开发者集成当量的模块和组件，供我们选用，以完成对应的系统开发，这能极大地提高开发者的开发效率和质量。

准确来说，前端框架指的是用来简化网页设计的框架。开发网页时有很多重复工作，引入框架并按规定好的代码结构编排，不但能够降低开发成本、便于分配资源，控制和延展网页也更轻松。

目前主流的前端框架有 Vue 和 React，这两个框架在企业中的应用都非常广泛。

Vue 可以构建交互式的 Web 界面的库，是一个构建数据驱动的 Web 界面渐进式框架。近年来 Vue 越来越受欢迎了。从 GitHub 的趋势看，虽然 Angular 和 React 也都是非常优秀的前端框架，但是 Vue 已经排在第一位，达到了 13 万的 Star。

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


5、打包工具

除了框架，打包工具也是开发者的必备武器了，那它到底解决了什么问题呢？

浏览器文件本身不会被编译，但是在开发过程中，我们通常需要将代码、资源和样式分割成独立的模块，以便于管理和维护，所以在前端开发过程中，模块打包是非常重要的一块内容。

常用的模块打包工具有 Webpack、Parcel、Brow 等，它是一种全新的前端构建工具，它类似于 Webpack + webpack-dev-server 的组合。所以，综合来看，模块打包工具极大地优化了前端开发者的开发体验。

Webpack 是一个前端资源加载 / 打包工具。它会根据模块的依赖关系进行分析，然后将这些模块按照指定的规则生成对应的静态资源文件。

Vite 的定位是下一代前端开发与构建工具，它能显著改善前端开发体验。使用 Vite 进行开发至少会比使用 Webpack 快 10 倍左右。但它的缺点是生态不如 Webpack 成熟，相信以后会越来越完善。