以前，开发人员只要掌握了HTML、CSS、JavaScript三驾马车，就可以做前端工作。现在除了常见的编码，还要考虑如何优化性能，如何实现跨终端、跨平台的功能。尤其是AI和5G技术的出现，加速了前端技术的更新，也迫使开发者不断学习，不接受新的技术标准。

“学什么”和“怎么学”其实是我们要重点关注的问题。所以今天我就整理一下前端的知识框架，帮你再遍历一遍知识点，这样更容易学会查漏补缺。

Web前端基础怎么学？html、css和JavaScript的知识架构图

我们先来看看什么叫做知识架构。

我们可以把它理解为知识的“目录”或索引，可以帮助我们组织零散的知识，发现知识中的一些盲点。

本文包括JavaScript、CSS和HTML，以及浏览器的实现原理和API。这三个模块涵盖了前端工程师需要掌握的所有知识。

JavaScript知识架构图

Web前端基础怎么学？html、css和JavaScript的知识架构图

在JavaScript模块中，我们可以首先按照语法、语义、运行时来拆分语言，这符合编程语言的一般规律：用一定的词法和语法来表达一定的语义，从而运行运行时。

运行时可分为数据结构和算法部分——。数据结构包含类型和实例(内置对象)，算法是执行过程。执行过程应该是从顶层的事件循环和微任务，到函数，再到语句级。

语法和语义基本上是一一对应的。JavaScript标准里有语法定义表，建议随时看一下。

HTML和CSS知识架构图

Web前端基础怎么学？html、css和JavaScript的知识架构图

在HTML部分，我们按照功能和语言来划分它的知识。HTML的功能主要由标签承担，所以首先要对标签进行分类。图中元素背后的分类是指我们根据所承担的不同功能将标签分为几类。

除了标签，你还要理解HTML这种语言。你必须掌握基本的HTML语法和几个重要的语言机制：实体和命名空间。

CSS可以按照语言和功能来划分。

语言部分，@rule，selector，unit是需要关注的三个部分。

在功能部分，可以重点关注布局(正常流程和灵活布局)、绘图(图文)和交互类。

浏览器的实现原理及API

Web前端基础怎么学？html、css和JavaScript的知识架构图

浏览器的实现原理是我们深入理解API的基础

从一般的浏览器设计入手，按照解析、构建DOM树、计算CSS、渲染、合成、绘制的过程，可以学习浏览器的工作原理。

在API部分，我们可以从W3C分散的标准中选取几个大的API来详细讲解，主要包括：事件、DOM、CSSOM，分别涵盖交互、语义、可见效果，这些是我们工作中用到的主要内容。