【计维】从零开始理解网页——网页的构成与工作原理解析

0 前言

作为一名地理信息科学专业的本科生，我的学习内容涵盖了大量的数据处理、空间分析和WebGIS开发。随着地理信息系统的不断发展，WebGIS作为一种重要的技术手段，已经成为现代互联网应用的重要组成部分。无论是在地图展示、空间分析，还是大数据处理，WebGIS都扮演着越来越重要的角色。然而，要真正理解和应用这些技术，我们必须掌握网页（Web）开发的基础知识。因此，在这篇推文中，我将深入探讨网页的构成和工作原理，带你了解网站的构成和工作原理。

1 引子——小凉偷菜的故事

要说我对网站的初印象，得追溯到我四岁的时候，当时我迷上了电脑上的QQ农场偷菜。每次打开浏览器，输入网址，看到五彩斑斓的网页时，我就好奇：

  1. 为什么我输入这一串神秘英文之后，电脑的画面就变到QQ农场里去了？
  2. 为什么我点一下别人的菜就能偷到自己的农场里？

这一切，都和网站的运行原理有关！

2 网页的组成部分

通常情况下，一个完整的网页是由 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript（脚本语言）这三大部分共同构成的。他们学习起来很简单。（下文中的图片素材截自视频：https://www.bilibili.com/video/BV14J4114768）

  • HTML：网页的骨架。仅使用HTML语言来写的网页，画面非常原始，是一点颜色都没有啊。一开始的网站都是这样的，但是随着时代的发展，人们开始觉得这样的网页太丑了，那咋办？

    Pasted image 20250208160349.png

  • CSS：网页的皮肤。丑就充钱买皮肤（bushi），运用HTML+CSS的网页长这个样子，好看了很多。

    Pasted image 20250208160623.png

  • JavaScript：网页的智慧。事先说明，JavaScript和Java没有半毛钱关系！只是名字有点像而已。现在的网页，只是虚有其表，万一我真的想谈恋爱，想要和上面的网站互动，只有HTML+CSS是不行的，得需要JavaScript脚本实现与服务器的交互。
    它的主要功能有：

    1. 动态更新网页内容
    • 功能：JavaScript可以在网页加载后修改页面内容，如添加或删除元素、更新文本等。
    • 实例：当你在某个网站上填写表单并点击提交时，表单可能会动态显示提交成功或失败的消息，而无需刷新页面。
    1. 处理用户输入与交互
    • 功能：JavaScript处理用户的交互事件（如点击、键盘输入、鼠标移动等），并响应相应的操作。
    • 实例：在购物网站上，当你点击“加入购物车”按钮时，购物车的数量会即时更新，无需重新加载页面。
    1. 表单验证
    • 功能：JavaScript可以对用户输入的表单数据进行验证，确保数据有效性。
    • 实例：在登录页面，JavaScript验证你输入的电子邮件格式是否正确，或密码是否符合要求。
    1. 动画效果
    • 功能：JavaScript可以为网页元素添加动画效果，增强用户体验。
    • 实例：在在线图片库中，点击某个缩略图时，图片可能会平滑地放大显示，带有过渡动画。
    1. **浏览器存储
    • 功能：JavaScript允许浏览器存储数据（如用户偏好设置或登录状态），即使刷新页面也能保持数据。
    • 实例：在电子商务网站上，JavaScript可以存储你在购物车中的商品，即使你暂时离开，重新进入网站后，购物车内容仍然保留。

3 网页的工作原理

3.1 用户发起请求

