CS50x 2024 - Lecture 8 - HTML, CSS, JavaScript

00:00:00 - Introduction

关于互联网是怎么工作的，如何在他的基础上构建软件

HTML和CSS是描述性语言

javascript一种编程语言，在浏览器上下文中很有用，使得界面更具交互性，也用于服务器

00:01:01 - Bingo Board

00:01:51 - The Internet

routers路由器

电子邮件放入数据包中，经过任意数量的路由器（通常2到30个）

00:06:37 - TCP/IP

数据包是一定量信息的通用术语，通常与其IP地址有关，世界上的设备都有一个IP地址，一个互联网协议

IP代表互联网协议

#.#.#.#

所以IP地址一般是4个字节或32位，世界上最多有2的32次方（232 is 4,294,967,296）40亿个IP地址，是不够的，正在从iPv4到IPv6

IP最重要的就是标准了要输入的内容

仅靠IP不足以保证交付，因为有时数据包可能无法到达目的地，可能是因为路由器内存不足

TCP协议

通过Macs与IP结合使用，可以保证交付

TCP、IP 和 MAC 地址是计算机网络中的重要概念，它们在数据传输过程中扮演着不同的角色：

TCP (Transmission Control Protocol): 传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP 负责在两台计算机之间建立稳定的数据传输连接，并确保数据准确无误地传输。它通过序号、确认应答、重传等机制来保证数据传输的可靠性。
IP (Internet Protocol): 互联网协议，是一种网络层通信协议，用于在网络中的设备之间传递数据包。IP 协议定义了数据包的地址和路由方式，确保数据能够跨越多个网络从源头传到目的地。每个使用 IP 协议的设备都有至少一个 IP 地址，用于标识网络中的设备。
MAC (Media Access Control) 地址: 媒体访问控制地址，是网络接口卡（NIC）的硬件地址，用于局域网（LAN）中的物理设备标识。每个网络接口都有一个全球唯一的 MAC 地址，通常由制造商在生产时烧录在设备的硬件中。MAC 地址工作在数据链路层，用于控制同一局域网内设备之间的数据传输。

关系：

TCP 和 IP 通常结合使用（称为 TCP/IP），形成互联网的基础通信架构。TCP 负责在端到端的通信过程中保证数据的可靠传输，而 IP 负责将数据包从源头路由到目的地。
MAC 地址则在更底层，即网络的物理层和数据链路层，负责局域网内的设备识别和数据帧的传输。
在一个典型的网络通信过程中，IP 负责将数据包从一台计算机传送到另一台计算机的过程中进行路由，而 MAC 地址用于在同一局域网内的设备之间传递数据帧。TCP 确保这些数据包能够可靠地、按顺序地到达目的地。

总的来说，TCP/IP 和 MAC 地址共同协作，确保数据在互联网和局域网内的准确、高效传输。

00:14:25 - Ports

tcp世界中两个最常见的端口号

在计算机网络中，端口（Ports）是一种软件层面的抽象概念，用于区分一台计算机上的不同服务或进程。每个使用网络通信的服务或应用程序通常会监听在一个或多个特定的端口上，以便接收来自网络上其他计算机的数据。

端口的作用主要包括：

区分服务：一台计算机可以同时运行多种网络服务，例如Web服务器、电子邮件服务器和FTP服务器等。每种服务监听在不同的端口上，以便能够区分和管理来自网络的请求。例如，HTTP服务通常监听在端口80上，而HTTPS服务监听在端口443上。
支持多任务：通过使用不同的端口，一台计算机可以同时处理多个网络连接请求，为多个用户或应用程序提供服务。这使得网络服务能够高效地并发处理多任务。
数据路由和传递：当数据包到达一台计算机时，操作系统会根据数据包的目标端口将其转发给监听在该端口上的相应服务或应用程序。这样，不同的数据包就可以被准确地送达到正确的接收者。

端口号是一个16位的数字，范围从0到65535。其中，0到1023号端口被称为“知名端口”，这些端口号一般分配给了常用的服务和应用程序；1024到49151号端口被称为“注册端口”，用于特定的服务；49152到65535号端口是“动态”或“私有”端口，可用于临时的通信会话。

