Web详解 - 技术栈

[1、Web 概念](#1、Web 概念)

[1.1 Web 的基本概念](#1.1 Web 的基本概念)

[1.2 B/S 架构模型](#1.2 B/S 架构模型)

[1.3 Web 请求与响应过程](#1.3 Web 请求与响应过程)

[1.4 静态资源与动态资源](#1.4 静态资源与动态资源)

[1.5 Web 的发展阶段](#1.5 Web 的发展阶段)

[1.6 实验：搭建最小 Web 服务](#1.6 实验：搭建最小 Web 服务)

[1.7 小结](#1.7 小结)

[2、HTTP 与 HTTPS 协议](#2、HTTP 与 HTTPS 协议)

[2.1 HTTP 与 HTTPS 的区别](#2.1 HTTP 与 HTTPS 的区别)

[2.2 HTTPS 握手流程](#2.2 HTTPS 握手流程)

[2.3 HTTP 状态码](#2.3 HTTP 状态码)

[2.3.1 HTTP 状态码概览](#2.3.1 HTTP 状态码概览)

[2.3.2 常用状态码详解](#2.3.2 常用状态码详解)

3.总结

1、Web 概念

1.1 Web 的基本概念

Web（World Wide Web，万维网）是一个基于互联网的、由众多互相链接的超文本组成的信息系统。它不仅仅是简单的网页集合，更是一个通过超链接将全球各地服务器上的信息资源相互关联起来的庞大网络。

依赖的核心协议：HTTP（HyperText Transfer Protocol，超文本传输协议）和 HTTPS（HyperText Transfer Protocol Secure，安全的超文本传输协议）是 Web 运行的基石，它们规范了浏览器与服务器之间如何进行数据交互。比如，当你在浏览器中点击一个链接时，浏览器就是通过 HTTP 或 HTTPS 协议向对应的服务器发送请求，以获取所需的网页内容。
特点详解
- 分布式：资源并非集中存储在某一台服务器上，而是分散在世界各地不同的计算机（服务器）中。例如，你访问一个新闻网站，其文字内容可能存储在位于美国的服务器，图片可能来自欧洲的服务器，视频则可能存放在亚洲的服务器。
- 跨平台：无论你使用的是 Windows 操作系统的电脑、macOS 系统的笔记本，还是 Android 或 iOS 系统的手机、平板，只要设备上安装了浏览器（如 Chrome、Safari、Firefox 等），就能够访问 Web 上的资源。这打破了不同操作系统之间的壁垒，让信息获取更加便捷。
- 无状态：服务器在处理完每次 HTTP 请求后，不会保留与该请求相关的任何信息。比如，你在一个购物网站浏览了几件商品，然后关闭浏览器再重新打开访问该网站，服务器并不会记得你之前浏览过哪些商品。不过，为了实现类似用户登录状态保持、购物车信息存储等功能，会使用 Cookie 和 Session 技术来弥补这种无状态的特性。Cookie 是存储在客户端（浏览器）的小型文本文件，Session 则是存储在服务器端的数据结构，它们相互配合，让服务器能够 "记住" 客户端的状态。

1.2 B/S 架构模型

Web 采用的 B/S 架构（Browser/Server，浏览器 / 服务器架构）是一种网络应用架构，它将应用程序的功能分为两个主要部分：

Browser（浏览器）
- 用户入口：是用户与 Web 系统交互的界面，用户通过浏览器输入网址、点击链接、填写表单等操作来发起对 Web 资源的请求。
- 发送请求：当用户进行操作时，浏览器会按照 HTTP/HTTPS 协议的规范，将用户的请求封装成请求报文发送给服务器。
- 渲染页面：浏览器接收到服务器返回的响应报文后，会对其中的 HTML、CSS、JavaScript 等内容进行解析和处理，最终将其渲染成用户可以直观看到和交互的网页。例如，浏览器会根据 CSS 样式表来设置网页元素的字体、颜色、布局等，通过执行 JavaScript 代码实现网页的动态效果，如弹窗、表单验证、页面滚动动画等。
Server（服务器）
- 接收请求：服务器时刻监听着网络端口，当接收到浏览器发送的请求报文后，会对其进行解析，确定请求的资源类型和具体内容。
- 处理请求：根据请求的内容，服务器会进行相应的处理。如果是请求静态资源（如 HTML 文件、图片等），服务器会直接从存储设备中读取该资源；如果是请求动态内容（如用户登录验证、数据查询等），服务器会调用相应的应用程序进行处理，可能还需要与数据库进行交互来获取所需数据。
- 返回响应：服务器处理完请求后，会将处理结果封装成响应报文，按照 HTTP/HTTPS 协议的规范返回给浏览器。

1.3 Web 请求与响应过程

一次完整的 Web 访问过程是一个复杂但有序的交互过程，具体步骤如下：

输入 URL ：用户在浏览器的地址栏中输入一个 URL（Uniform Resource Locator，统一资源定位符），如http://www.example.com/index.html。URL 由协议（http）、域名（www.example.com）、资源路径（/index.html）等部分组成，它明确指出了要访问的 Web 资源的位置。
DNS 解析 ：浏览器无法直接通过域名找到对应的服务器，需要将域名解析为 IP 地址（互联网上每一台计算机都有一个唯一的 IP 地址，类似现实生活中的门牌号）。这个过程由 DNS（Domain Name System，域名系统）来完成。DNS 解析就像是一个 "地址簿"，它会将域名映射到对应的 IP 地址。解析过程可能会涉及本地 DNS 缓存、根 DNS 服务器、顶级域名 DNS 服务器、权威 DNS 服务器等多个环节。例如，当解析www.example.com时，浏览器首先会检查本地是否有该域名的 IP 地址缓存，如果没有，会向本地 DNS 服务器发送请求，本地 DNS 服务器如果也没有该记录，会依次向根 DNS 服务器、顶级域名（.com）DNS 服务器、example.com的权威 DNS 服务器查询，最终获取到www.example.com对应的 IP 地址，如192.168.1.1。
建立连接 ：浏览器获取到服务器的 IP 地址后，会与该服务器建立 TCP（Transmission Control Protocol，传输控制协议）连接，这个过程称为 "三次握手"。
- 第一次握手：浏览器向服务器发送一个 SYN（同步）报文，表明自己想要建立连接，并告诉服务器自己的初始序列号。
- 第二次握手：服务器收到 SYN 报文后，会回复一个 SYN+ACK（同步 + 确认）报文，确认收到浏览器的请求，并告诉浏览器自己的初始序列号。
- 第三次握手：浏览器收到服务器的 SYN+ACK 报文后，会发送一个 ACK（确认）报文，确认收到服务器的响应。此时，TCP 连接建立成功，双方可以开始进行数据传输。
发送请求 ：TCP 连接建立后，浏览器会按照 HTTP 协议的规范，向服务器发起 HTTP 请求。HTTP 请求方法主要有 GET 和 POST 等。
- GET 方法：用于请求获取资源，请求参数会附加在 URL 后面，例如http://www.example.com/search?keyword=web，其中keyword=web就是请求参数。GET 请求的参数长度有限制，且不适合传输敏感信息，因为参数会暴露在 URL 中。
- POST 方法：用于向服务器提交数据，如表单提交。请求参数会放在请求体中，不会显示在 URL 中，相对更安全，且可以传输大量数据。
服务器处理
- 静态资源请求：如果请求的是静态资源（如 HTML、CSS、图片等），Web 服务器（如 Nginx、Apache）会直接从服务器的文件系统中找到对应的资源。
- 动态请求处理：如果请求的是动态内容（如 PHP 脚本、Python 的 Flask/Django 应用、Java 的 Servlet 等），Web 服务器会将请求转发给应用服务器。应用服务器会执行相应的代码进行处理，在处理过程中，可能需要与数据库（如 MySQL、Redis）进行交互，查询或修改数据。例如，当用户登录一个网站时，应用服务器会接收用户提交的用户名和密码，然后到数据库中查询验证，如果验证通过，会生成相应的响应信息。
返回响应：Web 服务器将处理结果（可能是静态资源，也可能是应用服务器生成的动态内容）打包成 HTTP 响应报文，通过已建立的 TCP 连接返回给浏览器。HTTP 响应报文包含状态码、响应头和响应体等部分。状态码表示请求的处理结果，如 200 表示成功；响应头包含了关于响应的附加信息，如内容类型、长度等；响应体则是实际的响应数据，如网页的 HTML 内容、图片的二进制数据等。
渲染页面：浏览器接收到 HTTP 响应报文后，会对其进行解析。首先解析 HTML，构建 DOM（Document Object Model，文档对象模型）树，DOM 树描述了网页的结构；然后解析 CSS，构建 CSSOM（CSS Object Model，CSS 对象模型）树，CSSOM 树描述了网页的样式；接着将 DOM 树和 CSSOM 树合并成渲染树，渲染树包含了网页中可见元素的结构和样式；之后，浏览器会根据渲染树进行布局（计算元素的位置和大小）和绘制（将元素绘制到屏幕上）；最后，执行 JavaScript 代码，JavaScript 可以操作 DOM 和 CSSOM，从而实现网页的动态更新和交互效果。

1.4 静态资源与动态资源

静态资源
- 定义：指在服务器上存储的固定内容，不需要服务器进行额外的计算或处理，当浏览器请求时，服务器可以直接将其返回。
- 常见类型：HTML（HyperText Markup Language，超文本标记语言）文件，用于定义网页的结构；CSS（Cascading Style Sheets，层叠样式表）文件，用于控制网页的样式；图片文件（如 JPG、PNG、GIF 等）；视频文件（如 MP4、AVI 等）；JavaScript 文件（在客户端执行，用于实现网页的动态效果，但本身作为文件存储时属于静态资源）等。
- 优点
  - 速度快：因为不需要服务器进行复杂处理，服务器可以快速读取并返回静态资源，减少了处理时间。
  - 压力小：对服务器的资源消耗较少，一台服务器可以同时处理大量的静态资源请求。
动态资源
- 定义：指需要服务器端的代码进行计算、处理后才能生成的内容，每次请求可能会根据不同的条件（如用户身份、请求参数等）返回不同的结果。
- 常见类型：PHP 脚本、Python 的 Flask/Django 框架开发的应用、Java 的 Servlet、Ruby on Rails 应用等。
- 优点
  - 个性化内容：可以根据用户的具体情况生成个性化的内容，例如，电商网站会根据用户的浏览历史推荐相关商品。
  - 支持交互：能够响应用户的输入和操作，实现复杂的交互功能，如用户注册、登录、数据提交、在线投票等。

1.5 Web 的发展阶段

Web 1.0（只读）：大约从 20 世纪 90 年代初到 21 世纪初。这个阶段的 Web 主要以静态页面为主，内容由网站管理员或编辑发布，用户只能被动地浏览信息，几乎没有交互功能。典型的应用如早期的门户网站，只是将各种信息分类展示，用户无法对内容进行评论、修改或发布自己的内容。
Web 2.0（交互式）：从 21 世纪初开始兴起并逐渐普及。这个阶段的 Web 强调用户的参与和互动，用户可以生成内容（UGC，User Generated Content）。例如，博客平台允许用户发表自己的文章，社交媒体（如 Facebook、Twitter）让用户可以分享状态、与他人互动，视频分享网站（如 YouTube）让用户可以上传和分享视频。AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）技术的普及是 Web 2.0 的重要标志，它使得浏览器可以在不重新加载整个页面的情况下，与服务器进行异步数据交互，从而实现了更流畅、更动态的用户体验，如网页局部刷新、实时数据更新等。
Web 3.0（智能化）：是当前 Web 发展的趋势和愿景，目前还处于不断演进和探索的阶段。它强调语义网（让计算机能够理解网页内容的含义，实现更智能的信息检索和处理）、区块链（去中心化的分布式账本技术，可用于实现可信的数据存储、数字资产交易、去中心化应用等）、去中心化（减少对中心化机构的依赖，赋予用户更多对自己数据和身份的控制权）等概念。例如，基于区块链的去中心化社交网络，用户的数据不再由单一的公司控制，而是分布式存储在网络中，用户可以更好地保护自己的隐私和数据所有权。

1.6 实验：搭建最小 Web 服务

实验目标：通过实际操作，亲身体验一次最简单的 Web 请求与响应过程，并使用 Wireshark 工具抓取网络数据包，观察 HTTP 请求和响应的细节，加深对 Web 工作原理的理解。
实验步骤（补充）
- 安装 Nginx ：Nginx 是一款高性能的 Web 服务器软件。可以根据操作系统的不同，选择相应的安装方式。例如，在 Ubuntu 系统中，可以使用apt-get install nginx命令进行安装；在 Windows 系统中，可以从 Nginx 官网下载安装包并解压安装。安装完成后，启动 Nginx 服务。
- 创建静态页面 ：在 Nginx 的网站根目录（不同操作系统的默认根目录可能不同，如 Ubuntu 系统中默认是/var/www/html，Windows 系统中默认是nginx安装目录/html）下，创建一个名为index.html的文件，文件内容如下：
复制代码
```
  <html>
  <head><title>My First Web</title></head>
  <body>
  <h1>Hello Web!</h1>
  <p>This is my first web page.</p>
  </body>
  </html>
```
- 访问静态页面 ：打开浏览器，在地址栏中输入http://localhost或服务器的 IP 地址，浏览器会显示出刚刚创建的静态页面，页面中会显示 "Hello Web!" 和 "This is my first web page."。
- 使用 Wireshark 抓包 ：启动 Wireshark 工具，选择合适的网络接口（如连接到互联网的网卡），设置过滤条件（如http），然后在浏览器中重新访问http://localhost。Wireshark 会捕获到这次 Web 访问过程中的 HTTP 请求和响应数据包，通过分析这些数据包，可以看到请求的 URL、请求方法、响应状态码、响应内容等信息。

1.7 小结

Web 是一种基于 B/S 架构的信息交互方式，其核心是请求 - 响应模型，通过 HTTP/HTTPS 协议在浏览器和服务器之间传输数据。Web 能够提供静态资源和动态资源，以满足不同的信息展示和交互需求。随着技术的不断发展，Web 从最初的只读模式（Web 1.0）发展到交互式模式（Web 2.0），并正在向智能化、去中心化的 Web 3.0 演进。

2、HTTP 与 HTTPS 协议

2.1 HTTP 与 HTTPS 的区别

HTTP（HyperText Transfer Protocol）
- 传输方式：采用明文传输数据，即数据在传输过程中没有经过加密处理，任何人如果在网络中截获了 HTTP 数据包，都可以直接查看其中的内容，包括用户的账号密码、个人信息等敏感数据。
- 安全性：不安全，容易受到中间人攻击（攻击者在浏览器和服务器之间拦截、修改或伪造数据）、数据窃听等安全威胁。
- 端口：默认使用 80 端口进行通信。
HTTPS（HyperText Transfer Protocol Secure）
- 传输方式：在 HTTP 的基础上加入了 SSL（Secure Sockets Layer，安全套接层）/TLS（Transport Layer Security，传输层安全）协议进行加密处理。SSL/TLS 协议会对传输的数据进行加密，使得即使数据包被截获，攻击者也无法轻易解密其中的内容。
- 安全性：相对安全，能够有效防止中间人攻击、数据窃听和篡改，保护用户的隐私和数据安全。
- 端口：默认使用 443 端口进行通信。
- 证书：HTTPS 需要使用数字证书来验证服务器的身份。数字证书由权威的 CA（Certificate Authority，证书颁发机构）颁发，包含了服务器的公钥、域名、证书有效期等信息。浏览器会验证证书的合法性，如果证书无效或不被信任，会向用户发出警告。

2.2 HTTPS 握手流程

HTTPS 的握手流程是建立安全通信通道的关键步骤，其目的是让客户端和服务器协商出一个用于后续加密通信的对称密钥，并验证服务器的身份。具体流程如下：

客户端 Hello ：浏览器（客户端）向服务器发送一个 Client Hello 报文，其中包含以下信息：
- 客户端支持的 SSL/TLS 版本（如 TLS 1.2、TLS 1.3 等）。
- 客户端支持的加密套件列表（加密套件是一组加密算法的组合，包括密钥交换算法、对称加密算法、消息认证码算法等）。
- 一个随机生成的客户端随机数（Client Random），用于后续生成会话密钥。
服务端 Hello + 证书 ：服务器收到 Client Hello 报文后，会返回一个 Server Hello 报文和服务器的数字证书，其中 Server Hello 报文包含以下信息：
- 服务器选择的 SSL/TLS 版本（从客户端支持的版本中选择）。
- 服务器选择的加密套件（从客户端支持的加密套件列表中选择）。
- 一个随机生成的服务器随机数（Server Random），同样用于后续生成会话密钥。
  服务器的数字证书包含服务器的公钥、证书颁发机构（CA）的信息、证书的有效期、证书所绑定的域名等。
客户端验证证书 ：客户端收到服务器返回的证书后，会对证书进行验证，验证过程如下：
- 检查证书是否在有效期内。
- 检查证书所绑定的域名是否与当前访问的域名一致。
- 验证证书的签名是否有效。客户端会使用 CA 的公钥（客户端通常预装了主流 CA 的公钥）来解密证书中的签名，如果解密成功且与证书内容的哈希值一致，则说明证书是由该 CA 颁发且未被篡改过。
  如果证书验证失败，客户端会向用户显示警告信息，提示用户该网站的证书不可信，用户可以选择是否继续访问；如果证书验证成功，客户端会继续后续的流程。
协商密钥
- 客户端生成一个预主密钥（Pre-Master Secret），并使用服务器证书中的公钥对其进行加密，然后将加密后的预主密钥发送给服务器。
- 服务器收到加密的预主密钥后，使用自己的私钥（与证书中的公钥配对）进行解密，得到预主密钥。
- 客户端和服务器分别使用之前生成的客户端随机数、服务器随机数和预主密钥，通过相同的密钥派生算法生成会话密钥（Session Key），会话密钥是用于后续对称加密通信的密钥。
加密通信开始：客户端和服务器都生成会话密钥后，会互相发送 Finished 报文，其中包含对之前所有握手消息的哈希值和加密处理，用于验证握手过程是否被篡改。双方验证通过后，HTTPS 握手过程完成，后续的 HTTP 数据传输都会使用会话密钥进行对称加密，从而保证数据的安全性。

2.3 HTTP 状态码

HTTP 状态码是服务器对客户端请求的处理结果的数字表示，它由三位数字组成，不同的数字组合代表不同的含义，方便客户端快速了解请求的状态。

2.3.1 HTTP 状态码概览

HTTP 状态码按首位数字分为五类，分别表示不同的状态类别：

1xx（100--199）：信息性状态码，表示服务器已经接收到请求，正在进行处理，需要客户端继续等待或采取进一步的行动。
2xx（200--299）：成功状态码，表示服务器成功处理了客户端的请求。
3xx（300--399）：重定向状态码，表示客户端请求的资源位置发生了变化，需要客户端重新向新的位置发送请求。
4xx（400--499）：客户端错误状态码，表示客户端的请求存在错误，导致服务器无法处理。
5xx（500--599）：服务器错误状态码，表示服务器在处理客户端请求的过程中发生了错误。

2.3.2 常用状态码详解

2xx 成功
- 200 OK：请求成功，服务器已经成功处理了请求，并返回了客户端所请求的资源。这是最常见的状态码之一，例如，当你正常打开一个网页时，服务器通常会返回 200 状态码。
- 201 Created：请求成功，并且服务器已经根据客户端的请求创建了新的资源。例如，当你在一个博客平台发布一篇新文章，服务器成功创建文章后，可能会返回 201 状态码。
- 204 No Content：请求成功，但服务器没有返回任何实体内容。这种状态码通常用于表示客户端的请求已经被处理，但不需要返回数据，例如，当你删除一个资源，服务器成功删除后，可能会返回 204 状态码。
3xx 重定向
- 301 Moved Permanently：永久重定向，表示请求的资源已经永久地移动到了新的 URL，服务器会在响应头中通过 Location 字段指定新的 URL。浏览器收到 301 状态码后，会自动将后续对原 URL 的请求转向新的 URL，并且会更新书签等存储的原 URL 为新 URL。例如，当一个网站的域名发生变更后，访问旧域名会返回 301 状态码，引导用户访问新域名。
- 302 Found：临时重定向，表示请求的资源暂时移动到了新的 URL，服务器同样会通过 Location 字段指定新的 URL。浏览器收到 302 状态码后，会自动转向新的 URL，但不会更新书签等存储的原 URL，下次请求仍会使用原 URL。例如，网站进行维护时，可能会将用户临时重定向到一个维护通知页面。
- 304 Not Modified：未修改，表示客户端请求的资源自上次请求以来没有发生变化，服务器不需要返回资源内容，客户端可以直接使用本地缓存的资源。这有助于减少网络传输量，提高访问速度。例如，当你再次访问一个你之前访问过的网页，且该网页内容没有更新时，服务器可能会返回 304 状态码。
4xx 客户端错误
- 400 Bad Request：请求错误，表示服务器无法理解客户端发送的请求，通常是由于请求报文的格式错误、参数错误等原因导致的。例如，发送的 JSON 数据格式不正确时，服务器可能会返回 400 状态码。
- 401 Unauthorized：未授权，表示客户端需要进行身份验证才能访问请求的资源。通常，服务器会在响应头中提示客户端需要使用的身份验证方式，如用户名密码验证、Token 验证等。例如，访问一个需要登录的页面时，如果没有登录，服务器会返回 401 状态码。
- 403 Forbidden：禁止访问，表示客户端已经通过了身份验证，但没有权限访问请求的资源。例如，普通用户试图访问管理员才能进入的页面时，服务器会返回 403 状态码。
- 404 Not Found：未找到，表示服务器无法找到客户端请求的资源，可能是由于 URL 错误、资源已被删除等原因导致的。这是最常见的客户端错误状态码之一，例如，当你输入一个不存在的网址时，服务器会返回 404 状态码。
5xx 服务器错误
- 500 Internal Server Error：服务器内部错误，表示服务器在处理请求的过程中发生了意外错误，导致无法完成请求的处理。例如，服务器端的代码出现 bug 时，可能会返回 500 状态码。
- 502 Bad Gateway：网关错误，表示服务器作为网关或代理，从上游服务器（如后端应用服务器）收到了无效的响应。例如，当 Nginx 作为反向代理，向后端的 Tomcat 服务器转发请求，但 Tomcat 服务器返回了错误的响应时，Nginx 可能会返回 502 状态码。
- 503 Service Unavailable：服务不可用，表示服务器目前无法处理客户端的请求，可能是由于服务器过载、维护等原因导致的。服务器通常会在响应头中通过 Retry-After 字段告知客户端何时可以再次尝试请求。例如，网站访问量过大，服务器无法处理所有请求时，会返回 503 状态码。
- 504 Gateway Timeout：网关超时，表示服务器作为网关或代理，在等待上游服务器的响应时超时。例如，Nginx 转发请求给后端服务器，但后端服务器长时间没有返回响应，Nginx 会返回 504 状态码。

日常生活中，我们也能遇到类似 HTTP 状态码的场景，比如：

打开网页正常显示，对应 200 状态码，就像你去商店成功买到了想要的东西。
点击一个链接，页面自动跳转到了另一个地址，对应 301 或 302 状态码，如同你去一家店买东西，店员告诉你店铺已经搬到新地址，让你去新地址购买。
输入错误的网址，页面显示 "找不到该页面"，对应 404 状态码，就像你去一个地方找东西，发现那里根本没有你要找的东西。
访问一个需要登录的页面，提示你 "请先登录"，对应 401 状态码，如同你进入一个需要门票的场所，工作人员告诉你必须先买票才能进入。
网站突然无法访问，显示 "服务器错误"，对应 500 状态码，就像你去商店买东西，发现商店内部出了问题，暂时无法营业。

3.总结

综上，Web 是基于 B/S 架构的信息交互系统，HTTP/HTTPS 是其核心通信协议，状态码则是服务器反馈请求结果的 "语言"，共同支撑着互联网的信息传输与交互。

总之，HTTP 状态码是服务器与客户端之间沟通的 "语言"，它清晰地告诉客户端请求的处理结果，帮助客户端和用户了解访问过程中出现的情况。