按图索骥系列之——从前端知识路径图开始

1. 复盘，整理，再出发

入行前端也有一段时间了，从最开始的新奇，到现在的掌握。距离精通还有一段很长的路要走，但是如何在好奇心被满足的情况下进一步提升自己。慢慢的变成了我的一个门槛。因为自己的状态处在一个，问什么，都能略知一二，然后想要进一步举一反三触类旁通。似乎又差点什么？想了很久，并不是简单地基础不牢固之类。子曰，学而不思则罔。我所欠缺的，是一个总结，回顾。这就是我第一段的标题，也是为什么有这个系列的原因：复盘，整理，再出发。

2. 如何开始

这里有个火过的前端路径图。它的副标题是一步步称为现代前端的开发者。这是一张非常粗略的地图。恰好可以作为我的总纲。在这里起步，抛转引玉。利用万能的 google 以及广大的同行们不断的积累，来梳理出更清晰的脉络图。

在一切开始之前，我打算使用“三步走”的方法论，来指引文章主体思路。即：是什么？为什么？怎么做？

是什么？

这个问题需要回答概念性的内容，进一步拓展路径图。比如我们在 HTML 分类下，只能看到：

• HTML
  • 学习基础
  • 书写语义化 HTML
  • 基础 SEO
  • 可访问性

这个路径可谓是相当粗糙，但是没关系接下来就是我们自由发挥的空间了。顺着【学习基础】这个结点，通过查阅 W3C 对于 HTML 5.2 的规范来了解。当然，具体的规范大家可以通过这个链接查阅。只是这里面事无巨细的定义了非常多的内容，我们没有必要去学习茴香豆有几种写法，也需要在细枝末节之间找到一个平衡。以下列表是我经过浏览 HTML 5.2 目录来提炼的一份列表。接下来的日子中，我们会针对这个列表展开学习 HTML 的基础知识，让我们复盘整理，再出发。

• HTML
  • 学习基础
    1. 背景知识及简介
    2. 常规的基础架构
    3. 语义结构和 HTML 文档的 API
    4. HTML 元素
    5. 用户交互
    6. 加载 Web 页面
    7. Web 应用接口
    8. HTML 语法
    9. XML 语法
    10. 渲染
    11. 废弃特性

细心的同学会发现，我其实在这里是翻译了 HTML 5.2 的目录，当然，接下来梳理中，并不会对以上目录逐一详解。因为这是工程浩大的体力活，没必要，也没有意义。我们需要掌握的更多应该是可以指导我们编写和理解 HTML 代码的内容。至于一些更深入的背景知识和细节，就让它在规范里躺着，供学有余力的同学参阅吧。

拿即将开始的一节标题内容： 4. HTML 元素 来举例。这可以说是最简单也最亲民的路线。首先我们需要搞清楚什么是 HTML，对于简单的概念性问题，我将以超链接和搜索引擎的结果或者关键字整理来展示。不打算做文字搬运工和复读机。因为我相信，一个入行前端的同学必定是有一定的信息检索能力。我们欠缺的，是归纳和整理。这也是开始本系列的原因。HTML 定义 在 MDN 中十分清晰。我们需要深入的是，何谓“标记语言”，它与编程语言的区别在哪里？更进一步，编程语言的定义是怎样的？当我们搞清楚了以上问题，就同时回答了 what 和 why 的问题。接下来，how 该如何去做，我打算用一些简单测验来作为每一章的结束。然后以此来不断提出新的问题，螺旋式上升，像多周目一样。一步步到达我们期待的高处，去俯瞰更远的风景。

本期内容作为开篇，只是罗列了一些方法论，同时想听听广大同行们的意见。 让我们一起来整理一份，属于自己的知识地图。