哈佛-CS50-计算机科学导论笔记-七-

哈佛 CS50 计算机科学导论笔记（七）

哈佛CS50-CS ｜ 计算机科学导论(2020·完整版) - P16：L8- 网络编程全指南（网络协议、HTML、CSS、JavaScript） - ShowMeAI - BV1Hh411W7Up

好的，这里是CS 50，这是第八周，即万圣节周。感谢我们在美国话剧院的朋友们，今天舞台看起来很棒，有一些特殊的灯光和角色。上周你们第一次探索了50ville，寻找失踪的橡皮鸭。

罪魁祸首已经找到。让我说，有一个小家伙想打个招呼。他甚至为这个场合精心打扮了一下。不过，谢谢大家的辛勤工作。我们将过渡到网页编程的世界，动机是过去几周。

我们编写的几乎所有代码都集中在命令行程序上。

编译你的代码，但一般来说只是与一个相当普通、闪烁的提示进行文本交互。你我每天使用的软件，通常是以笔记本电脑、浏览器或移动设备或APP的形式出现。今天，我们开始过渡到一套语言，而不是技术。

通过这些，你可以开始将过去几周的知识和思维模型应用于一个更熟悉、更加图形化的领域。在接下来的几周里，我们将专注于网页编程，使用的语言是HTML、CSS和JavaScript。

今天网站的构建方式，以及今天手机上的移动应用或APP的构建方式。但为了到达这个故事的那个点，我们需要考虑我们将运行这些网站或网页应用的框架。

这就引出了互联网的问题。究竟什么是互联网？

我们每天都在使用它，但让我们从观众中挑几位志愿者来为我们定义一下我们所说的互联网。我们每个人现在都在互联网上，但如果你退一步思考一下，互联网究竟是什么？

你如何为比你更少技术的人定义它，或者你会如何定义它？

就像全球所有计算机构成的网络一样，它们在接收信息的同时也在提供信息，完美吗？互联网就是这样一个网络的网络。如果你在家里有一个小网络，或者在公司或大学有一个大网络，然后你开始用电缆或某种无线技术将这些网络互连起来。

你得到了互联网，一个网络的网络。这实际上是所有今天应用程序运行的基础设施。因此，当你使用网页、聊天、Slack、视频会议时，你是在使用互联网。但可以把互联网视为将零和一从你传送到其他地方的底层管道。

这些应用程序最终都是以软件实现的。因此，如果我们考虑到这些计算机以某种方式互联，我们就有理由认为，作为全球社区，我们需要决定如何将数据从A点传输到B点及更远的地方。因此，在整个互联网中，有一些称为路由器的计算机。

到头来，它们可能比你我熟悉的桌面和笔记本电脑大一点。它们是相同类型的设备，配有中央处理单元（CPU），即计算机内部进行所有思考的“大脑”，以及存储器（RAM）和硬盘，数据被持久存储并呈现。

这是MIT几年前描绘的一张图像。我想展示一些互联网中最重要的对等点。因此，这里每个红点本质上代表一个路由器或一个非常重要的地方，许多电缆在此汇聚并相互连接。

这在全国的各个节点上。这种故事现在远远超出了美国，使用海底电缆和其他无线或卫星技术等。因此，可以说这是一种网状结构，所有不同计算机的互连，进而形成了全球的网络。这意味着数据可以从A点到B点的路径有很多不同的选择。

你和facebook.com或斯坦福之间并没有必要的直线联系，而是有一堆路由器，有时是少量，有时多达30个。它们会将你的数据从左到右、上下或其他方向转发，以便将数据从你传送到你试图联系的网络服务器，然后再把服务器的响应返回给你。那么这一切是如何运作的呢？

人类本质上需要聚集在一起，作为一个群体决定什么标准、什么协议？

所有这些计算机将会交流。协议不太像一种语言，而是一套约定。对了，在更健康的时代，如果我们面对面见面，可能会伸出手，你会立刻知道应该伸出手来。我们会进行一次实体握手，这就像一种人类协议。

我通过伸出手来与你建立沟通。你通过伸出手来确认这次沟通，然后这种互动就完成了。因此，我们在计算机的世界中也有这些人类协议。它们是类似的协议，但显然都是零和一。

因此，如果第一台计算机发送这个零和一的模式，另一台计算机应该用一组不同的零和一来回复。所以我们即将讨论的这些协议只是标准化了这些零和一的模式，实际上所有的消息都是往返于这些模式。

在互联网中，从A点到B点传输数据的两个最常用的协议称为 TCP/IP。TCP 和 I P 是两个独立的协议，但它们通常一起使用，因此你通常会将它们提到一起。TCP/IP。这些是你可能在 Mac 或 PC 上见过的缩写。

或者在你手机的设置中。它基本上涉及到计算机用来将数据从一个点传输到另一个点的两套规范。那么我们所说的数据是什么呢？

我们所说的从A到B移动东西是什么意思呢？这有点像老式信封。如果你想给世界上其他人发送一封信，你我可能会在早期去拿一张纸。我们会拿起一个信封，并在那张纸上写下我们的便条。

把纸放进信封，然后写下实际信息后，最重要的一步就是为其地址。在现实世界中，你会把收件人的地址通常放在信封的中间。你可能会把你的回邮地址放在信封的左上角，然后可能还有邮资。但我们人类几乎在所有邮政系统中都进行了标准化。

所以这里的隐喻是信封和其中的信息通常被称为数据包，信息包，这将是计算机的物理体现。你将使用零和一来实现这一点。所以让我们拆解一下他们用来实际放置数据、为这些信封地址并从A点发送到B点的两套规范。

首先考虑 I P，I P 代表互联网协议，如今几乎所有的 Mac、PC、iPhone、iPad 和 Android 设备都被设计为。由苹果、谷歌或其他人开发，能够理解这一点。这些公司在那些设备上编写了运行的软件，使其。

确保那些设备都支持类型。就像我所学到的，可能是某个人类教我的。这种人类习惯在早期就像是互联网协议。它只是标准化了计算机之间的地址方式。因此，在我们的物理人类世界中，如果你想给我发送一个信封，你可能会写到哈佛大学计算机科学系，地址是33 Oxford Street。

02138 U。这显然是一个唯一的邮政地址，指向校园内的计算机科学大楼，因此，如果你在加利福尼亚或其他地方投递一个信封，通过多个跳数和邮件运送等方式，它将到达那个特定地址。那么我也有类似的独特地址，称为I P。当你的电脑 Mac 或 PC 使用这种规范时。

手机等设备将数据从自身发送到另一个服务器。它在那个虚拟信封外面写上的地址是远程服务器的 IP 地址。如果我想给你发送消息，我需要弄清楚你的 IP 地址是什么。我会在这个信封的外面虚拟写下这个 IP 地址。

我可能会在这个隐喻的信封左上角写下我自己的 IP 地址，然后将其发送到互联网。这意味着什么？

这意味着我将那个信封交给最近的路由器。因此，实际上，当你在家时，你有自己的路由器。它是连接到你的有线调制解调器、DSL 调制解调器或类似设备的设备。如果你在校园里，比如哈佛或耶鲁，哈佛和耶鲁有自己的路由器。

所以你的电脑在校园内，会知道将数据交给那个设备。如果你在家使用，或者在全球其他地方，比如星巴克或机场。那么你的电脑通常知道最近的路由器在哪里，然后路由器的生命目的又是决定这个包裹是向左、向右还是向上。

为了更接近目标？但这有点像鸡和蛋。如果我想给你发送一条信息，我需要知道你的 IP 地址。但在我知道你在哪里之前，我并不知道你的 IP 地址。因此，还有一个你可能见过的缩写系统，称为 DNS。

域名系统。这是一项遍布互联网的技术，现今由 Mac、PC 和手机支持。它将我们通常称为域名或完全合格域名的内容，从那些类似英语或人类可读的字符转换为相应的 IP 地址。公司不以数字 IP 地址广告宣传其网站是有原因的。

我们都永远不会记得这些。

他们反而以 Microsoft.com、google.com 和 New York Times.com 等名称进行广告宣传。DNS 是一种你的 Mac、PC 和手机支持的技术，当人类输入这些人类可读的地址时，域名解析器将这些名称转换为 IP 地址。因此，字面意思上。

如果你输入哈佛或耶鲁。

当你在网页浏览器中输入时，你的 Mac 或 PC 会迅速查找该 IP 地址。

Web 服务器使用随 Mac 或 PC 附带的软件，将其转换为对应的 IP 地址，然后在信封的外面虚拟写上哈佛或耶鲁大学 Web 服务器的 IP 地址，然后将其发送到互联网上。因此，这些空中服务就像是你自己的 ISP（互联网服务提供商）提供的 DNA 服务。