基础概念

  • URL:（Uniform Resource Locator，统一资源定位符）一个完整的 URL 可能看起来像这样https://www.example.com:443/path/to/page.html?id=123&sort=desc#section2,URL实际上就是互联网上资源的详细地址，可能大家习惯叫它网址了，它由多个部分构成，每个部分都有特定的作用，如下所示。

    • 协议（Scheme）
      • 作用：指定如何访问资源，也就是告诉浏览器使用哪种“通信方式”。
      • 例子：http、https、ftp 等。
      • 比喻：就像你出门前决定是坐公交、打车还是骑自行车，不同的协议决定了数据传输的“交通工具”。
    • 域名或IP地址（Host）
      • 作用：指明资源所在的服务器位置。
      • 例子：www.example.com 或者直接使用 IP 地址如 192.0.2.1。
      • 比喻：就像你朋友家的具体地址，告诉你目标服务器在网络世界中的“地理位置”。
    • 端口号（Port）
      • 作用：指定服务器上用于访问该服务的“门牌号”，有时用于区分服务器上运行的不同服务。
      • 例子：HTTP 默认使用 80 端口，HTTPS 默认使用 443 端口；例如 www.example.com:8080 中的 8080。
      • 比喻：相当于你朋友家中具体的房间号码，确保你敲对了门进入正确的房间。如果没有特别指定，通常会使用默认端口。

    • 路径（Path）
      • 作用：指出在服务器上的具体资源位置，比如一个网页或文件。
      • 例子：/index.html 或 /products/item1。
      • 比喻：就像在一座大楼内的楼层和房间号，告诉你具体去哪个房间找需要的东西。
    • 查询字符串（Query）
      • 作用：用于传递参数给服务器，通常用于动态请求数据。
      • 例子：?id=123&sort=desc 表示传递了两个参数 id 和 sort。
      • 比喻：就像你到达朋友家门口后，通过电话告诉他你需要他帮忙取哪本书，这些参数帮助服务器知道你具体的需求。
    • 片段标识符（Fragment）
      • 作用：用于在资源内定位到特定部分，比如网页中的某个段落或标题。
      • 例子：#section2 指向页面中名为 section2 的部分。
      • 比喻：就像你到达一个大型展览馆后，有指示牌引导你直达某个展区，这部分帮助浏览器快速定位到页面中的具体位置。、

    下面再举一个具体的 URL例子
    5d95df82eb70e79f1e24f7b8cb4d300.png

  • IP地址:简称IP（Internet Protocol Address，互联网协议地址）是互联网上每个设备或计算机的唯一标识符。它的作用是让不同的设备能够互相找到和通信。IP地址类似于我们日常生活中的住址，通过IP地址，网络中的设备能够识别和定位其他设备。IP 地址主要有两种版本：IPv4 和 IPv6，这里我们主要以常见的IPv4为例来讲解它的组成。
    - 总位数：IPv4 地址由 32 位（二进制）组成，通常用点分十进制表示，例如：192.168.1.1。
    - 分成两个部分：将 32 位分为四个 8 位的部分，这 32 位可以看作两个部分：网络部分和主机部分。这两个部分共同确定了一个设备在整个互联网中的“住址”。每个部分转换成 0~255 之间的数字，这四个数字之间用点号 . 分隔。网络部分：前 24 位，即前三个八位组，也就是 192.168.1。主机部分：最后 8 位，也就是最后一个八位组，这里是 1。

  • DNS:（Domain Name System，域名系统）DNS 是互联网中的“地址簿”，其主要功能是将人们容易记忆的域名（如 www.example.com）转换成计算机能够识别的 IP 地址（如 192.0.2.1）。

  • TCP:（Transmission Control Protocol，传输控制协议）TCP 是互联网上一种主要的传输层协议。可以把 TCP 想象成一个非常负责、细心的邮递员，确保每一封信或每一个包裹都能安全、完整、有序地送达目的地。在你寄送重要信件之前，你需要先打电话给朋友，确认他在家并愿意接收包裹。这个“确认”过程就像 TCP 建立连接时的“三次握手”，确保双方都准备好了，才开始正式传递信息。

