【一】前端系统学习框架图

前端的知识在总体上分成基础部分和实践部分
基础部分包含

• JavaScript
• HTML & CSS
• 浏览器的实现原理 & API

实践部分：重点是在工作过程中遇到的问题和解决方案

一、前端学习框架图

前端学习框架图.png

二、JavaScript

1、编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时
2、JavaScript的类型系统就是它的7种基本类型和7种语言类型
3、实例：内置对象部分
4、执行过程（从大到小、从粗到细）

• 最顶层的程序与模块
• 事件循环
• 微任务
• 函数
• 语句级执行

5、JavaScript的内置对象多达150个以上，详细可以查看MDN

三、HTML & CSS

1、HTML

（1）HTML的功能主要由标签来承担，所以需要对标签进行分类，可以分为很多种

• head中我们称为元信息类标签，如title、meta、style、link、base这些，用来描述文档的一些基本信息
• 例如section、nav的标签，在视觉表现上跟div没什么区别，但是有各自的适用场景，叫做语义类标签
• img、video、 audio叫做替换型媒体类标签
• 表单类：input和button

（2）综上，可以把标签分为（加粗重点）

• 文档元信息：通常出现在head标签中的元素、包含了描述文档自身的一些信息
• 语义相关：扩展纯文本，表达文章结构、不同语言要素的标签
• 链接：提供到文档内和文档外的链接
• 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签
• 表单：用于填写和提交信息的一类标签
• 表格：表头、表尾、单元格等表格的结构

（3）HTML的补充标准：ARIA，是HTML的扩展，在可访问性领域，有重要的作用

2、CSS

从两个角度学习：语言、功能

四、浏览器实现原理 & API

具体如图
从W3C种选几个大块来说：事件、DOM、CSSOM、分别覆盖了交互、语义、可见效果

五、实践

具体如图

参考原文链接：列一份前端知识架构图