总之，端口是网络通信中重要的概念，它允许一台计算机上的多个服务或进程独立地使用网络资源，从而支持复杂的网络应用和服务的运行。

00:18:05 - DNS

另一种类型的服务器DNS，域名系统服务器，是回答问题：该域名的IP地址是什么。

DNS服务器内部的哈希表，本质上是一本字典，一个两列电子表格或数据库表。

一列中有域名，harvard.edu, yale.edu, google.com.一列中是IP地址。

所有的手机电脑会询问最近的DNS服务器，如果本地DNS没有答案，会询问比它更大更重要的人

购买域名一部分就是付费让某人为你关联IP地址与实际将使用的服务器

DNS（Domain Name System）是互联网的一项核心服务，负责将人类可读的域名（如 www.example.com）转换为机器可读的IP地址（如 192.0.2.1）。简单来说，DNS就像是互联网的电话簿，使得用户可以通过容易记住的域名来访问网站，而无需记住复杂的IP地址。

DNS的主要功能包括：

域名解析：将域名转换为对应的IP地址，使得用户的网络请求能够找到正确的服务器。
负载分散：通过将一个域名解析到多个IP地址，DNS可以帮助分散到达某一网站的流量，提高网站的访问速度和可靠性。
管理域名空间：DNS提供了一套分层的域名管理系统，帮助组织和管理全球的域名和IP地址的对应关系。

当人们说“买DNS”时，通常是指购买域名解析服务或者域名注册服务。具体来说，可能包括以下几个方面：

域名注册：购买一个尚未被注册的域名，如 yourcompany.com。这个过程通常需要通过域名注册商完成，注册商会在全球域名系统中登记新域名及其所有者的信息。
DNS托管服务：即使你拥有了域名，你还需要一个DNS服务器来解析你的域名。很多域名注册商也提供DNS托管服务，即他们会为你的域名提供DNS解析服务。这样当有人尝试访问你的域名时，注册商提供的DNS服务器会告诉访问者你的网站的实际IP地址。
自定义DNS服务：对于需要高度定制化或具有特殊需求的用户，可能会购买专门的DNS管理服务，这些服务可能包括增强的安全性、更高的解析速度、负载均衡、地理位置定向解析等高级功能。

总的来说，购买DNS服务通常是指购买与域名解析相关的服务，以确保人们可以通过你的域名访问到你的网站或网络服务。这对于任何希望在互联网上建立可访问内容的个人或组织来说都是必要的。

00:21:20 - DHCP

解决人为问题的解决方案，回答问题：我的DNS服务器和路由器的IP地址应该是什么

DHCP（Dynamic Host Configuration Protocol）是动态主机配置协议，它用于在网络上自动分配IP地址给设备，以及配置其他相关网络信息，如子网掩码、默认网关和DNS服务器地址。简而言之，DHCP使得设备能够自动获取到加入网络所需的所有配置信息，无需手动配置，极大地简化了网络管理。

DHCP的工作流程通常包括以下几个步骤：

发现：当设备连接到网络时，它会广播一个DHCP发现消息（DHCPDISCOVER）寻找可用的DHCP服务器。
提供：DHCP服务器接收到发现消息后，会向设备提供一个IP地址及其他网络配置信息，这一步骤通过DHCP提供消息（DHCPOFFER）完成。
请求：设备选择一个DHCP服务器（如果有多个回应的话），并向其发送请求消息（DHCPREQUEST），请求接受提供的IP地址和配置信息。
确认：DHCP服务器接收到请求后，会发送一个确认消息（DHCPACK）给设备，确认IP地址和配置信息的分配。

DHCP和DNS虽然服务于网络中不同的功能，但它们相互关联，共同支持网络的正常运作：