当你在星巴克时，可能是星巴克的网络。这是你的互联网服务提供商，如Verizon或Comcast等。因此，世界也决定使用该技术。暂时还有一个缩写，TCP，TCP。或者说传输控制协议是几个问题的解决方案。其中一个是对互联网上的个别服务器来说，这通常非常方便。

为了能够同时正确处理多个事务，互联网可以做很多事情。服务器可以托管电子邮件，托管网站，托管聊天服务器，以及视频会议。这已经是你可以在软件中使用的功能的不断增长的列表。如果一个服务器能做到这一点，在财务和管理上会很好。

同时处理多项事务。实际上，它们可以。因此，当一台计算机收到其中一个虚拟信封时，而该计算机，恰好支持多个服务（如电子邮件），它会查看信封以获取一条额外的信息。

这一信息被称为端口号。R T号。它只是一个小整数，世界上已经决定用它来表示TCP领域中的特定内容。多年前，世界决定我们的计算机在IP地址后面虚拟地写上数字80，以表示这是一个请求网页的请求。

网页或443在信封外侧。如果这是一个使用称为https的安全请求网页的请求，稍后会详细说明，还有其他数字。电子邮件有其独特的号码，Zoom有其独特的号码，而你我每天可能使用的所有其他互联网服务也都有其独特的TCP端口，以便公司和个人可以让一个服务器同时处理多项事务。

但在收到这些信封中的一个时，服务器可以查看它并意识到。这不是请求电子邮件。这是请求一个网页。这是请求聊天或其他完全不同的请求。显然，TCP还处理数据的传递。它是协议的一部分，确保当你将数据从点A发送到点B时。

如果任何数据丢失，那是因为这些路由器中的某一个出现了问题，或者可能是31个路由器中的一个被压垮了，接收的包裹数量远远超过它能处理的数量。这种情况可能会发生，因为这些计算机具有。如果你通过一个路由器发送太多数据，互联网可能会变得拥堵。

你的视频可能会缓冲，其他很多症状可能会出现。因此，TCP还处理数据的重新传输过程。如果这些数据包在互联网上丢失，那确实是。

TCP 也会促使你的 Mac、PC 或手机重新发送数据。但互联网的一个显著特点是数据并不一定遵循一条特定的路径。如果你从一个人发送多个数据包到另一个人，这些数据包可能每次都走不同的路。这实际上是一个特性。

因为你可以想象服务器可能会拥堵，或者需要绕过的问题。因此，TCP 也支持其他协议和适应性解决方案来应对这个问题。

数据可能会沿这条路走。有时候也许会沿着另一条路走，但这部分原因就是为什么有时你的互联网速度会变得不稳定，因为中间的路由器可能不同，或者可能有些超负荷。因此，我们试图通过引入一些 CS 50 的工作人员来讲述这个故事。

你介意在稍后扮演一个网页浏览器的角色吗？某人的 Mac 或 PC？

你的手机向我请求，可能是一些无厘头的事情，比如让我给你一张猫的照片？

所以如果我想向某个网络服务器请求一张猫的照片，我需要给你发送一条消息，以便发送那个请求。因此，我可能会在一张纸上写下我的请求，并把这个请求放进一个信封里。然后我需要在信封上标注我们讨论过的所有信息，特别是你的 IP 地址，我可能会通过 DNS 查找。

把那个信封寄出，我想我们需要一点帮助，因为布莱恩和我在不同的地方。所以我们不能简单地把信封从一个人递给另一个人。所以让我们也请 CS 50 的工作人员来帮助，他们也在 Zoom 上参与了讨论，看看我们能否将布莱恩的请求路由过去。

谁在扮演网页浏览器的角色，而我将扮演网页服务器，以接收这个猫的请求。让我们看看能否在这里召集团队。哦，感谢 Phyllis 递给我这个信封。现在我们有的是布莱恩发给我的请求。我将打开它。

我确实看到了一条消息，里面请求了一张猫的照片，这在互联网并不罕见。如果我是网络服务器，实际上我有一份猫的照片档案，我会给布莱恩回复其中的一只猫。我需要在我的硬盘或者电脑的某个地方查找一下。

这是猫的照片，这里有一张。所以我打算把这只非常快乐的猫发送给布莱恩。我有一些自己的信封，我将把布莱恩的 IP 地址写在这个信封的中间。我会把我的 IP 地址写在这个信封的左上角，然后也许还有其他任何识别信息。然后我将把猫放进信封里，这个猫其实放不进去。

而且这实际上是非常常见的情况。每当计算机尝试传输大量数据时，无论是一个大图像，还是为了股票市场而可能更大的视频文件，将大型数据包拆分成多个小数据包通常是有利的。你可能听说过网络中立性或更专业的服务质量（QoS）主题。

网络中立性涉及计算机在优先处理数据时应做出何种决策，历史上一个共同的惯例是，我们所有人应将大型数据包分割成小型数据包。发送出去，以便与其他人的数据包交错。我们都以相同的速率到达目的地。网络中立性作为附带话题。

这关乎一些方的利益，优先考虑那些付费更多的特定公司的数据。因此，这确实涉及到这些基本原语的使用或滥用。但我试图把这幅大图塞进一个信封，这对我来说是不公平的。所以我打算真的把这幅图一分为二。基本上把数据包分成两个。

让我现在把这个放入信封，因为它会更容易适应。所以我有一份信息包给布莱恩，还有一份MAWR信息包给布莱恩。这将把这幅图像的另一半放进去，但我想我必须在把它放出去之前做点别的。

将互联网交还给菲利斯，再寄回给布莱恩。我可能需要关于这些信封的额外信息。我已经在“收件人”字段中写下了布莱恩·西普的名字。在“发件人”字段中有我的IP地址。我还写下了我应该给布莱恩使用的端口号以及我自己的回程端口。

端口号以及那些通常由我的Mac或PC决定的人。但我觉得我可能需要更多信息。我在这个信封外面还应该虚拟写些什么，以确保数据按预期接收？有什么直觉？这里假设对TCP管道没有熟悉度。

但是如果布莱恩即将收到两个信封，我或许应该给他提供什么额外的信息？

布兰登把照片的顶部和底部搞混了。因此，你需要以某种方式告诉布莱恩，这里是顶部，那是底部。也许要完美地合并它们。所以我们需要确保布莱恩知道这些数据包应该按什么顺序重新组装，以便他确实能以正确的方式，而不是错误的方式接收。大概我只需为每个数据包添加一个我们称之为序列号的内容就足够了。

这本质上是一个数字。

你可以把它看作是两个中的一个，而另一个是两个中的两个，这样，布莱恩就知道该以什么顺序重新组装数据包，更重要的是，如果其中一个或两个数据包在路由器的过程中丢失或掉落，就能有足够的信息让我们恢复它们。

根据需要重新发送数据包一或二。那么我们现在就开始吧。团队的帮助从菲莉斯开始，如果菲莉斯想继续的话。这仅仅是问题的一半。所以我现在要发送第二个数据包。实际上我会并行发送这些，但它们仍然可以沿不同的路径发送。

可能需要一点更多的时间。你想先打开你的信封并重新组装它们吗？

所以我没有信封。我想我会先打开那个写着“一个中的二”的。它是猫的上半部分。然后我会打开另一个信封，也就是“二中的二”，那是猫的下半部分。所以现在我想我有完整的猫了。

太好了，布莱恩加入了整个团队。我所说的这个协议是规范写入内容的一套约定。这是计算机如何以某种数字唯一地相互地址的方式。TCP 管理几种不同的内容，其中之一就是像 80 这样的服务编号。

不安全的网络流量是 80，安全的网络流量是 443。这确保了数据从一个点到另一个点，并由在特定服务器上运行的正确应用程序处理。

这是我们最初使用的。如果布莱恩有自己的域名，我的计算机会查找他的 I P 地址，他也需要查找我的，这样我们这些实际使用互联网的人才能进行连接。

以一种友好的方式，我不需要记住 I P 地址，这些地址只是数字，而是可以记住像 Harvard、edu 这样的东西。互联网是基础设施的根本，在此之上我们现在能够将数据从 A 点传输到 B 点。如果你对此感到舒适，我们现在可以将互联网抽象出来，仅将其视为一种。

从一个点到另一个点的数据传输机制。因此，只要我们现在可以假设我们有这一基本的公共服务，可以将数据从一个点传输。

现在我们可以在软件和其他语言上建立基础，并将其用于有趣的事情。但在我们继续做这些事情之前，有关 TCP、I P、DNS、互联网、路由器或其他新术语的任何问题或疑惑，我们可以澄清。我有个问题。

那么购物信息会产生任何问题吗？因为我不知道。一条信息可能在那里待两秒，而另一条可能待三秒。这对用户会造成问题吗？这些数据包可以花费不同的时间。尽管我确实规定它们应该大致在同一时间发往菲利斯的手中。

