1.学习前端前的必备知识：互联网、网络、DNS 客户端和服务端

1.互联网和网络

互联网（Internet）是一种基础的技术，它允许我们把成千上万的电脑连接在一起，用于访问网页、发送电子邮件、在线购物、社交媒体等各种在线活动，它是基础设施，是一个超大规模的网络，由许多不同的网络和子网络组成，覆盖了整个地球，连接了世界上的几乎所有地区；

网络是建立在互联网之上的服务，可以是局域网（LAN）、城域网（MAN）或广域网（WAN）等不同规模和范围的，局域网通常用于共享文件和打印机，企业网络用于内部通信和资源共享。（值得注意的是，一些其他服务比如邮箱和IRC是运行在互联网之上的）。

2.常见概念：网页、网站、网络服务器、搜索引擎、域名、URL、超链接和web服务器

网页（webpage）：一份能够显示在网络浏览器（如 Firefox,，Google Chrome，Microsoft Internet Explorer 或 Edge，Apple 的 Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。

网站（website）：一个由许多网页组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作"web site"（网站）或简称"site"（站点）。

网络服务器（web server）：一台在互联网上托管一个或多网站的计算机。 "托管"意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求，将任意网页从托管的网站中发送到任意用户的浏览器中。

别把网站和网络服务器弄混了。例如，当你听到某人说："我的网站没有响应"，这实际上指的是网络服务器没响应，并因此导致网站不可用。更重要的是，自从一个网络服务器能够托管多个网站，"网络服务器"这个术语从来都没被用来指定一个网站，因为这可能导致很大的混乱。在上面的例子中，如果我们说，“我的网络服务器没有响应”，这就指的是在那台网络服务器上的所有网页都不可用。

搜索引擎（search engine）：帮助你寻找其他网页的网站，比如Google、BIng，Baidu等。

搜索引擎和浏览器并不一样，浏览器是一个接收并显示网页的软件，搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。

域名（Domain names）：任何连上互联网的电脑都可以通过一个公共IP地址访问到，对于 IPv4 地址来说，这个地址有 32 位（它们通常写成四个范围在 0~255 以内，由点分隔的数字组成，比如 173.194.121.32），而对于 IPv6 来说，这个地址有 128 位，通常写成八组由冒号分隔的四个十六进制数 (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). 计算机可以很容易地处理这些 IP 地址，但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变。为了解决这些问题，我们使用方便记忆的地址，称作域名。

域名通过将人类可读的名称用于标识网络上的对象，使得访问和查找网络资源更加方便快捷，简单地来说，域名就是我们平时进行搜索时输入的网站，一般域名有几部分组成，顶级域名（Top-Level Domain）一般是后面的（.com,.org,.net,.edu,.gov,.cn），IP地址则是用于在网络协议（如TCP/IP）中传递标识信息，是互联网底层的核心协议，域名系统（DNS）负责将域名解析为对应的IP地址，以便在网络上正确地寻找到目标对象。

URL：（Uniform Resource Locator）统一资源定位符，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。更详细内容。

超链接（Hyperlink）：点击超链接可以从当前页面跳转到一个新的页面。网页主要由文字、图片、音频、视频、按钮等元素组成，这些元素可以通过超链接（Hyperlink）方式互相连接在一起。超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置、图片或电子邮件地址、文件、甚至是应用程序。当浏览者单击已经链接的网页时，用户就可以访问目标网页，而跳转到新的页面或者同一页面上的不同部分。

web服务器：包含硬件和软件。

1. 硬件部分，web 服务器是一台存储了 web 服务器软件以及网站的组成文件（比如，HTML 文档、图片、CSS 样式表和 JavaScript 文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
2. 软件部分，web 服务器包括控制网络用户如何访问托管文件的几个部分，至少是一台 HTTP 服务器。一台 HTTP 服务器是一种能够理解 URL（网络地址）和 HTTP（浏览器用来查看网页的协议）的软件。一个 HTTP 服务器可以通过它所存储的网站域名进行访问，并将这些托管网站的内容传递给最终用户的设备。

当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过 HTTP 请求这个文件。当这个请求到达正确的 web 服务器（硬件）时，HTTP 服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个 404 响应），并把这个文档通过 HTTP 发送给浏览器。

web服务器分为静态web服务器和动态web服务器。

静态 web 服务器（static web server）由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。我们称它为“静态”是因为这个服务器把它托管文件的“保持原样”地传送到你的浏览器。

动态 web 服务器（dynamic web server）由一个静态的网络服务器加上额外的软件组成，最普遍的是一个应用服务器和一个数据库。我们称它为“动态”是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。

举个例子，要生成你在浏览器中看到的最终网页，应用服务器或许会用一个数据库中的内容填充一个 HTML 模板。像 MDN 或维基百科这样的网站有成千上万的网页。通常情况下，这类网站只由几个 HTML 模板和一个巨大的数据库组成，而不是成千上万的静态 HTML 文档。这种设置使得维护和提供内容更加容易。

