一方面，随着近几年前端的飞速发展，各种框架应用层出不穷；另一方面，学校中并没有与之对应的专业训练，使得很多开发者们面对新机会的时候措手不及，这种现象在哲学层面称之为“新事物”，新事物往往是具有远大光明和前景的事物，因此，想要不被前端的波涛汹涌冲垮，就需要构建自己的知识体系，不管框架怎么变，前端的基础知识体系是不变的。

这里是重学前端，是基于winter老师重学前端系列课程的一个总结体会集合，希望对你我在前端查漏补缺上有一定的帮助。

以前我们的学习都是零散的学习，由点及面，然后就马不停蹄地运用于工作中，这其中就难免会遗漏很多的知识点，而在工作中不经常用的那部分其实也忘的差不多了，然而我们构建知识框架，则是从面到点，从整体把握知识体系，并逐个击破。

HTMLCSS图谱

以上就是整理的一个HTML和CSS的知识体系图谱。

HTML

我们把HTML的标签分为六类

  1. 文档类标签：它是描述文档自身信息的一些标签，比如：title、meta、style、base等。
  2. 语义标签类：扩展了文本，语义的表述，比如：header、aside、article等。
  3. 链接类型：提供文档内到文档外的链接。
  4. 替换类型：引入图片、视频、音频替换自身的标签。
  5. 表单：用户用户输入或者选择项的标签。
  6. 表格：用户表格布局或者显示表格的标签。

CSS

CSS是从语言和功能上面来说，语言上面有@rule，比如@media、@import、@page等，还有我们的各类选择器和单位；功能上面可以从布局文档流、效果绘制和动画交互来讲，包括标准流、flex布局、边框效果，文字阴影、逐帧动画和过渡动画等等。

Javascript图谱

以上就是整理的JavaScript的知识体系图谱。

JavaScript

上面这样的划分正好符合一般的编程规律：用一定词法和语法，来表达一定的语义，从而来操作运行时。而运行时有符合程序的定义：程序=数据结构+算法。数据结构又分为类型和实例，类型就是其中的基本数据类型和复杂数据类型（也叫引用数据类型），实例就是其中的一些内置对象了，执行过程就是算法约定的一些执行机制，包括事件机制，宏微任务等。文法里面的词法和语法是一一对应的，这在Javascript标准中是有详细规定的。

浏览器图谱

以上是整理的浏览器原理及API的图谱。

浏览器原理及API

浏览器从浏览器的设计流程出发，按照解析、渲染DOM树、操作CSSOM、计算CSS、渲染绘制这样来梳理，然后包括一些重要的浏览器内置API，比如：事件、DOM、浏览器API等等，这些都是工作中必定常用到的。