即使她需要将它们传递到两个不同的方向，也绝对可能会有延迟。如果数据包从A点到B点花费超过200毫秒，人们开始注意到延迟。看起来确实有一点延迟。如果是两到三秒，你在那个时候真的会注意到。

这不一定是个问题。希望布莱恩会耐心等待猫的下半部分，如果他最终只收到一个数据包。计算机可能会有点焦虑，会让我重新传输一个数据包，如果它。

如果在五秒后没有到达，这些超时通常可以由在个人电脑上运行的软件指定。但在那时，你我肯定会注意到区别。其他问题或困惑。看起来所有问题都已经得到解答。所以如果我们现在在根本上具备这种能力，从A点获取数据到B点，布莱恩给我发送的信封里面到底有什么，以及里面是什么。

我发给他的信封，除了那张猫的照片，还有什么？

我们过渡到另一种语言或另一种协议，称为http超文本传输协议。这是你可能见过或输入过很多次的缩写，出现在URL（统一资源定位符）的开头，这些是你我用来实际查找的工具。

我们实际上想从互联网请求哪个网站或哪个图像。所以网络，全球互联网实际上只是许多在互联网之上运行的服务之一。网络为我们提供网页。Zoom提供视频会议。其他工具提供文本聊天、语音聊天等。所以网络实际上只是互联网之上的一个应用。

毫无疑问，这是最流行的应用程序，但它实际上只是一个应用。它是一个使用底层管道的服务。所以http是一个不同的协议，真正管理这些信封内的内容。TCP/IP管理信封外的内容。Http管理信封内的内容。

假设我们谈论的是网页浏览器和网页服务器，而不是视频会议或其他东西。所以使用http，它带有几种不同的命令或相当有限的词汇，其中两个是最重要的术语，就是get和post，这两个字面上是英语动词，它们是这两个命令。

那么http支持的内容以及布莱恩可能在那个信封里做的事情。

他可能真的写下了“获取猫”或类似的东西。邮寄用于其他应用程序，我们很快会讲到。但是“获取”是关键字。这确实是浏览器如何请求或获取来自服务器的信息。因此，在布莱恩寄给我的信封中，英文单词“获取”可能是写的。

然后是cat J。Peg或类似的东西。可能还有更多的信息，但http的本质意味着如果布莱恩想从我这里获取某些东西，而他是浏览器而我是服务器。他应该用标准化的动词get开始他的请求，后面跟着他想获取的文件名。那么让我们现在把这个放入更熟悉的女孩的上下文中。

从这个女孩身上得到一种标准形式。让我们强调一下它的几个特点。https。你在网络上看到这个。

它通常会自动出现在你浏览器的地址栏中，因为浏览器或网络服务器是。S只是指http的安全版本，我们下周及以后会再讨论这个安全话题。但是在http的上下文中，这只是意味着我和布莱恩之间的数据，以及反向数据是。

不知何故，它比凯撒密码或其他密码更好。它在数学上复杂得多。但它本质上只是将信息进行混淆，以便布莱恩知道他在请求一只猫。知道他在请求一只猫。但如果你们中的任何一个人或者任何一个TFC在扮演路由器的角色时，恶意地或者真的打开了信封而不是将其交给下一个工作人员。

他们不会理解信封里的内容，因为它看起来类似于凯撒密码和其他随机的零。所以https只是意味着这些数据包的内容是加密的。还有什么是关于这些女孩的显著特点？这就是我们所称的域名。大多数人很可能知道什么是域名。

通常是两个短语，某个点其他某个东西。一个例子是点com，点edu和如今的数百万其他域名。这就是我们通常称之为顶级域名。这只是历史上你试图得到的那种类型的网站。

评论商业人教育点net意味着某种网络。

一个组织不再真的是这样的情况。如今有数百，甚至可能成千上万的顶级域名，你可以购买域名。

有时候会试图对事物进行分类，但大多数顶级域名周围并没有硬性规则。你必须是认可的教育机构才能使用点edu。你必须在U.S.军事中才能使用点mil。在其他国家也有类似的限制，它们有自己两字符的国家代码TLD，如点u。

K 代表英国，jp 代表日本，还有许多其他国家。每个国家都可以根据自己的需要进行标准化。但你和我可以购买 dot com，或 go dot net dot us 等等。你可以看到几乎详尽的列表。这只是为了对网站类型进行分类。

这是一个前缀，通常被称为主机名，而 www 只是一个人类惯例。几乎所有互联网上拥有这样人类友好名称的服务器，比如 www dot example dot com，都是为了向用户传达，这必定是一个网页服务器，而不是邮件服务器、聊天服务器或其他什么。

这并不是严格要求的。这只是人类的惯例，你可能甚至不再费心输入这个了。但这是一个历史特征，能够给人类提供视觉提示，帮助判断服务器的类型。因此，除了这些，还有一个隐藏的信息。

如果你只是想访问 example dot com 的首页，你可能只需输入这个网址，甚至只需输入 example dot com 然后按下 Enter，让浏览器重定向你，带你到这个网址的规范形式。但是通常你实际上是在请求一个特定的文件，如果没有的话。

提到的文件名通常是 index html。也可能是其他的，取决于所使用的语言或服务器技术。但你输入的网址的末尾通常是一个文件名，比如可能会特别请求 Cat J Peg。但如果他请求的不是一张猫的图片，而是一个完整的网页，包含文本和其他内容。

很可能有一个隐含的文件名。通常是 index html。这一点很重要，因为当我们查看这个封装时，这是一条需要包含在内的信息。那么让我们来看看一些示例的 HTTP 请求和响应。

更技术性地深入了解 Brian 和我以及工作人员刚才的表现。技术上讲，当 Brian 向我请求那只猫时，他在这个封装内不仅写了关键词 get 和类似 Cat 的内容。他还指定了其他一些内容，现在让我们泛化一下，远离猫这个话题，提出这个。

HTTP 请求就是，这些虚拟封装字面上是请求，比如 get 后面跟着斜杠。如果你不想要猫，只想要默认的首页，后面跟着 HTTP 的版本说明。浏览器和服务器应该使用的版本，1.1 是相当常见的，2 也越来越常见，3 现在也在使用中。

但协议有不同的版本。就像人类在握手时逐渐细化了含义。这些协议版本随着时间的推移而演变，但也有像这样的格式。主机冒号 www dot example dot com，因为以防万一我特别讲究。

向不仅支持example.com，还可能支持Harvard.edu和Yale.edu的服务器发送请求。如今，公司可以在同一台服务器上托管多个网站和多个域名。

这个小线索在信封里确保它发送到example.com或Harvard。你或Yale与所有这些实体共享同一台物理服务器，因此更具体地说，请求可能看起来是这样的。如果你不是只请求默认的主页，而是想要特定的文件。

可能会显示为斜杠index HTML，那么我的响应看起来是什么样的？

所以我收到了Brian的信封。现在我要回应我的一个或两个或多个信封，里面将有一些猫的部分，但根据协议还有一些附加信息。所以我的响应，就像在现实世界中一样，如果我看到Brian发起握手，我会伸出我的手。我要回应类似这样的内容，这提醒浏览器我说的版本号。

这是状态代码，后面跟着一个简短的摘要，比如，逐一放在这些信封里。我还在信封里提到了内容类型。如果是网页，我会写text/html。

如果是JPEG，我可能会说image/jpeg。还有不同的内容类型，也被称为MIME类型，适用于世界上所有不同的文件格式。响应并不总是那么简单，浏览器请求信息，服务器回应请求的信息。

有时用户会走错地方。我想这就是浏览器访问www.harvard.dot的情况，响应可能并不一定是好的。事实上，它可能不是状态代码200，我们可以看到这一点。

让我在我的屏幕上打开一个浏览器窗口，带我去harvard.edu。我将继续在URL栏中输入http://www.harvard。

dot e d 你现在进入了吗？这一切发生得相当快。但是如果我点击URL栏，这个被Chrome简化或缩短的地方，瞬间我注意到我实际上到达了某个地方。我的浏览器没有让我停留在http。它将我重定向到https。这可能是哈佛故意的。

他们更希望我安全访问，以便如果我在阅读文章或其他内容，这实在是没有别人可以插手的事情。中间没有路由器能够看到这一点。因此哈佛以某种方式将我从http重定向到了https。我该如何看到这一点？

嵌入在Chrome、Edge、Firefox和Safari中的所有现代浏览器，通常都有开发者工具，有时你需要手动启用。但是这些开发者工具是如此强大，让你作为用户或现在作为程序员，可以实际看到并理解这些浏览器和服务器的内部运作。

所以我将专门在Chrome中进行这个操作。