用户请求发起流程

  1. 用户输入URL：网站的地址（URL）被输入到浏览器中，例如https://www.example.com
  2. DNS解析：浏览器会向域名系统（DNS）发送请求，获取托管目标网站的Web服务器（下文中有定义）的IP地址。DNS将www.example.com转换成一个可以定位服务器的IP地址。
  3. 建立TCP连接（建立一个管道）：在进行数据传输前，浏览器与服务器需要先建立一个连接，而在数据传输过程中，TCP会确保数据按顺序到达，并且没有丢失。如果发生丢失或错误，TCP会负责重新传输数据。这就像在数据运输之前，双方事先搭建了一根管道，数据将会在管道中“流动”。

3.2 浏览器发送HTTP请求

基础概念

  • HTTP协议：（Hypertext Transfer Protocol，超文本传输协议）是一种用于客户端和服务器之间传输数据的协议，主要用于浏览器向Web服务器请求和获取资源。HTTP是一个无状态的、应用层的协议，意味着每次请求都是独立的，服务器不会记住上次的请求状态。

  • HTTP请求：（Hypertext Transfer Protocol Request）超文本传输协议请求是指客户端（通常是浏览器）向Web服务器发出的请求，以获取资源或与服务器进行交互。HTTP请求遵循HTTP协议，该协议是客户端和服务器之间通信的标准协议。HTTP请求的目的是请求服务器上的资源，如网页、图片、视频等文件，或者执行某些操作（如提交表单、执行API操作等）。

HTTP请求实例

  • 发送HTTP请求：当TCP连接建立后，浏览器向目标网站发送一个HTTP请求，告知服务器需要访问的资源（例如一个HTML页面）。
  • 假设浏览器想访问 https://www.example.com/index.html 页面，以下是一个简单的HTTP请求示例：
    1
    2
    3
    4
    5
    6
    7
    GET /index.html HTTP/1.1               // 请求行: 使用 GET 方法请求 /index.html 页面，并指定 HTTP/1.1 协议
    Host: www.example.com                // 请求头: 指定目标主机名，服务器通过这个字段知道要响应哪个站点
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36  
                                 // 请求头: 浏览器类型，服务器可根据此信息定制响应
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8  // 请求头: 浏览器可接受的响应内容类型
    Accept-Encoding: gzip, deflate, br     // 请求头: 客户端支持的压缩编码方式
    Connection: keep-alive                // 请求头: 请求完成后保持TCP连接，不关闭

3.3 服务器处理请求

基础概念

  • Web服务器：（Web Server）是一个专门用于处理Web请求和响应的服务器。它接收来自客户端（通常是浏览器）的HTTP请求，处理这些请求并返回相应的资源（如HTML文件、图片、视频等）。下面是一些常见的Web服务器。

    • Apache HTTP Server：最流行的开源Web服务器之一，广泛用于Unix和Linux平台，也支持Windows。Apache支持多种编程语言，并且通过模块化设计支持各种功能扩展。
    • Nginx：一个轻量级、性能优异的Web服务器，常用于负载均衡和反向代理。Nginx以其高效的资源使用和并发连接处理能力而著称。
    • Microsoft IIS（Internet Information Services）：这是微软的Web服务器软件，常见于Windows服务器操作系统。
    • LiteSpeed：一个高效的Web服务器，常用于高流量网站，具有更高的性能和安全性。

  • 静态内容： 静态内容指的是那些不需要经过服务器端计算和处理，直接从存储（如硬盘、CDN等）中读取并返回给客户端的文件。它们的内容在请求时不会发生变化，除非文件本身被修改。

    示例：

    • HTML文件：如网页的静态页面，文件内容不发生变化。
    • CSS文件：网页的样式表，用于控制网页的布局和样式。
    • JavaScript文件：用于网页中的交互效果或功能的脚本文件。
    • 图片文件：如.jpg、.png、.gif等格式的图像文件。
    • 视频文件：如.mp4、.avi等格式的视频文件。
    • 字体文件：如.woff、.ttf等格式的字体文件。

  • 动态内容： 动态内容指的是那些在每次请求时根据用户输入或其他条件动态生成的内容。这些内容通常需要经过应用服务器的处理，如数据库查询、业务逻辑运算、数据渲染等操作，生成的页面内容可能会因请求不同而不同。

    示例：

    • PHP页面：如index.php，在服务器端执行PHP代码后生成的HTML内容。
    • Python页面：如通过Django或Flask框架生成的动态HTML页面。
    • Java页面：通过Java Web应用框架（如Spring）动态生成的HTML页面。
    • ASP.NET页面：通过ASP.NET动态生成的Web页面。