互补功能：DHCP负责为网络设备动态分配IP地址，使设备能够加入网络并进行通信；DNS则将人类可读的域名转换为设备可识别的IP地址，使得用户可以通过域名访问网站和服务。这两个协议共同简化了用户访问网络资源的过程。
配置集成：DHCP服务器在分配IP地址的同时，也经常配置设备的DNS服务器地址。这意味着当设备通过DHCP加入网络时，它不仅获得了一个IP地址，还获得了解析域名所需的DNS服务器信息。这样，设备就可以解析域名并访问互联网服务，而无需手动配置DNS设置。

简而言之，DHCP和DNS是网络中的两个关键服务，它们通过不同的方式协作，确保设备能够顺利连接到网络，并能够通过域名访问互联网上的资源和服务。

00:23:35 - HTTP 超文本传输协议

另一个控制web浏览器如何运行对的协议

HTTPS实际是其安全版本

URL（Uniform Resource Locator）统一资源定位符，是互联网上用来标识某一资源位置的地址。它为互联网上的资源提供了一个唯一的地址，通过这个地址可以访问到存储在网络上的信息。URL是WWW（World Wide Web）的基本组成部分，常见的资源包括网页、图片、视频和音频文件等。

一个典型的URL包含以下几个部分：

协议：指定了用于访问资源的协议类型。常见的协议有HTTP（Hypertext Transfer Protocol）、HTTPS（HTTP Secure）、FTP（File Transfer Protocol）等。
域名：指定了存储该资源的服务器的地址。在某些情况下，也可以使用IP地址直接指定服务器。
端口（可选）：指定了服务器上用于访问资源的端口号。如果没有指定，将使用协议的默认端口（例如，HTTP的默认端口是80，HTTPS的默认端口是443）。
路径：指定了在服务器上资源的具体位置。路径后面可以附加查询字符串（query string），用于传递额外的参数给服务器。
查询字符串（可选）：以问号（?）开头，后面跟随一个或多个参数。这些参数通常用于向服务器传递信息或指定要访问的资源的具体视图。
片段标识符（可选）：以井号（#）开头，用于指定网页中的一个片段，使浏览器直接跳转到网页的指定部分。

例如，一个完整的URL可能看起来像这

https://www.example.com:443/path/to/resource?query=123#section

https 是协议；
www.example.com 是域名；
443 是端口号，通常不需要显示指定；
/path/to/resource 是服务器上资源的路径；
?query=123 是查询字符串，用于向服务器发送额外的信息；
#section 是片段标识符，用于直接定位到网页的某个部分。

URL使得用户可以通过简单的网址访问到互联网上的各种资源，是日常上网浏览、检索信息不可或缺的工具。

.com是顶级域名，代表商业commercial

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本（如网页）的应用层协议。它构成了万维网（World Wide Web, WWW）数据交换的基础，允许用户通过浏览器访问网页。HTTP 使用客户端-服务器模型：用户的浏览器充当客户端，通过发送请求来获取服务器上的资源，服务器响应这些请求并发送资源回客户端。

HTTP定义了一系列的请求方法，最常用的包括：

GET：请求获取指定资源。
POST：向指定资源提交数据进行处理请求（例如，提交表单或上传文件）。数据被包含在请求体中。
PUT：从客户端向服务器传送的数据取代指定的文档的内容。
DELETE：请求服务器删除指定的页面。
HEAD：请求获取由Request-URI所标识的资源的响应消息报头。
OPTIONS：允许客户端查看服务器的性能。

HTTP工作在TCP/IP协议栈的应用层，通常使用80端口。它是一个无状态协议，意味着服务器不保留之前请求的任何信息。为了克服这个限制，Web应用通常使用cookies来维持用户状态。

HTTP/1.1是最广泛使用的HTTP版本，它引入了持久连接、管道化请求等特性以提高效率。HTTP/2是最新的版本，它进一步优化了性能，引入了头部压缩、服务器推送等特性。

HTTPS（Secure Hypertext Transfer Protocol）是HTTP的安全版本，它在HTTP的基础上通过SSL/TLS协议提供了数据加密、完整性保护和身份验证，确保了数据传输的安全性。HTTPS默认使用443端口。

总的来说，HTTP是互联网上进行数据交换和资源获取的核心协议，它支持了Web的各种应用，从简单的网页浏览到复杂的Web应用都依赖于HTTP协议。