我要去查看开发者，然后进入开发者工具。如果你是Chrome用户，这个菜单选项一直存在，即使你从未注意到。所以请在家里也试试看，然后注意到它会在右上角弹出。我将通过点击点将其移到底部。

我将开发者工具移动到屏幕底部，以便我们可以更宽广地查看内容。然后我会点击上面的网络选项卡。当我点击这里的网络选项卡时，我会看到与我上一个请求相关的大量信息。所以我会重新执行这个请求。让我回到U。

R L Bar，让我再在隐身模式下做一次验证。

即使你可能习惯使用隐身模式，如果你不希望浏览器记住你访问过的地方或登录的信息，隐身模式对开发者来说是极其强大的工具，可以让你重置浏览器状态，仿佛是第一次使用，没有任何先前的网络浏览历史。

所以我现在要在隐身模式下再次执行这个操作，之前已经打开了开发者工具。Http://www.harvard.edu。

按下回车后，很多信息飞快地在窗口中出现，其中一些是性能图表。因此，针对你之前关于时间量的提问，你可以看到一些请求的响应时间从几毫秒到超过1000毫秒不等。但我目前关心的是下面这个相当晦涩的列表。

许多内容迅速飞过屏幕。如果我放大底部，简单访问哈佛大学会导致每个请求70次HTTP请求，左下角提到，这导致传输了6.8MB的信息，耗时相当可怕的11.95秒。所以，相对而言，这样的速度很慢，绝对而言也是。所以这里的要点是什么？

每次你访问一个网页时，不仅仅是网页本身，里面的所有文字，还有可能包含的图片、音乐等，所有这些内容都是单独下载的。因此，如果布莱恩问我是否能提供像课程主页网站那样的完整网页，我可能不会只回复一个或两个信封。

我可能会回复70个信封，包含组成CS50 Zone网站的每个媒体的响应，或者，我们先关注这些请求中的第一个。如果我查看这里在Chrome中的第一行，我会看到我第一次访问的提醒。但注意这里的状态栏是301，301移动。

事实证明，除了200之外还有其他数字告诉浏览器该做什么，200仅意味着好的，这里是你请求的数据。301意味着你请求的内容已永久移动到另一个位置。所以让我先点击这一行，你会看到一整套不同的内容。我将点击这里的头。现在让我定义一个术语，当Brian和我在这些内容中使用http时。

信封中，我写下像get slash http 1.1或host www.example.com这样的内容。每一行文本被称为http头。它是信封内部的一行文本。所以我们在这里看到的是Chrome对这些头的总结。让我来查看一下我的请求。我将点击查看源代码。

我可以清楚地看到我的浏览器发送到的原始请求。www.harvard.edu/，你能理解slash http 1.1，Host www.harvard.edu，然后还有一堆我们暂时不理会的其他内容。但这些都是http头。如果我向上滚动，我们来看一下响应头。从哈佛到我笔记本的不同信封中返回的内容，这里注意到的是http 1.1。

这是301移动永久。这是对我的浏览器的提示，表示你访问的URL没有内容。你需要访问另一个位置。为了知道我需要去哪里，我需要向下滚动找到这个头。注意响应中的第三行是location: https://www.harvard。

这就是返回的信封包含的线索，告诉我我们已经永久转移到网站的安全版本。如果我现在缩小视图并点击这个小X来关闭这些标签，你会看到我的浏览器自动发送的下一个请求，是去别的地方。

如果我在这个请求中向下滚动，网址是https://www.harvard.edu，而这次的响应在这个一般摘要下确实是。

这只是一个简单的机制，它允许浏览器和服务器之间进行通信，以便将它们从一个位置发送到另一个位置。让我稍微把这个变得更熟悉一些。你可能没有明确地见过这个，因为作为一个人，你几乎不会看到数字31或移动到永久的位置。

现在你是一位使用这些开发者工具的程序员。但你可能看到过另一个数字。如果你想参与聊天，关于网页和数字，有没有人见过可能现在看起来更有意义的数字？很多人说 404。

我也见过 505 和 502，0404 是人类的代码。

多年前采用的代码只表示找不到。因此，如果你访问了一个错误的页面，或者一个不再存在的旧页面，比如一个被删除的旧猫，服务器将不会以 200 响应，而是以 404 找不到来告诉你的浏览器显示某种错误信息。奇怪的是，多年前的浏览器并不是特别用户友好。

然后浏览器只是告诉我们人类 4444，这并不是很用户友好。但归根结底，这都是回应信封中的一个小提示，表明出现了问题，找不到某些东西。而且有一整套这些状态码，这绝对不是你需要记住的。

但随着我们越来越专注于网页编程，你会自然熟悉其中的一些。这还有其他方法可以将用户从一个地方重定向到另一个地方，32 和 307 可以用于效率。服务器有时会以 304 响应，这基本上意味着你已经问过我了。

服务器上的猫没有变化。使用你自己的猫的副本。如果布莱恩自己的浏览器聪明的话，它会缓存（C a C h e）他刚从我这里下载的猫，这样如果布莱恩点击重新加载或再次访问同一网站并想再次查看猫。

他的浏览器加载本地副本，而不是打扰我这个网页服务器并浪费时间。发送另一个猫的请求 304 或 404 只会说猫是一样的。使用你自己的本地副本。然后你可能见过其他的 401 或 403，都是因为未正确登录或类似的问题，500 实际上是坏的。

我几乎可以保证，在接下来的几周里，你们所有人都会经历你们的第一次 http。这将是下周，你的代码出错了，实际上写了有问题的 python 代码。这意味着整个服务器不知道该怎么做。

这是一个内部服务器错误，可以修复并帮助你调试。这种情况也相当常见。503 仅表示服务器可能在某种方式上超载。因此服务不可用，还有其他状态码。

所以我们实际上可以在这方面玩一点乐子，还有几个不同的方向。

事实证明，如果我们发送这个 http 请求，我们可以查看返回的内容，让我代替使用浏览器来执行这个操作。

我打算使用一个命令行工具，这通常会更清晰，因为我不需要操心所有这些按钮。让我使用一个叫 Curl 的程序，Curl 的目的就是连接到一个 URL，它不会烦恼地显示网页或任何内容。只会给我显示 HTTP 头，如果我使用一个命令行参数 dash Capital。

我现在要继续访问 HTTP colon slash slash safety。school dot org 的内容，我要进入。这是我的 Mac 现在发送一个信封到 safety school dot or，里面包含请求主页的 get 动词。可以想象，它将回复我另一个信封，里面包含某种响应。

也许是 200。也许是其他的。

看起来请原谅，可能安全学校的 Orc 已经永久迁移。根据这个 301 到新的位置。

Www dot gail dot e d u 对不起。

如果我复制这个网址，我们可以这样做，让我进入浏览器。我会再次使用隐身模式，这样就没有任何历史记录。

输入，以及很多视觉效果。正如标题所暗示的。这则笑话的有趣之处在于，网上有人已经为域名支付了费用。安全学校或者说，已经 20 年了。这个笑话唯一的作用是重定向一个域名。让我继续从安全学校转到 Harvard sucks dot org。

这个网站也存在，而且对面有人已经托管这个网站一段时间了。

如果你去见那个女孩，咱们去哈佛，sucks dot org 的入口。你实际上会看到一个完整的网站。所以耶鲁的学生们真的全力以赴，你实际上可以看到一个惊人的黑客作品。在 Harvard sucks dot org 上。

有一个旧的 YouTube 视频，展示了几年前在哈佛耶鲁橄榄球比赛中发生的一个惊人的黑客或恶作剧，骗我们拼出一个位图上的内容：我们烂。因此，将这两个基本的 HTTP 消息连接起来有点牵强。但这确实与这些非常简单的基本元素有关。让我再指出一件事。

我们可能还会看到 HTTP 请求形式中更复杂的首行，其中你不仅请求。斜杠默认主页。你并不是在请求斜杠 cat J peg 或斜杠 index dot html。可能还有问号和等号，请注意。这是我的 Mac、PC 或手机可能发送给谷歌的信封摘录。

dot com 请求猫的图片。事实上。

让我在我的浏览器上做这个。让我访问 https。我根本不打算使用不安全的版本。我将明确地访问 google.com/search?Q=cats。

所以这是我 Mac 将翻译的人类版本 URL。它会转换成这个将被放入虚拟信封的低级消息。好了，我要输入，瞧，我现在确实看到一大堆猫的照片，包括一些来自表现不佳的电影的可怕照片。

这就是说，一旦你理解了 URL 格式，你就可以开始向服务器传递输入。这里是我们如何将过去几周与未来几周连接起来。当我们访问像哈佛大学、耶鲁大学这样的网页时，我们只是访问静态网页内容。我们实际上没有像使用 GET 字符串或输入那样提供用户输入。