特性 静态内容 动态内容
生成方式 文件内容预先存在，直接从存储中读取 内容在每次请求时动态生成
响应速度 通常更快，因为无需计算 需要额外的计算和生成时间
服务器负载 低负载，服务器只需提供文件 需要更多计算资源（例如处理数据库查询）
交互性 无法根据用户输入实时变化 可以根据用户输入或数据库变化动态生成
缓存机制 可以高效缓存 通常不容易缓存，需要缓存生成结果或部分内容
适用场景 网站的样式表、图片、视频等静态资源 用户交互、表单提交、数据库查询、个性化内容等

服务器处理流程

  • Web服务器接收请求：HTTP请求到达服务器上的Web服务器。Web服务器负责接收请求并判断如何处理这些请求。
  • 动态与静态内容：如果请求的是静态文件（如图片、CSS、JavaScript文件），Web服务器直接将这些文件返回给浏览器。如果请求的是动态页面（如PHP、Python、Java等生成的页面），则会将请求转发给相应的应用服务器。

HTTP请求和服务器处理请求的区别

概念 HTTP请求 服务器处理请求
定义 客户端发出的请求消息，包含请求的方法、资源、头信息和数据。 服务器接收到HTTP请求后，根据请求生成并返回响应的过程。
发起者 由客户端（如浏览器、应用程序）发起。 由服务器响应客户端的请求并处理它。
内容 包含请求的资源（URL）、请求方法、头信息、可能的请求体。 解析请求、路由请求、执行逻辑、生成响应并返回给客户端。
主要功能 向服务器请求资源或执行操作（如提交表单、查询数据）。 根据请求生成相应内容，并将其发送回客户端。
举例 客户端请求：GET /index.html HTTP/1.1。 服务器接收到请求后，可能返回HTML页面、图片或动态内容。

3.4 应用服务器处理请求

  • 处理动态请求：如果是动态页面，Web服务器将请求转交给应用服务器。应用服务器（如Node.js、Django、Spring等）执行相关的业务逻辑，可能需要从数据库（MySQL、PostgreSQL、MongoDB等数据库）中获取数据，处理后生成HTML、JSON或其他格式的数据。

3.5 Web服务器返回响应

  • 返回HTTP响应：Web服务器将应用服务器生成的内容作为HTTP响应返回给浏览器。响应中包括响应头（如状态码、缓存策略等）和响应体（即网页内容）。
    • 如果响应成功，状态码为200。如果页面不存在，状态码为404等。

3.6 浏览器渲染页面

  1. 解析HTML：浏览器开始解析返回的HTML文件，并生成DOM（Document Object Model）树。DOM树是页面内容的结构化表示，包含所有HTML标签和其相互关系。

  2. 请求其他资源：在解析HTML时，浏览器会发现其中引用的外部资源，如CSS文件、JavaScript文件和图片等。此时，浏览器会发起额外的HTTP请求以加载这些资源。

  3. 渲染CSS：浏览器加载CSS文件并构建CSSOM（CSS Object Model）树，表示所有的样式信息。接着，浏览器将CSSOM树与DOM树结合，生成渲染树（Render Tree），它包含了页面中所有需要显示的内容及其样式信息。

  4. 执行JavaScript：浏览器解析和执行页面中的JavaScript代码。这些脚本可能会修改DOM树和CSSOM树的结构或样式，甚至发起更多的网络请求（例如AJAX请求）来更新页面内容。

