前言

循序渐进，深入浅出。给你专属定制的学习路线，不多不少刚刚好。
第一步：基础知识的学习
第二步：编程技巧的学习
第三步：熟练掌握学习基本框架
第四步：熟练掌握最基本的编程工具
第五步：各种工程化和效率类库的学习
第六步：性能优化&编程设计的思考

学习路径

网络相关

Internet如何工作?

1. 地址和协议的概念

Internet的本质是电脑与电脑之间互相通信并交换信息，只不过大多是小电脑从大电脑获取各类信息。这种通信跟人与人之间信息交流一样必须具备一些条件，比如：您给一位美国朋友写信，首先必须使用一种对方也能看懂的语言，然后还得知道对方的通信地址，才能把信发出去。同样，电脑与电脑之间通信，首先也得使用一种双方都能接受的”语言”–通信协议，然后还得知道电脑彼此的地址，通过协议和地址，电脑与电脑之间就能交流信息，这就形成了网络。

2. TCP/IP协议

Internet就是由许多小的网络构成的国际性大网络，在各个小网络内部使用不同的协议，正如不同的国家使用不同的语言，那如何使它们之间能进行信息交流呢？这就要靠网络上的世界语—-TCP/IP协议。详细介绍请参考TCP/IP>>>

3. IP地址

语言（协议）我们是有了，那地址怎么办呢？没关系，用网际协议地址（即IP地址）就可解决这个问题。它是为标识Internet上主机位置而设置的。Internet上的每一台计算机都被赋予一个世界上唯一的32位Internet地址（Internet Protocol Address，简称IP Address），这一地址可用于与该计算机机有关的全部通信。为了方便起见，在应用上我们以8bit为一单位，组成四组十进制数字来表示每一台主机的位置。
一般的IP地址由4组数字组成，每组数字介于0-255之间，如某一台电脑的IP地址可为：202.206.65.115，但不能为202.206.259.3。

DNS及其工作原理？

DNS （Domain Name System 的缩写）的作用非常简单，就是根据域名查出IP地址。你可以把它想象成一本巨大的电话本。
举例来说，如果你要访问域名math.stackexchange.com，首先要通过DNS查出它的IP地址是151.101.129.69。

域名的作用？

域名地址

尽管IP地址能够唯一地标识网络上的计算机，但IP地址是数字型的，用户记忆这类数字十分不方便，于是人们又发明了另一套字符型的地址方案即所谓的域名地址。IP地址和域名是一一对应的，我们来看一个IP地址对应域名地址的例子，譬如：河北科技大学的IP地址是202.206.64.33，对应域名地址为www.hebust.edu.cn。这份域名地址的信息存放在一个叫域名服务器（DNS，Domain Name Server）的主机内，使用者只需了解易记的域名地址，其对应转换工作就留给了域名服务器DNS。DNS就是提供IP地址和域名之间的转换服务的服务器。

域名地址的意义

域名地址是从右至左来表述其意义的，最右边的部分为顶层域，最左边的则是这台主机的机器名称。一般域名地址可表示为：主机机器名.单位名.网络名.顶层域名。如：dns.hebust.edu.cn，这里的dns是河北科技大学的一个主机的机器名，hebust代表河北科技大学大学，edu代表中国教育科研网，cn代表中国，顶层域一般是网络机构或所在国家地区的名称缩写。

HTTP协议是什么?

http(Hypertext transfer protocol)超文本传输协议，通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。也就是说，http协议规定了超文本传输所要遵守的规则。

HTTP协议的特点

HTTP协议是无状态的
多次HTTP请求
基于TCP协议

HTTP报文

浏览器工作机制？

浏览器的结构(The browser’s high level structure)

Webkit 主要流程如下图：

Gecko 主要流程如下图：

HTML

学习基础知识

MDN Web Docs
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

千古前端图文教程
如果上面的MDN Web Docs看着乏味，可以尝试这个图文教程，相对更通俗易懂，但是所有标准还是得参考MDN。
https://web.qianguyihao.com/01-HTML/01-%E8%AE%A4%E8%AF%86Web%E5%92%8CWeb%E6%A0%87%E5%87%86.html

表单和验证

https://developer.mozilla.org/zh-CN/docs/Learn/Forms

约定和最佳实践

无论你是超文本标记语言 (HTML) 的初学者还是专家，遵循一些最佳实践以保持 HTML 文档的一致性和组织性都非常重要。有如此多的元素、属性、属性、值等等——有很多东西需要学习。

使用适当的文档结构
声明正确的文档类型
始终关闭标签
不要使用内联样式
对图片使用 alt 属性
经常验证
在标签内放置外部样式表
使用有意义的标签
使用小写标记
减少页面元素的数量

更详细内容参考初学者的10个HTML最佳实践

语义化标签

HTML 5的革新之一：语义化标签一节元素标签。在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

header元素
footer元素
hgroup元素
nav元素
aside元素
section元素
article元素

HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6 address。
更详细内容参考 html5语义化标签

CSS

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks

JavaScript

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps

版本控制系统

TODO

网络安全知识

TODO

包管理工具

TODO

CSS体系结构

TODO

CSS预处理器

TODO

构建工具

TODO

前端框架

TODO

现代CSS

TODO

Web组件

TODO

测试

TODO

类型检查器

TODO

PWA

TODO

SSR

TODO

网页静态化

TODO

APP跨平台

TODO