或者我们写的任何命令行程序。但事实证明，URL 确实支持用户输入并且是标准化的。如果你看到一个问号，然后是一个变量名，比如 Q，然后是一个等号，再加上一个单词，比如 cats。

这就像基于网页的命令行程序模拟。当被问到 Q 的值时，人类输入 cats。

这就是说，有一种方法可以使用 URL 实际允许我们传递输入。这就是当你访问 google.com 时发生的事情。但这归结于理解这些 URL。在我们开始在这个基础设施上构建自己的解决方案之前。

现在有任何问题吗，关于 http、状态代码或我们到目前为止见过的任何东西？任何事情都可以？过渡到圣地亚哥。所以当你想发布网页时，为什么你必须购买域名？是因为你在使用某种内存和服务器吗？

这是一个很好的问题。为什么你必须购买域名？这实际上归结于资本主义。运营互联网的某些方面是有成本的。

互联网的确涉及各个方面。有一些非营利组织和志愿者历史上帮助管理它。运营互联网是需要一定开销的。

运行主要的 DNS 服务器和其他功能，所以有一些所谓的东西。

互联网注册商，类似于大学注册处，其目的是允许人们基本上以年度为基础租用域名。

这并不是永久归你所有。

一旦续费，每一到两年或三年一次。

它的价格可能从几美元到几百甚至几千美元不等。我们可以深入讨论域名的相关问题。

如果你想到一个非常酷的词，然后购买了该域名，而其他人也想要它。

这里有资本主义的运作，可能会让你将域名出售给其他人。

但在某种程度上，它有助于严格规范谁可以注册。

注册域名似乎给所有域名施加了一些下行压力，以免它们全部消失。如果你可以免费注册任意数量的域名，那还有其他问题吗？

关于不仅是HTTP，还有TCP/IP协议或今天的字母汤中的其他任何内容的澄清。聊天中有个问题。如果你有多个数据包要从一个地方发送到另一个地方，它们是否必须一个接一个地发送？还是可以同时发送所有数据包？

我们并不认为人类能很好地做到这一点，之前在Zoom中有些舞蹈。于是我们通过教学一次发送一个数据包。

计算机通常会同时传送所有这些数据包。它们会依次序列化，但会非常快速地发生。碰巧的是，它们可能都通过教学助手作为路由器走同一条路线。

或者它们可能会朝不同的方向走，具体取决于互联网此时的拥堵程度或繁忙程度。它们可能会按顺序到达。这就是布赖恩需要知道信封外部序列号的原因，以便他可以重新排列它们。

以正确的顺序发送。路由器如何知道将特定的数据包发送到哪个方向？

真是个好问题，作家们是如何知道的，早在那时？

在某些情况下，它是硬编码的。你可以把路由器想象成在内存中有一个类似Excel电子表格的东西，至少有两列，一列是IP地址，另一列是应该发送的方向，比如左右上下，电缆的走向。但你可以从隐喻的角度来理解。

它告诉路由器，如果你接收到这个IP地址的数据，就通过这根电缆发送；如果是这个IP地址，就通过那根电缆发送。这些电缆都连接到同一城市中的其他路由器，以及跨越海洋连接到其他城市的终点。这会非常麻烦。

如果人类必须手动配置所有的互连。我们刚刚看到的Mitt地图。因此，确实存在其他协议，我们在这堂课中不会花时间讨论，但那些路由器依赖于这些协议以动态适应。有一些协议会判断我的数据包是否突然无法通过。

我将开始动态地进行路由。路由器会判断那似乎不是一个好的目的地。

因为我没有收到任何响应，或者花了太长时间才得到回复。因此有一些协议决定你是否可以动态地改变那些所谓的路由表。

我之前提到的电子表格。因此，在这一点上，我们现在有一个称为互联网的基础设施，允许我们通过在信封外部写地址和端口号，将信息数据包从A点发送到B点。我们还有一个称为HTTP的协议，专门用于网页浏览器和网页服务器，与视频分开。

它们有自己的一套约定和协议。但我们有一个机制来请求信息并以信息回应。我们从问题中知道，如何用猫进行回应，这只是一串位。无论是位图还是其他东西。

但我们还没有看到实际网页的样子。如果我们更深入地查看我发送给布莱恩的信封，而他又将其发送给我，你从哈佛收到的回应，以及我们从耶鲁收到的回应，我们会看到另一种语言。这并不是一种编程语言。

它被称为标记语言，这意味着它更多地关乎美学而非逻辑。而且还会有其他几种语言被嵌套其中，CSS层叠样式表，它是一种正规的编程语言。但我们先休息五分钟，我们将学习如何制作网页。

因此，当你访问一个网站请求主页或特定文件时，虚拟信封的内部内容是什么，稍微深入一下HDP。服务器返回的标题。该语言称为HTML超文本标记语言。

这确实不是一种编程语言，这意味着没有循环，没有条件。

它实际上没有函数或变量。这只是文本，告诉浏览器以相当细致的方式从上到下，从左到右，显示什么以及如何显示。

让我们看看一些示例。HTML 页面将包含两种不同的概念。

我们称之为标签或元素，以及属性。

这里可能是我们能制作的最简单的网页，这就是 HTML 本身。你会看到它是结构化的，并且有一种对称的方式。某些内容像在适当的编程语言中那样缩进。但这里的确有某种对称性。

让我们逐步理清我们在这里看到的内容。这第一行被称为文档类型声明。长话短说，每当制作现代网页时，这应该是你文件的第一行。无论如何，这表明你和我正在使用最新版本的 HTML，即版本五。随着 HTML 本身的演变，这一行可能会改变。下面注意一对我们将称之为标签的内容。标签是开括号之间的内容。

我们可以从一个词，如 HTML，或者一些简洁的短语开始，可选地。像这样一个词和一个等号，后面可能还有一些带引号的内容。这里是我们的第一个 HTML 标签，这个标签是 HTML 标签。它的工作方式如下。当浏览器收到一个包含文本的信封时。

它首先读取第一行并说，这个文件包含 HTML 版本五。接下来是什么？这是网页的内容。浏览器来自 HTML。请注意，这里有点与该声明相反。当你到达文件的末尾时。你会看到一个类似的标签，但前面有一个斜杠。

如果我们将其视为一个开放标签，或者如果你将其视为起始标签，这就是结束标签，大多数标签确实有这种对称性。打开它们一次后，理想情况下你应该在适当的顺序中关闭它们。请注意，关闭标签时你不必重复其他内容。

你只需提到标签的名称，以保持简洁。HTML 就是这样。里面有什么呢？如果我们往下看，你会看到这里有一个东西，这就是我们将称之为属性的内容。属性往往是简短的、简洁的短语，对特定标签具有特殊含义。这些特定的属性。

如果你阅读该语言的文档，HTML 会说，如果你在 HTML 标签中添加 Lang 等于引号中的某个内容，这将是浏览器的线索，告诉它，接下来是 HTML。顺便提一下。该网页的内容默认是英文，E N。世界上每种语言都有自己的两位或三位字符编码。

可以放置在这些引号内的字符代码将标准化浏览器所解释的内容。现在很有用，例如浏览器中的翻译功能。它知道页面用什么语言编写，因此可以帮助你将其翻译为你所说的语言。这里有两对标签，即头部标签和主体标签。

我同时突出显示了它们，因为你可以将这两个视为HTML标签的子项。因此，如果我们借用家庭树和某种层级的比喻，想象HTML标签是父项。这个父项有两个子项，头部标签和主体标签。

每个标签都分别打开和关闭。我们考虑第一个，即头部标签。里面的内容，你现在可能猜到了，是标题标签，将表示我们正在编写的网页的标题。这个网页的标题将是字面上的，也就是“你好”。

所以这就是你在这个网页标签中看到的内容。让我们稍微回顾一下，现在看看HTML标签的第二个子标签，即所谓的主体标签。这将是网页的大矩形区域，也称为主体或视口。在这里，我们看到该矩形区域的内容将是字面上的。

这是一个相对简单的网页的HTML，其标签栏标题是“你好，标题”，而其主体在大的矩形区域中，称为主体。现在明确指出，我们可以将这一切视为一个数据结构，即使它只是包裹内的文本，自上而下、从左到右读取。

浏览器在你的笔记本电脑、台式机或手机上实际上要做的事情是构建一个内存中的数据结构。所以，编写Chrome的微软或编写Safari的苹果，写了代码从上到下、从左到右读取HTML，就像一个长字符串，解析它，即分析它并将其构建到计算机的内存中。

这样的树状数据结构就像是为问题五构建的。在内存中构建自己的哈希表，以处理原本只是一个大型文本文件的单词。因此，你可以看到这里的层级。如果将整个文件视为所谓的文档，将绘制一个节点，而该节点的第一个也是唯一的子项就是HTML标签。