3.7 网站工作流程总结

最终，浏览器根据这些信息进行布局、绘制和合成，平时我们看到的网页就出现在我们面前了，最后，让我简单总结一下整个流程。

  1. 用户输入URL：用户在浏览器中输入网址。浏览器解析并提取URL中的信息（如协议、域名、路径等）。
  2. DNS解析：浏览器通过DNS将域名解析为IP地址，找到Web服务器（Nginx、Apache等）。
  3. 建立TCP连接：浏览器与Web服务器建立TCP连接，准备传输数据。
  4. 发送HTTP请求：浏览器向服务器发送HTTP请求，获取网页资源。
  5. Web服务器处理请求：服务器接收并处理请求，返回相应内容（静态或动态）。
  6. 浏览器渲染页面：浏览器解析返回的HTML，加载CSS和JavaScript，最终渲染出完整页面。

4 实战：上线你的网站——以ryotech.top博客站为例

4.1 你需要什么

  1. 域名
    用于给你的网站提供一个可识别的地址（例如 ryotech.top）。
    来源：GoDaddy、阿里云、腾讯云、Namecheap等域名注册商，比较便宜。

  2. Web服务器
    用于托管你的网站文件并处理请求。
    来源：Apache、Nginx、LiteSpeed、Microsoft IIS等Web服务器软件。

  3. 网页文件
    包括HTML、CSS、JavaScript文件，用于构建和美化网页。
    来源：手动编写或通过网站构建平台生成（如WordPress、Wix等），推荐使用Hexo、Halo等博客框架，可以不需要懂前端知识也能生成网页文件，你只需要负责写文章就完事了。

  4. SSL证书
    用于加密数据传输，确保网站的安全性和用户数据的保护。
    来源：Let’s Encrypt（免费）、GlobalSign、DigiCert、阿里云等SSL证书提供商，其中阿里云等部分提供商能给有限度的免费证书。

  5. DNS服务
    用于将域名指向Web服务器的IP地址，确保用户能够通过域名访问你的网站。
    来源：Cloudflare、阿里云DNS、GoDaddy等DNS服务商。

  6. FTP工具 （非必须）
    用于将你的网页文件上传到Web服务器。 如果使用宝塔面板等服务器工具，直接把文件拖进去就可以。
    来源：FileZilla、Cyberduck、WinSCP等FTP客户端工具。

  7. 数据库 （非必须）
    用于存储动态内容，如果你想要上线的是一个像个人博客的静态网站，可以不用数据库。
    来源：MySQL、PostgreSQL、MongoDB等数据库软件，或云服务提供商的数据库服务。

4.2 上线步骤

步骤 1：购买并配置域名

  • 选择域名注册商：选择一个域名注册商（如GoDaddy、阿里云、腾讯云或Namecheap），购买你想要的域名（例如 ryotech.top）。
  • 注册并设置域名：在注册商平台完成域名的注册，并登录管理面板进行配置。设置域名解析（DNS记录），将域名指向你所购买的云服务器的IP地址。

步骤 2：选择并配置云服务器

  • 选择云服务提供商：选择云服务提供商（如AWS、阿里云、腾讯云等），并创建一个云服务器实例。根据你的需求选择适合的服务器配置。
  • 配置服务器：选择合适的操作系统（如Ubuntu、CentOS等），并为服务器分配公网IP地址，确保能够从互联网访问。
  • 在云服务器上安装Web服务器：在云服务器上安装并配置Web服务器。你可以选择常见的Web服务器软件，如Nginx、Apache或LiteSpeed。通过SSH连接到服务器并执行安装命令。

步骤 3：上传网页文件到云服务器

  • 使用宝塔面板（推荐）：如果你使用宝塔面板，可以通过宝塔面板的文件管理器，将你的网页文件（HTML、CSS、JavaScript等）直接拖拽上传到云服务器的指定目录。
  • 使用FTP客户端（可选）：如果你更倾向于使用FTP工具，可以通过FTP客户端（如FileZilla）连接到云服务器，并将本地网页文件上传到服务器的Web目录。