$ curl -I https://www.harvard.edu/
HTTP/2 200 
cache-control: public, max-age=1200
content-type: text/html; charset=UTF-8
link: <https://www.harvard.edu/>; rel=shortlink
permissions-policy: geolocation=(self)
referrer-policy: no-referrer-when-downgrade
server: nginx
strict-transport-security: max-age=31622400
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-pantheon-styx-hostname: styx-fe1-b-86568b7775-8zfp8
x-styx-req-id: 6c981bff-cec6-11ee-9f71-6ea307aa86bd
x-xss-protection: 1; mode=block
age: 84
accept-ranges: bytes
via: 1.1 varnish, 1.1 varnish, 1.1 varnish, 1.1 varnish
date: Mon, 19 Feb 2024 01:31:36 GMT
x-served-by: cache-chi-klot8100144-CHI, cache-qpg1273-QPG, cache-qpg120097-QPG, cache-qpg120089-QPG
x-cache: HIT, MISS, MISS, MISS
x-cache-hits: 25, 0, 0, 0
x-timer: S1708306296.783940,VS0,VE489
vary: Accept-Encoding, Cookie, Cookie, orig-host
content-length: 229484

00:36:30 - Inspect

00:43:01 - Status Codes

专注于

HTTP/2 200
content-type: text/html; charset=UTF-8

$ curl -I https:/harvard.edu/
HTTP/2 301 
server: Varnish
retry-after: 0
location: https://www.harvard.edu/
accept-ranges: bytes
date: Wed, 21 Feb 2024 15:59:34 GMT
via: 1.1 varnish
x-served-by: cache-qpg1258-QPG
x-cache: HIT
x-cache-hits: 0
x-timer: S1708531175.534076,VS0,VE0
strict-transport-security: max-age=300
content-length: 0

任何3开头的都与重定向有关， 4开头一般都不友好

在计算机网络和网页开发领域，重定向是一种让网页将访问者从一个URL自动转移到另一个URL的方式。这个过程对于用户来说通常是透明的，意味着用户会自动被带到新的地址，而不需要手动点击链接。重定向的应用场景非常广泛，包括但不限于：

网站迁移：当网站结构发生变化，或者整个网站搬迁到新的域名下时，重定向可以确保旧的URL能够自动指向新的URL，从而不会失去现有的访问流量。
URL简化：用于创建更易于记忆和输入的短链接，指向具有长URL的页面。
维护或建设中的页面：当网页或网站正在维护或更新时，重定向可以临时将访问者引导到通知页面或其他相关内容。
增强安全：将用户从HTTP网站自动重定向到其HTTPS版本，以确保数据传输的安全性。
营销活动跟踪：通过特定的重定向URL来跟踪广告效果或用户来源，便于分析和统计。
处理404错误：将用户从不存在的页面自动重定向到一个错误页面或网站的主页，改善用户体验。

重定向类型

301永久重定向：表示原始页面已经永久移动到新位置。对于SEO（搜索引擎优化）来说，这是最常用的重定向类型，因为它传递了大部分原始页面的链接权重到新页面。
302临时重定向：表示页面的移动只是暂时的。搜索引擎会把这种重定向视作临时的，并且不会将链接权重传递给新的URL。
303查看其他位置：用于将POST请求重定向到GET请求，常用于表单提交后的页面。
307临时重定向：与302类似，但它保证请求方法和请求体不会改变，这对于保持POST请求的完整性很重要。
308永久重定向：功能类似于301，但它保证请求方法不会改变，适用于需要保留请求方法（如POST）的永久重定向场景。

重定向是网页设计和网络应用中一个重要的功能，正确使用重定向不仅可以提升用户体验，还可以对搜索引擎优化产生积极影响。

00:45:24 - HTML

不是一种编程语言，而是标记语言，只是呈现信息

两个概念：标签和属性 tags attributes

服务器可以呈现信息

http-server写道预先安装到每个人的代码空间，运行它启动了一个服务器，任务是监听http请求，会以收到的文件内容进行响应

WEB/ $ http-server
Starting up http-server, serving ./