每个网页都必须以HTML标签开始。它有两个子项，正如我所提到的，头部和主体。头部有一个标题子项，而标题本身也有一个子项，那就是文本。为了稍微挑剔一下，我故意将这些节点绘制成略微不同的形状，以表示HTML头部、标题和主体。

确实，所有的标签都被打开和关闭了。这些椭圆形的只是文本。那些并不在标签内部，那些本身并不是标签。这只是这里和这里的原始文本。而文档注释是唯一一个随机的。这是唯一一个会以感叹号开头的内容。通常，除非你有我们所称的 HTML 注释。

这些只是我们看到和理解的自我备注。在 Python 中也有类似的语法。如果这是我们能制作的最简单的网页，我们该在哪里制作呢？

所以你当然可以打开你的 Mac 或 PC，打开像 text edit 或 note pad X 这样的程序，输入这些内容。保存文件并在浏览器中打开。但这并不太有趣，因为如果你只是在你的 Mac 或 PC 上保存一个 HTML 文件。你将 literalmente 是世界上唯一一个能打开它的人。

你想要一个服务器，这样你就可以编写和保存你的 HTML，以便其他人可以通过互联网访问该文件。我们都有一个名为 CS 50 的工具，实际上这是一个用于编写代码的 Web 工具，而我们现在开始编写的代码恰好是 HTML。所以让我来做这个。继续打开一个新文件。

我将称这个文件为 hello dot html dot。

作为常规文件扩展名，让我重新输入一下。所以 doc type HTML 表示。这里是版本五 html Lang 等于 quote unquote e n。现在注意，IDE 正在为我做什么，视你的偏好而定，好的或坏的。它会尝试为你完成你的想法，这样你可以少输入一些。

这越来越成为集成开发环境（IEDs）的一个特性，因为现在我可以大约输入一半的内容。我将打开页面的 head，注意它已自动关闭。我将打开页面的 title，它也会自动关闭。让我来做一些像 hello title 的事情。

然后在 head 标签外面，我会添加我的 body 标签，并写上 Hello，逗号 body。从严格意义上讲，这种缩进并不是必需的。如果我想稍微简洁一点，不用那么多行。这完全是合理的，而且可能也很合理。如果我有一个非常长的标题。

我可能应该把它移到自己的一行。这些细节对计算机来说并不重要，对浏览器来说也是。可是它们确实让它更美观，也更容易让我这个人，假设你也是，去阅读。所以我已经保存了这个文件。在过去我会使用 make for C，或者我会使用 Python for Python。

但这两者都不适用，因为我们并不是在编写或运行代码。我现在想访问这个网页，我需要一个浏览器，我已经准备好了。我可以在我的 Mac 上使用 Chrome、Safari 等。但我也需要一个服务器。结果发现 CS 50 ID 本身就是一个我们用来编写代码的 Web 服务器。

我们可以用它作为 Web 服务器来提供我们的 HTML。就在不久前，当我扮演 Web 服务器的角色时，我基本上需要在这个想法中实现一些程序，只是在听、听、再听。就像我在等待 Brian。当我从任何人的浏览器收到 http 请求时。

我将用合适的文件进行回应。现在我们不打算自己实现一个 Web 服务器。Web 服务器算是一种商品，任何人都可以下载或付费使用。这个想法简单地来自一个叫做 http dash server 的程序。这是一个预装在 I 中的程序，它是免费且开源的。

你可以在 Linux、Mac 或 PC 上使用它，但它在 I D 中预装。当我运行它时，它会为我启动一个新的 Web 服务器。因为这个想法本身已经在 CS 50 自己的 Web 服务器上运行。我现在需要运行自己的 Web 服务器，以便区分两个服务器。

我将使用不同的端口，默认情况下，ccs 50 i d 使用的是 1 80 80 这个端口。所以再次默认情况下，世界上大多数 Web 服务器使用不安全的 80 端口和安全的 443 端口。但不幸的是，这两个端口已被 CS 50 自身使用，它已经在 CS 50 的 Web 服务器上运行。所以如果我想使用同一个服务器。

同一台云计算机监听我自己的其他请求。我只是要并行启动自己的第二个 Web 服务器，只是在不同的地方监听。这就是为了让你我能够运行自己的 Web 服务器，尽管我们在自己的账户之外无法控制这个想法。

现在这是一个看起来相当神秘的主机名，它是一个随机的东西，Zero CD 83813 等等。但归根结底，它只是一个口头通知，最后以 CS 50 X y Z 结束，这是一个我们购买的域名，仅用于运行 Web 服务器。

在 CS 50 上。如果我继续点击并打开 Y la。我现在会看到一个相当复杂的文本列表，列出了我刚刚运行 http server 的文件夹中的所有文件。让我放大一点，你会看到里面只有一个文件，就是我们写的 hello dot html。所以让我点击这个文件，瞧！

这就是我的第一个页面，hello body。我没有看到标题，因为我处于全屏模式。但让我退出全屏模式。如果我放大这个页面的标题和标签。标题。那么刚刚发生了什么？我刚好在使用 CS 50 I，因为这很方便。你我都已经有账户了。我们正在运行自己的 Web 服务器。

实现我之前作为人类所扮演角色的软件版本。我用Chrome作为我的浏览器，就像布莱恩之前在故事中一样。所以当我在浏览器的地址栏中访问这个长URL时，服务器告诉我访问的地址。注意，它以slash hello.html结尾，所以一切都在一个环境中。

我正在提供网页和请求网页。这是一个现实世界的软件开发者在构建自己的网站时所做的。他们希望实际保持一切本地，反复工作，直到准备好发布。有任何关于我们刚刚构建的网页的问题或困惑吗？有任何问题或困惑吗？

布莱恩做完了吗？让我在这里指出一个标签中的事情。你们中一些人非常聪明，实际上惊人地转录了你们，因为我看到更多的。HTTP请求现在进来了。注意到在我运行HTTP服务器的终端窗口中，我看到请求一行行地进来，这算是一种日志，因为我的Web服务器仍在运行。

如果你们想再次输入那个相同的URL。

如果你倒回视频的时间，你实际上可以在互联网上访问我的hello.html文件。

假设你正在观看现场讲座，你可以看到“新玫瑰”出现在我的输出中。

但这只是说这对我们有用。让我在这里稍微做点别的。我将创建另一个文件，这次演示一些其他的HTML标签。所以让我们回到这里，我会保持我的终端窗口运行。但我现在不太关心输出，所以我只会把它最小化。

我将创建另一个文件，叫做paragraphs.html。

让我们看看是否可以引入一些HTML的其他特性。我会继续输入和之前一样的内容。文档类型HTML。我的HTML标签带有英文的Lang属性。这个想法会让人困惑。如果我开始一个想法却没有完成，然后再试图完成它。

你可能需要清理一下，想法是为了帮助你。我现在来创建这个头部标签。我给自己起个标题。我称这个页面为段落，所以我会把它保持在一行，以便简洁明了。打开我的主体。现在我要输入五段拉丁文本。

我就直接把这个放在这里。让我来好好构造一下，使其更加易读。这是你们的洛伦·伊普森文本，基本上是一些类似拉丁语的无意义内容。现在我有五段文本了。

这远不止是hello body。所以让我保存这个文件。让我回到我的另一个标签。在我点击重新加载之前，注意到没有任何变化，这将显示我文件夹的最新内容。所以让我点击段落，学习HTML，我应该看到五个拉丁文段落。

呜？这真是一团糟。一个庞大的长段落。对此可能存在的bug有什么直觉吗？

关于聊天有什么想法？还是Ryan举手了？至少从设置的方式来看，HTML似乎没有默认的自动行距。所以它不会把所有内容收集到这个大的字符串中，除非你以某种方式在每个段落之间创建一个空格，就像大多数计算机语言一样。

它会字面意思上处理你。如果你不通过HTML标签告诉它该做什么，它就会执行一些默认行为。所以让我回到CS50的页面。让我在这里引入另一个标签。原来有一个叫做段落标签，简写是简单的开括号P闭括号。我的想法是完成我的思路。

但是因为我已经有段落了，我需要手动修复这个问题。所以让我在这里打开它，接下来插入几个这样的标签。一个在这里，再复制一个闭合标签到这里，再一个在这里，现在让我为了样式在后面再加一点。

我知道几乎在过去每一周我都声称复制粘贴是不好的。对于HTML来说并非如此，因为如果你想要多个段落，就没有循环的概念。你可以仅用HTML创建五个拉丁文段落。在这种情况下，这是正确的解决方案。让我回到我的另一个标签并现在点击。