步骤 4：配置数据库（如果需要）

  • 选择数据库：如果你的网站需要数据库（例如用于存储文章或评论），可以选择在云服务器上安装MySQL、PostgreSQL等数据库系统。
  • 数据库连接配置：在你的网页文件中配置数据库连接信息（如数据库名称、用户名、密码等）。
  • 上传数据库：如果有现成的数据库数据，可以通过数据库管理工具（如phpMyAdmin）导入数据。

步骤 5：申请并安装SSL证书

  • 申请SSL证书：通过Let’s Encrypt（免费）或其他SSL证书提供商（如GlobalSign、DigiCert等）申请SSL证书。大部分云服务提供商（如阿里云、腾讯云等）也提供SSL证书。
  • 安装SSL证书：根据SSL证书提供商的安装指导，将证书安装到你的云服务器上，确保你的网站支持HTTPS加密连接。
  • 配置重定向：在Web服务器配置中，强制所有HTTP请求重定向到HTTPS，确保网站始终通过加密连接访问。

步骤 6：配置DNS服务

  • 设置DNS记录：在你购买域名的注册商平台，进入DNS管理面板，设置A记录或CNAME记录，将域名指向你云服务器的公网IP地址。
  • 验证DNS解析：可以通过命令行工具（如ping或nslookup）检查域名解析是否正确指向你的云服务器。

现在，你的网站应该就能被人访问到了！快去拉上你的好朋友试试吧。

5 你学会偷菜了吗？

哈哈，现在我们已经讲解完了网站的构成和运作原理，你现在再想一想，“菜”是怎么被“偷”的？

5.1 为什么我输入这一串神秘英文之后，电脑的画面就变到QQ农场里去了？

当你输入网址并按下回车键时，浏览器会根据你输入的URL（统一资源定位符）向服务器发起请求。URL实际上是互联网上资源的地址，浏览器将其解析为一个具体的资源请求，类似于你输入了一张地图上的“目的地”。

浏览器通过DNS（域名系统）将你输入的域名（如www.qqfarm.com）转换为对应的IP地址，这个IP地址指向托管QQ农场页面的Web服务器。浏览器使用HTTP协议（超文本传输协议）向Web服务器发送请求，请求页面内容。当服务器收到请求后，它会根据你的请求返回相应的网页文件（HTML、CSS、JavaScript等），并在浏览器中展示出你看到的QQ农场界面。

简而言之，输入网址后，浏览器和服务器之间通过互联网进行一系列的信息交换，最终将QQ农场的网页内容呈现在你的屏幕上。

5.2 为什么我点一下别人的菜就能偷到自己的农场里？

当你点击网页中的某个元素（例如“偷菜”按钮）时，浏览器会触发一个JavaScript事件，这通常是由网页中的JavaScript代码实现的。这段代码会向服务器发送请求，告知服务器你想进行某个操作（比如偷菜）。

在后台，Web服务器会根据你的请求，处理相应的逻辑（例如验证你是否有权限偷菜、更新你的农场数据等），并返回一个结果（如更新后的农场信息）。然后，浏览器通过JavaScript动态更新页面，显示你偷菜后的农场状态，而无需刷新整个页面。

这背后使用的技术主要包括AJAX（异步JavaScript和XML），它使得网页可以在不重新加载的情况下与服务器进行数据交换，从而实现更快速的用户交互体验。

总结来说，点击“偷菜”按钮时，浏览器和服务器通过JavaScript和AJAX技术互动，更新你的农场数据，最终呈现出你偷到菜的结果。

6 结语

本文仅对Web的世界作了非常简单的解释，如果希望对网站的世界有更深的理解，还需要各位努力学习更加优质的教程！

由于作者水平有限，文章如有错误或缺漏，请批评指正！