http-server settings: 
CORS: true
Cache: -1 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: not visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  https://improved-fortnight-gpwpx6xgr73j9p-8080.app.github.dev
Hit CTRL-C to stop the server

网络钓鱼 phishing

html有一个标准的方式，http将输入从浏览器发送到服务器，一般是这样的形势

http://www.google.com/search?q=dogs

01:30:54 - Harvard Pep Squad Prank

01:33:47 - Regular Expressions 正则表达式

大多数现代语言都被称为正则表达式。使用模式来验证输入的方法。或从字符串中提取信息

regexes 正则表达式，匹配用户的输入并确保它匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <title>register</title>
</head>
<body>
    <form>
        <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
        <button>Register</button>
    </form>
</body>
</html>

validator.w3.org 万维网联盟的免费网络服务

01:44:02 - CSS

一种新的语言，通过此可以更好的设计。

properties

可以使用类型标签来增强代码

css中，层叠样式表，也就是我们现在谈论的语言，关键的冒号

02:02:19 - Bootstrap

Bootstrap 是一个开源的前端框架，用于开发响应式和移动端优先的网页和应用。它包含了一套预先定义的 CSS 样式、组件和 JavaScript 插件，这些工具可以帮助开发者快速设计和构建美观、现代的网站界面。Bootstrap 提供了栅格系统、导航元素、表单、按钮、模态框、工具提示等各种界面组件，以及响应式布局和自适应功能，使得网页能够在不同设备和屏幕尺寸上良好地显示。

Bootstrap 的主要特点包括：

响应式设计：Bootstrap 的栅格系统和组件都是设计来支持响应式布局的，这意味着你的网站可以自动调整布局以适应不同尺寸的屏幕，从而在手机、平板和桌面上都能提供良好的用户体验。
易于使用：通过使用 Bootstrap 提供的类和属性，开发者可以快速实现各种设计元素和布局效果，而无需从头开始编写大量的 CSS。
定制化：Bootstrap 允许开发者通过修改 Sass 变量和 Less 变量、使用自己的样式覆盖默认样式等方式来定制化框架以适应特定的设计需求。
广泛的社区支持：作为一个广受欢迎的前端框架，Bootstrap 拥有庞大的用户和开发者社区，这意味着你可以轻松找到教程、插件和第三方扩展。

Bootstrap 最初由 Twitter 的 Mark Otto 和 Jacob Thornton 开发，目的是统一公司内部工具的界面。自发布以来，Bootstrap 已经成为最受欢迎的前端框架之一，并且持续更新，不断添加新的特性和组件，以满足现代网页开发的需求。

除了 Bootstrap，还有许多其他流行的前端框架和库，它们各自具有不同的特点和优势，广泛应用于现代网页和应用程序的开发中。以下是一些类似的前端框架和库：

Foundation：由 ZURB 开发，是一个高级的响应式前端框架，旨在帮助开发者快速设计美观、响应式的网站。它提供了一套丰富的 UI 组件和工具，支持快速定制和灵活的布局选项。
Semantic UI：一个基于自然语言原则的 UI 组件库，提供了大量的样式和组件。Semantic UI 强调使用简单、直观的代码来控制布局和样式，使得界面开发更加人性化和易于理解。
Materialize：受到 Google 的 Material Design 设计语言启发，Materialize 是一个现代的响应式前端框架，提供了一系列符合 Material Design 指南的样式和组件，用于开发具有统一视觉效果的网页和应用。
Bulma：是一个基于 Flexbox 的现代 CSS 框架，提供了一系列响应式的布局、表单、按钮、导航等组件。Bulma 的特点是纯 CSS，不包括 JavaScript 组件，但可以很容易地和其他 JavaScript 插件配合使用。
Tailwind CSS：一个实用主义的 CSS 框架，它提供了大量的工具类，使开发者可以通过组合这些类来快速构建定制的设计，而不是依赖预定义的组件。Tailwind CSS 的核心理念是“实用优先”，旨在提高开发效率和灵活性。
Vue.js：虽然 Vue.js 主要是一个渐进式 JavaScript 框架，用于构建用户界面，但它的生态系统中包含了如 Vuetify、Quasar 等基于 Vue 的 UI 组件库，这些库提供了丰富的界面元素和布局工具，可以用来开发高质量的前端界面。
React：同样是一个用于构建用户界面的 JavaScript 库，React 的生态系统中包含了如 Material-UI、Ant Design、React Bootstrap 等 UI 框架，这些框架提供了基于 React 的组件，用于快速开发动态的网页应用。