在你告诉它之前，什么都不会改变。所以，就像你重新加载一个普通网站一样，让我重新加载一下自己的页面。瞧！我们通过明确使用HTML段落标签修复了Ryan识别的问题。故意使用的是P标签，因为HTML标签往往简洁，输入的字符更少。我怎么知道是P标签？你只需在课堂、书本或网站上学习到这一点。

的确，像Python和C一样，我们并不打算教你HTML中所有的标签和属性，而是今天特别关注概念和基础，以便你可以通过许多在线资源快速扩充你的词汇。让我们这样做，而不是从头开始。

让我复制这个并创建一个我称之为headings.html的文件。在写论文或读书时，比如章节标题或小节标题，你也可以用HTML做到这一点。所以我会在这里引入几个更多的标签，即H1标签。

这就像是最大的标题标签。我这里只是写下一个简单的单词。我要做 H 二，然后说到这里，我将继续做 h 三，并说三到这里。我将做 H 四，然后是四。我将在这里做 H 五，五，然后到这里。我没有段落了。所以我准备给自己一个重复的段落，仅仅为了演示。

我们这里有六个，并继续保存它。

所以如果我现在回到我的浏览器并重新加载，什么也不会发生，因为我在错误的文件中。但是如果我回去，我现在有一个名为 headings.html 的文件。

内容是一样的。但现在看起来有点更好，它是大而粗体的标题。1234 注意这些标题。它们越来越小。这在书籍或学术论文中是一种惯例，你的章节、子章节和子子章节会越来越小。

如果我们真的想，我们可以自定义这个。但开箱即用的 HTML 让我们能够格式化像这样的标题。我们在 HTML 中还可以做些什么呢？让我回到我的 ID。让我先复制粘贴一些内容以节省时间。然后我们创建另一个文件，命名为 Say list.html。

事实证明，HTML 使写列表变得非常简单。在这里，如果我想列出三个东西，比如 Foo、Bar 和，这些都是非常通用的计算机科学术语，当你只需要占位符时，比如数学中的 X、Y 和 Z，或者人们常常会想到的几个 Bar。好的，我有一个干净的列表。

让我回到我的其他标签。返回我的目录索引，这里有 HTML 的列表。瑞恩再次发现了同样的问题。如果我不详细告诉浏览器开始一个列表，它就会假设我只是想要一个大的文本块。它保留了空白字符。它将所有的换行和制表符压缩成单个空格。

但这不是我想要的。那么我该如何解决这个问题？我需要某种额外的标签。结果发现有几种方法。有一个无序列表标签。所以你使用 l 来表示无序列表，这意味着它不是编号的，然后在里面，你可以有名为 LI 的子标签，或列表。让我再给自己一个条目，然后再给自己一个。

所以输入更多的内容。而且实际上，HTML 中几乎有那么多红色字符，这些字符都被我的 IDE 进行了很好的语法高亮，远比实际内容要多。但是如果我现在回到这里并重新加载，如果你查看课程网站，我们实际上在内容和邀请等方面大量使用了项目符号列表。

我们只是在使用一大堆ul标签。如果你希望计算机为你编号，你当然可以这样做，123。但你可以想象，如果你想重新排序或在中间添加东西，这会变得很烦人。因此，计算机在处理繁琐的事情上非常擅长。

使用有序列表（ol）中的北方列表项。

如果我回到另一个标签，现在是123，并且它为我自动编号。

我完全不需要担心这个。让我们再做一个，涉及到页面的结构。让我复制我的起始点，Hello，并创建一个名为Table HTML的文件。如果你想布局表格数据，有行和列，因为你想要理清一些财务信息或类似电子表格的内容。

我们该如何做到这一点？让我继续并称之为表格。在我的主体部分，我来引入表格标签，表格标签稍微复杂一些，因为你需要定义所谓的表格行，所以我可以在这里放一个TR标签，然后在里面，放TD用于表格数据。让我随便放个数字，比如一，接下来让我模拟一些更熟悉的东西。

比如手机键盘的2和3。然后让我再复制一次，给自己再加一行，填上456，接着再给自己加一行，填上789，然后再来一行，给自己提供一个类似键盘的布局，加上星号、零和井号。让我保存一下。

去我的另一个浏览器标签页。打开table.html，你会看到一些像旧式手机键盘的东西，还有隐含的行。

我可以让它变得更好看，加上实际的线条或边框。但HTML使它们能够使用TR标签布局表格数据，用TD标签表示列。这一切都是相当乏味的文本，真的不是你我所知道的网络。因此，让我回去做一些更有趣的事情。

让我开始一个名为Maybe Image HTML的文件，并从我们的基本模板开始。我会把这个标题重命名为image，在下面，做一些这样的事情。让我进行图像处理。源代码怎么写？

引号里的harvard.jpeg。结果我有一张哈佛的图像在我的ID里，让我尽量描述它，加上这个。Ault属性，哈佛大学。我们稍后再讨论这是什么意思。但到目前为止，我们有第二个标签，实际上向我们展示了。

如何自定义标签的行为。之前的 Lang 属性通过告知浏览器来定制整个网页的行为。这里有一个用英语编写的网页，下面有两个属性。一个在等号后有值，另一个是源 SRC，它在等号后也有值，你可以使用单引号或双引号。

但你应该尽量保持一致。不过，每个属性之间应该有一个等号连接键和值。那么我该如何做到这一点呢？让我打开这个文件。现在让我快速抓取一下这个。

给我一秒钟来准备这个演示，让我确保我有我的图片在这里。

让我打开我们的另一个标签页。让我们去那里。让我重新加载一下。我们现在应该能看到 image dot html 和 Harvard JPEG。

我刚刚为我的 ID 抓取的，哇 image dot html 是理论期刊，展示了过去几周装饰我们背景的画作。你可以像那样链接到特定的图像，祭坛属性的角色是什么？

所以祭坛属性常常被新手和经验丰富的程序员忽视。但这与可访问性有关。并非所有人都能以相同的方式看到、听到和与媒体互动。因此，那些在网站或声音等方面有困难的人，祭坛属性是一个强大且简单的机制，可以包含在你的网页中。

图像标签字面上用英语或你自己的语言描述了它。人类本来可能在看着的东西，即使他们可能失明，无法看到那里有什么。如果他们安装了屏幕阅读软件，可以将屏幕上的文本读出来，这对人们听到你我在说的内容非常有帮助。

否则可能只是看着这些标签。因此，请务必注意这些标签。你只有通过上课或阅读书籍才能知道这些标签的存在。查看我们的在线参考资料，我们才刚开始扩展我们的词汇。让我们更进一步，做一些更强大且熟悉的事情。

让我创建一个名为 link dot html 的文件。让我在这里粘贴我的起始点。我将其重新命名为 Link，充满了链接。超文本标记语言完全与超文本有关，这是一个关于链接的深奥概念。超文本是包含其他链接的上下文。那么我该如何在网页中实现一个链接呢？让我先在这个页面中继续。

只是鼓励人们访问哈佛。让我回到我的另一个浏览器窗口，打开链接 html。

这实际上并没有做任何事情，我可以点击访问或哈佛或其他任何东西，但它什么也不会做，因为显然这只是文本。

那么我该如何实际将用户链接到某个目的地？我们需要另一个标签，称为锚点标签，简称为单个字母A。它有一个属性h ref，表示超链接，超链接的意思是。你想链接到什么？让我们保持简单。

让我们链接到我已经创建的文件Image HTML，想要链接的字是字面上的哈佛。所以在哈佛这个词的左边，我有一个绝妙的所谓图像html。我有闭合标签，再次注意。仅仅因为我在标签上有一个属性，并不意味着你需要在闭合标签中冗余地复制粘贴。

只需关闭标签的名称就足够了。现在让我放大一点，重新加载，哇！

现在你看到的是熟悉的超链接，你可能在许多网页上看到过。如果我将鼠标悬停在上面，然后点击，哇，我们将发现自己回到了1792年的哈佛大学，因为现在我看到的是图像。让我暂时退出全屏模式，以便明确此时故事中的女孩。

在页面中我看到的只是访问哈佛，后面是某个链接。你的URL将与我的不同，但我的恰好是这么长的加密字符串，因为这是我的账户/链接.html。

当我点击链接时，请注意我最终到达的是图像html，从而将我带到相对的u R l，即我自己的文件。如果我不想链接到那个文件，也许我想链接到哈佛本身。仅仅做哈佛edu是不够的。那不是一个URL。WwW不是女孩。我需要我的协议。

如果我现在保存该文件并重新加载，回到这里，文本看起来完全一样。但请注意，如果我将鼠标悬停在上面，有一个微小的。

屏幕底部有一个小小的视觉提示，说明我将要到达哪里。如果我现在点击，R L栏不会停留在我的i d/链接html上。它会将我带到实际的哈佛。值得注意的是，Chrome和Safari等浏览器，无论好坏。

