第5讲网络、HTTP/HTML/CSS - 2018

计算机网络（Networking）

今天，我们将从用C构建命令行程序过度到web应用程序，尽管我们将看到新的语言，但许多想法和概念将保持不变。
TCP/IP（Transmission Control Protocol and Internet Protocol：传输控制协议和互联网协议）是两个协议，或者说是规定计算机如何通信的规则。现代互联网依赖这些协议来工作。
过去我们可能用邮件手写信件。在信封的外面，我们需要写一个地址，包括姓名、街道和城市等信息。我们也写自己的名字和地址作为寄信人的地址。
每个地址也应该唯一地标识一个建筑或地方。
我们的计算机也有在互联网上唯一标识它们的地址，称为IP地址。在IPv4或者协议的版本4中，这些地址是格式为#.#.#.#的数字。#，在0到255质检用点分隔的四个数字。为了表示每个数字（有 256 个可能的值），我们需要恰好8位，因此每个IP地址由32位组成。但是用32位，我们只能表示40亿个值。由于有超过40亿太设备连接到互联网上，我们有了一个更新版本的协议，IPv6，它有128位地址，世界正开始向它过渡。
服务器，也就是一台连接到互联网上的计算机，它可以监听和相应信息，可以提供许多服务，比兔网站或电子邮件。要指定消息用于特定的服务，例如web浏览，另一个成为端口号的数字被添加到地址中。例如，HTTP用于浏览网站，通常使用80端口进行通信。因此，包含消息的信封可能使用1.2.3.4：80作为目的地址，使用5.6.7.8作为返回地址。还有其他的复杂性，但这是计算机如何在网络上通信的基础。
假设我们想访问一个URL，Uniform Resource Locator，比如http://www.example.com/。原来还要另一种技术叫作DNS，域名系统，许多互联网供应商和组织都在维护，它可以将域名（如example.com）转换成IP地址。
- 除了.com之外，现在实际上有数百个顶级域名，比如.net、.org、.us、.uk等等。
- 域名前面的www实际上是一个子域名，可能会创建很多个子域名，每个都指向不同的服务器或者服务集。它不是必须的，www只在约定中使用。例如，麻省理工学院使用web.mit.edu作为他们的主网站地址。
- 最后的/意味着我们正在请求站点的根页面，通常是index.html，而.html表示该文件是用HTML编写的，我们很快就会看到这种语言。
当我们在浏览器中输入URL时，我们的浏览器首先使用DNS来查找该域的IP地址，然后发送一个请求（在虚拟信封中）到该网站的正确IP地址。当那个地址的服务器响应时，它会将网站的内容以虚拟信封的形式发送给我们，目的是我们的地址。

HTTP

HTTP，Hypertext Transfer Protocol(超文本传输协议),另一套通信规则和约定。例如，人们在第一次（或以后）见面时可能有握手的习惯。当我们的浏览器也通过HTTP与web服务器通信时，两台计算机都遵循一个协议来发出请求和相应。
一个网页请求看起来像这样：
```
GET / HTTP/1.1
Host: www.example.com
...
```
- GET是一个HTTP动词，标识我们想获取一些资源。/表示我们正在寻找默认页面，HTTP/1.1表示浏览器正在使用的HTTP版本。
- 然后，包括Host: www.example.com ，因为同一台服务器可能正在监听和相应多个网站的请求。还有其他的信息包括在...，以帮助服务器适当地响应我们。
来自服务器的响应可能像这样：
```
HTTP/1.1 200 OK
Content-Type: text/html
...
```
- 首先，我们返回HTTP版本，HTTP/1.1。然后，200是一个数字代码，表示OK，即服务器能够理解并响应请求。
- Content-Type：text/html 表示响应的内容是html语言的文本格式。
我们可以打开一个浏览器，如Chrome，并打开开发人员工具查看（F12或者右键—>检查）—>开发人员—>开发人员工具。一个面板将打开：
- 我们可以点击网络选项卡（Network），如果我们在地址栏中输入 harvard.edu ，然后回车，很多事情会很快发生。我们可以滚动到最上面，点击对 harvard.edu 的第一个请求，在右边面板的 “请求头”下，浏览器确实发送了一个请求，以我们期望的方式开:
  - 我们可以在同一个面板中滚动，看到响应头略有不同：
  - 响应代码301似乎写着“Moved Permanently 永久移动”。如果我们往下看"Location:"，我们会看到新的位置是 https://www.harvard.edu。有一个www，还有一个不同的协议，HTTPS，它会更安全地加密我们的通信。
- 另一个HTTP代码404是"Not Found"如果我们试图获取服务器找不到URL，我们就会得到这个。下面是一些有趣的例子：
  - 200 OK
  - 301 Moved Permanently
  - 302 Found
  - 304 Not Modified
  - 401 Unauthorized
  - 403 Forbidden
  - 404 Not Found
  - 418 I'm a Teapot
  - 500 Internal Server Error
  - ...
HTML
- 现在我们的计算机可以通信了，我们可以开始考虑创建网站所包含的内容了。
- HTML，Hypertext Markup Language（超文本标记语言），是编写网页的标准。它由浏览器从上到下解释，每一行都可能有一些文本、图像或样式说明。
- 在我们的浏览器中，我们可以在网站上单击“查看”>“开发人员”>“查看源代码”以查看驱动网站的HTML：
  - 我们可以看到这知识文本，第一行<!DOCTYPE html>向浏览器表明该页面是用HTML编写的。
  - 然后，我们会看到线条和缩进的模式，以及许多以<开头并以>结尾的标签。首先，我们有<html>标签，嵌套在里面的是一个<head>标签，它包含有关网页的信息，这些信息不一定会出现。
  - 然后，我们最终会看到一个<body>标签，其中包含网页的内容。
- 我们可以看到一个简单例子：
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            hello, title
        </title>
    </head>
    <body>
        hello, body
    </body>
</html>
```
- 在网页的<head>内，我们有一个<title>标签，用于指示我们网页的标题“hello,title”。然后，我们有一行带有</title>的行，它是一个结束标记，表示标题的结尾。
- 请注意，缩进和开始和结束标记是对称的。就像在C中一样，空格不是必需的，但在风格上很重要。
- 这个页面的内容只是“hello,body”。