3.网络是怎么工作的

3.1 客户端和服务端

连接到互联网的计算机可分为客户端和服务端。客户端是典型的web用户入网设备（连接了WiFi的电脑、接入移动网络的手机）以及设备上可联网的软件（比如Firefox和Chrome等浏览器）。通俗来说，客户端就是我们每个人的电脑，服务端是存储网页、站点和应用的计算机，当一个客户端设备想要获取一份网页时，一份网页的拷贝将从服务端下载到客户端机器上来在用户的浏览器上显示。

3.2 TCP/IP     DNS    HTTP 和 网页

TCP/IP：传输控制协议和因特网互连协议是定义数据如何传输的通信协议。

DNS：DNS（Domain Name System）是一个计算机域名系统，用于将域名转换为计算机可以访问的IP地址。

真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 63.245.217.105。

这叫做 IP 地址，它代表了一个互联网上独特的位置。然而，它并不容易记忆，这就是域名系统（DNS）被发明的原因。DNS是将你输入浏览器的地址（像 "mozilla.org"）与实际 IP 地址相匹配的特殊的服务器。

网页可以通过 IP 地址直接访问。可以通过在 DNS 查询工具 等工具中输入域名来查找网站的 IP 地址。

HTTP：超文本传输协议，是一种用于传输HTML页面、图像、样式表、脚本等内容的协议。它是互联网上应用最广泛的一种网络协议。HTTP协议由IETF（互联网工程任务组）制定和维护，它规定了浏览器和服务器之间传输数据格式和过程。

网页：一个网页主要由一下部分组成：

1. 超文本：也称为HTML（HyperText Markup Language）页面，它是一种包含文本和链接的文档，其中链接指向其他网页、图像、视频等资源。
2. 链接：链接是网页中用于连接其他网页或资源的元素，可以通过点击链接在不同的页面之间跳转或打开新的页面。
3. 图片：图片是网页中重要的视觉元素，可以用来美化页面和传达信息。
4. 样式表：样式表用于定义网页的外观和格式，包括字体、颜色、布局等。常用的样式表语言有CSS（Cascading Style Sheets）。
5. 脚本：脚本通常用于实现网页的动态功能，如交互式元素、动态内容展示等。常用的脚本语言有JavaScript。
6. 多媒体元素：包括音频、视频、动画等，可以用来丰富网页内容，吸引用户注意力。
7. 导航元素：导航元素是引导用户浏览网页的元素，如菜单、标签、面包屑等。
8. 布局元素：布局元素用于确定各个元素在页面上的位置和大小，包括表格、布局模型、浮动等。

3.3 客户端和服务端之间是怎么工作的

当我们在浏览器里输入一个网址时：

1. 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址。
2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器。
4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你。
5. 如果还不明白，可以看一个比喻：

假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果

• 互联网：好比地球上纵横交错的道路。
• 网络连接：道路通到了村子路口。从此，村子里的苹果就可以运出去卖了。
• TCP/IP：为了将村里的苹果能规范有效的运卖出去而不出问题，村长作出如下规定：“用规格刚好 20 cm * 20 cm * 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，苹果有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货。
• DNS：突然一天，郭德纲想吃苹果，就跟于谦说，“我听说盘溪新村（域名）的苹果好，要他们那个套餐一选项啊！”，于谦一听，得，也不知道盘溪新村在哪，打开地图查（DNS）吧，一查，好嘛，江苏省苏州市（IP 地址），于是于谦去了苏州，找了村子，告诉村长，要套餐一，要用顺丰快递，并且留下了北京德云社的地址。
• HTTP：过了几天，德云社的人一看，有快递来了，来了这么一句，“只收‘顺丰’，拒收其他快递”。司机忙说，“是顺丰，是顺丰”，这才对上暗号，德云社的人收下了货。
• 组成文件：送来的货可不止一车，而且也不止一种苹果，这车是红富士，那车黄富士的。
  • 代码：有点像，村长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而德云社的看说明书，知道什么样的苹果放到什么位置上，什么样苹果如何食用最佳，等等。
  • 资源：不同种类的苹果。

4.拓展

3.1 浏览器解析组成文件的顺序

当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 <link> 和 <script> 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

• 浏览器首先解析 HTML 文件，并从中识别出所有的 <link> 和 <script> 元素，获取它们指向的外部文件的链接。
• 继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。
• 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件。
• 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。

3.2 DNS解析

DNS，即域名系统，是一种用于将域名转换为IP地址的Internet服务。例如，如果你要访问www.example.com网站，你的计算机需要使用DNS服务来解析这个域名，将其转换为实际的IP地址，以便能够连接到网站。