浏览器的用户体验（UX）越来越简化。我并不真的在哈佛。如果你单击或双击地址栏，你会看到你实际上在哪里。这对开发者来说更糟糕。

对于普通用户来说，看到域名可能更清晰。但是所有信息确实在这里，如果你稍微挖掘一下。但这里有一种新漏洞，有点像恶意行为。

比如让我把这个改成 Yale dot cdo，并保留“哈佛”这个词。如果我现在回到另一个标签并重新加载，当前看起来不同，因为它是蓝色而不是紫色。默认情况下，紫色意味着我之前去过，而蓝色则意味着我没有去过。但如果我没注意到这个微妙的差别。

我很可能会认为哦，这是我想去的大学。

但当我点击那个错误的地方时，好吧，傻例子。但这确实可能被恶意利用。你想到的是什么，或者与这个非常简单的机制相关的威胁是什么？

现在你有能力制作网页，你可以说你要去一个地方，但实际上引导用户去别处。你能看到这可能被滥用吗？

圣地亚哥认为这可能是演变出的黑客，他们可以插入恶意软件。然后他们会欺骗你去执行这个操作？而“欺骗”是关键字。我们大多数人可能没有在点击链接之前先查看的习惯。就像我刚才那样悬停在上面，然后很。

偏执的我可能会看看下方以确认我是否真的去到正确的地方。即使这样也可能被欺骗。你可以欺骗用户，让他们觉得自己要去正确的地方，但仍然覆盖这种行为。因此，如果你曾经成为钓鱼攻击的受害者或近乎受害者，P H I S H I N G。钓鱼指的是试图欺骗他人。

圣地亚哥说，通过社会工程学让人做一些他们实际上并不打算做的事情。你可以想象收到邮箱中的垃圾邮件，上面写着点击这个链接访问 paypal dot com，因为你需要验证你的密码，或者点击这里告诉我们你的社会安全号码。

这些天收到这样的邮件是非常普遍的，邮件本身也是。

如果它们不仅仅是文本，那它们就是 HTML。当你在 Gmail 中查看任何包含可点击链接或图片的电子邮件时，该邮件包含的 HTML 就像我们在这里编写的内容一样。欺骗用户进入他们并不真的想去的地方是微不足道的。今天的要点之一，除了如何做这些事情的机制之外，还应该考虑你个人的。

关于你应该对网站的不信任程度的安全性，因为这些机制是多么简单，它们确实可以将你引导到错误的地方。让我们澄清这里的几件事。这是最后一个例子，看看我们能否回到用户输入的想法上。

让我回到这个想法上来，让我从我的 hello 文件中抓取一点启动代码，并创建一个最终的例子，叫做 search dot html。这确实是纯 HTML。我将把这个命名为 search，然后在页面的主体部分再加一个新标签。

事实证明，HTML 也支持表单标签，而这个表单标签可以有几个属性，其中之一是 action。这是你希望表单引导用户的位置。我将稍后再回到这一点。另一个是 method，方法是使用的动词。

我将使用 get，而这里不一致，应该是小写。尽管我们之前在表单标签中见过它是大写的。我将有几个输入，其中一个的名字将是 Q，类型将是 search。还有另一个输入，其类型将是 submit，值将是。

将会被称为“搜索”。我故意省略了名字，因为这并不是绝对必要的。但我想说什么呢？我实际上并没有实现一个搜索引擎。我现在所做的只是实现一个搜索引擎的前端。前端指向 google.com。我将通过实际在互联网上搜索数据来使用谷歌本身。

所以我将指定一个动作为 www.google.com/search。在这里我们将要有表单文本框和按钮，用户可以与之交互。这个动作将会把用户发送到这个链接，但这个链接会自动添加一个 HTTP 参数。

有一个名为 Q 的变量。还记得我访问 google.com 时的情况吗？

我能够通过直接访问 https://www.google.com/search?Q=cats 来模拟搜索。我声称谷歌是由软件工程师设计的。他们通过 URL 获取用户输入。你我并不会通过键入像那样的长链接来搜索东西。

任何会造成极差体验的事情。你我只是把东西输入搜索框或表单。如果我现在进入我的另一个标签，这里是 search.html。你不会对我的表单的美观感到印象深刻。它只是一个矩形文本框和一个搜索按钮。但请看发生了什么。

我的相对链接结束于 search.html。我将输入一些像 cats 的内容。现在注意，如果我按下 enter 或手动点击搜索按钮。我的网页，包含一个有着谷歌链接的 HTML 表单，并且方法是 get，我的浏览器将把它转换为相应的 HTTP 请求，并且。

这样用户就可以通过双击自动发送到这个链接。这个完整的链接和用户输入会自动通过浏览器附加到链接上，形式为问号 Q，而不仅仅是 cats。我们现在有了自己非常简单的谷歌搜索引擎。

如果我们想要的话，可以搜索 dogs，注意到 URL 会改变。

问号Q等于狗。这就是现在网络的运作方式。我们之前谈到互联网是如何工作的，如何从A点到B点传送原始数据包。这就是当你访问一个网站时的运作方式，你不仅仅想要一张猫的特定图片，而是想要搜索猫或狗，或者你想要登录一个网站，或者你想要结账。

提供用户输入。你总是在填写HTML表单，表单的外观基本上就是这样。它们可能有更多的输入，可能会更复杂。但它们都是在amazon.com、facebook.com或任何一个网站上的一个表单标签，带有一个输入，提交时，按下或点击，提交或搜索，或者不论按钮的标签是什么。

这就是下一个请求如何提交给服务器的方式。这意味着有很多内容。而且这并不是所有的HTML标签。但这就是HTML的所有概念。它真的就像开放标签和闭合标签，有些标签可能没有属性，仅仅理解这个心理模型。而现在通过表单，我们有了提交用户输入以搜索网站的机制。

到Web服务器上，只是要指出另一个动词。事实证明，Google仅在www.google上支持GET用于其搜索程序，你只能使用GET。但POST也很常见。

Post是一个不同的动词，可以放在那个封包内。而且Post实际上改变了浏览器中发生的事情。所以。

Q等于猫和Q等于狗不会出现在URL中，因为这实际上是我们隐私的另一个威胁。如果你的小兄弟或父母在你搜索网络后来到你的浏览器，他们可以滚动浏览你浏览器的整个历史记录。因为你在Google、Bing或其他地方搜索的所有内容都会出现在URL中。

由于这种机制和用户的便利性，你的浏览器往往会缓存或保存所有这些内容。现在这对我来说是早期的。对于有室友或家人的人来说，显然是侵扰你的隐私。但如果你在注册网站或使用用户名结账时，这尤其令人担忧。

密码和信用卡号码以及其他更敏感的内容。长话短说，Post只是一种不同的动词，可以在HTTP中使用，它隐藏了Q等于猫，隐藏了信用卡号码等。

密码等于基本上更深入地放在封包内。它不会放入URL栏中。

但它仍然以更私密的方式发送到服务器。刚才提到的标签很多。最终使得获取用户输入的能力成为可能。使用这种语言制作网页的语法或隐含意义是什么？有什么内容吗？

我对迄今为止所做的所有工作有些尴尬，因为这些页面实在是太无聊了，令人失望，远没有你我熟悉的日常网页用户界面。所以让我先关闭大部分标签，转而不再仅关注网页的结构。

现在我们关注网页的美学，网页的样式，这里可以真正展现艺术风格。我们可以开始重建用户界面，最终更像我们的世界。在这里你可以看到颜色、形状、图像和声音，但仍然使用这些基本构建块。为此，我们需要一种叫做CSS或层叠样式表的语言。

这不是一种编程语言，但它是一种额外的语言，可以与之结合使用。为了给你的页面加上样式，使其更加美观，CSS归结为使用我们称之为属性的东西。属性类似于变量，它们只是键值对，再次注意这个反复出现的主题，就像我们之前介绍字典那样。

或者在几周前我们提到的Python中的字典。它们只是以哈希表形式存储的键值对集合。我们刚才看到的HTML中的属性，基本上就是键值对。Q等于猫是一个键等于一个值。Q等于狗是一个键等于一个值。CSS有相同的概念。但因为不同的人发明了它们，所以他们称这些为属性，而不是属性。

但这个想法是一样的，只是词汇不同。应用不同的属性，如颜色、字体、大小和定位在HTML标签上会有不同的方法。那么我们该如何实现呢？

事实证明，CSS是一种可以与HTML结合使用的语言。你可以从这样的HTML页面开始，就像我们已经创建的那样，显示“Hello title”和“hello body”。但你可以添加一些额外的属性和/或标签来开始。你实际上可以在网页的中添加一个