这些框架和库各有侧重，开发者可以根据项目需求、设计偏好和开发经验来选择最合适的工具。

CSS（Cascading Style Sheets）和HTML（HyperText Markup Language）是构建网页和网上应用的两种基本技术，它们在网页开发中扮演着互补但不同的角色：

HTML (HyperText Markup Language)：
- HTML 是一种标记语言，用于创建和组织网页的内容结构。
- 它允许开发者通过标签（如 <h1>, <p>, <div> 等）来定义文本、链接、图片、列表等元素的结构和含义。
- HTML 的主要职责是构建网页的骨架，确保内容的逻辑结构清晰，但它本身不涉及样式和外观设计。
CSS (Cascading Style Sheets)：
- CSS 是一种样式表语言，用于控制网页元素的外观和布局。
- 它允许开发者对网页进行美化，包括颜色、字体、间距、背景、响应式设计等方面的定制。
- CSS 的主要职责是提升网页的视觉效果和用户体验，它与 HTML 分工合作，通过选择器应用于 HTML 元素，从而决定这些元素的表现形式。

简而言之，HTML 负责内容和结构的定义，而 CSS 负责样式和布局的设计。两者相互依赖，共同构成了网页的基础。通过 HTML，我们定义了网页的内容和基本结构；通过 CSS，我们进一步定义这些内容的呈现方式和布局，使网页具有更加吸引人的外观和更好的用户体验。

02:09:31 - JavaScript

JavaScript、CSS 和 HTML 三者共同构成了现代网页和网络应用的核心技术基础，它们各自承担着不同的角色，但又紧密协作，共同创建出功能丰富、交互性强、外观美观的网页。下面是它们之间的关系和区别：

HTML (HyperText Markup Language)：
- 负责网页的结构和内容。HTML 通过标记标签定义文本、链接、图片等元素，构成了网页的骨架。
CSS (Cascading Style Sheets)：
- 负责网页的样式和布局。CSS 用于设置网页元素的视觉效果（如颜色、字体、间距）和布局（如位置、对齐方式），提升用户界面的美观度和可读性。
JavaScript：
- 负责网页的交互性和动态功能。JavaScript 是一种编程语言，它可以在网页加载后修改 HTML 和 CSS，响应用户操作（如点击、滚动）、与服务器通信（如加载新内容）等，使网页能够实现复杂的功能和动态效果。

它们之间的关系：

HTML 为基础：所有网页的起点都是 HTML，它定义了网页的基本结构和内容。
CSS 增加样式：CSS 作用于 HTML 元素，给网页添加样式。通过 CSS，开发者可以控制元素的外观和布局，使网页更加美观和用户友好。
JavaScript 添加交互性：JavaScript 对 HTML 和 CSS 的内容和样式进行操作和修改，添加动态效果和交互功能。它可以在不重新加载整个页面的情况下，实现页面内容的更新。

它们如何一起工作：

分工明确：HTML、CSS 和 JavaScript 在网页开发中各司其职，HTML 负责结构，CSS 负责样式，JavaScript 负责交互。
紧密协作：虽然它们各自独立，但在创建现代网页时需要密切配合。例如，JavaScript 可以读取或修改 HTML 元素和 CSS 样式，实现动态的内容更新和样式变化。
共同进化：随着 Web 技术的发展，HTML、CSS 和 JavaScript 都在不断进化，引入新的特性和能力，以满足更加复杂和高级的网页应用需求。

总之，HTML、CSS 和 JavaScript 是网页开发中不可分割的三个核心技术，它们相互依赖，共同工作，以创建出功能完善、用户体验优良的网页和应用。