Skip to content
← 知识

/knowledge/web-information-technology

Web 信息技术

Web 究竟如何运作——从一次点击出发、抵达服务器再返回的那个请求，以及把它变成你此刻正在阅读的页面的那一小撮技术。

学于
Web 信息技术理学学士 · 数据科学核心（82/H1）
时间
墨尔本大学，2019–2022
应用于
构建 rin.contact · 仪表板
阅读 / 复习
约 15 分钟阅读2026-06-25

这一页恰好就是一个网页——所以正好借此解释你正用来阅读它的那个东西。Web 可能感觉像 魔法，但其底下是一小撮清晰的想法：两台计算机之间的一场对话、为这场对话立的一套协议， 以及构建你所见之物的三种语言。理解了它们，整个技术栈就不再神秘。

它也是我在墨尔本最拿手的应用科目，是 数据层之下的地基，每一个仪表板、API 和应用——包括这个网站——都建立其上。下面是从头讲起的 Web。

01

Web 就是请求与响应

Web 上的一切都是客户端（你的浏览器）与服务器（存放网站的 一台计算机）之间的对话。客户端发问，服务器作答——这单一的请求-响应循环 是整个 Web 的心跳。输入一个地址、按下回车，在不到一秒里就发生了相当多的事：

  1. DNS 查询——人类友好的名字（rin.contact）被翻译成一个 数字 IP 地址，相当于 Web 的电话号码。
  2. 请求——你的浏览器打开一个连接，发出一个 HTTP 请求：「请把这个页面 给我。」
  3. 服务器处理——服务器处理它，也许会查询一个数据库，并构建一个响应。
  4. 响应——它把内容（HTML、数据、一张图片）连同一个状态码送回，你的 浏览器把它渲染出来。
浏览器服务器数据库请求查询行响应
请求-响应的往返。一次点击变成一次 DNS 查询、一个发往服务器的 HTTP 请求、可选的数据库处理，以及一个被浏览器渲染的响应。每一次页面加载都是这个循环。

02

HTTP：协议

HTTP（超文本传输协议）是那场对话约定好的语言——规定请求与响应如何 格式化的规则。一个请求会指明一个方法（动词）和一个路径，外加若干头部：

GET /knowledge/ HTTP/1.1
Host: rin.contact
Accept: text/html

这些方法对应你能对一个资源做的事：

  • GET——读取某物（加载一个页面）。绝不应改变数据。
  • POST——创建某物（提交一个表单）。
  • PUT / PATCH——更新某物。
  • DELETE——移除某物。

每个响应都带着一个状态码——那个说明结果如何的三位数：200 成功、301/302 重定向、404 未找到、403 禁止、500 服务器错误。（如果你读过 本站的链接检查，它们验证的正是这个。）关键在于， HTTP 是无状态的：每个请求各自独立，服务器默认在它们之间什么都不记得。 让你跨页面保持登录是搭在其上的一层——cookie 与令牌随每个请求重新发送你的身份。

03

前端三件套

对于一个页面，服务器送回的东西由三种分工清晰的语言构建——这种分离值得内化，因为它 是一切前端工作的心智模型：

  • HTML——结构与内容。标题、段落、列表、链接；骨架。它是一棵 嵌套标签的树。
  • CSS——呈现。颜色、字体、间距、布局——关乎结构看起来如何的 一切。
  • JavaScript——行为。唯一作为程序运行的那个：它响应点击、获取 新数据、并实时改变页面。
<article>
  <h1>Web Information Technology</h1>
  <p>HTML is the structure.</p>
</article>

浏览器把那段 HTML 解析成 DOM（文档对象模型）——一棵代表页面的、活的、 驻留内存的对象树。CSS 为 DOM 设定样式；JavaScript 读取并改写它。当一个页面不重新 加载就更新时，那就是 JavaScript 在改动 DOM。把结构／呈现／行为这一分工保持清晰， 正是让一个网站可维护的关键。

04

客户端 vs 服务器

Web 架构中最深的问题是工作在哪里发生——在页面送出之前于服务器上，还是在 那之后于浏览器里。这是一个真正的权衡，而非已有定论的答案：

  • 服务器端渲染——服务器构建好成品 HTML，送出时即可显示。首次绘制快， 搜索引擎也能看到真实内容。（本页就是这样渲染的。）
  • 客户端渲染——服务器送出一个近乎空壳外加 JavaScript，由浏览器构建 页面。交互更丰富，但首次加载更慢，若做得草率则对 SEO 不利。

现代框架把两者糅合：首次加载在服务器渲染，然后「水合」（hydrate），让 JavaScript 接管交互。知道哪段代码在哪里运行——以及浏览器里的任何东西用户都看得见、改得了， 所以绝不能托付给它任何秘密——正是 Web 工作的核心能力。

05

API 与 JSON

页面是给人看的；API 则是程序之间在 Web 上彼此交谈的方式。一个 API 是 一组定义好的 URL（端点），客户端可以调用它们来获取或改变数据——同样的 HTTP 方法，但响应是结构化的数据而非一个页面。主流风格是 REST：把一切 建模为位于干净 URL 上的资源，并对它们使用 HTTP 动词（GET /users/42 读取用户 42，DELETE /users/42 移除他们）。

回流的数据几乎总是 JSON——一种简单、人类可读的键值对格式，每种语言都能 解析它：

{
  "name": "Rin Huang",
  "role": "Senior Data Analyst",
  "skills": ["Python", "SQL", "Next.js"]
}

这是现代 Web 的骨干：一个前端从 API 获取 JSON，一个手机应用访问同一个 API，一条 数据管线也从它拉取。一个设计良好的 API 服务于它们所有——这正是为什么「Web 上的 数据」与「分析」越来越共用同一套管道。

06

全栈

把它们拼起来，你就有了全栈——一个请求自上而下穿过的各层：

  • 前端（浏览器）——HTML/CSS/JS，用户看到并触碰的东西。
  • 后端（服务器）——应用逻辑：认证、业务规则、构建响应、调用数据库。
  • 数据库——数据持久存放之处，用 SQL 查询。栈的最底层。

一个「全栈」开发者跨这三层工作。流程始终是第 01 节里那同一个循环：浏览器发出请求， 后端运行逻辑并询问数据库，一个响应沿栈向上回到屏幕。每一个 Web 应用，无论多大，都是 这一主题的变奏。

07

Web 安全基础

Web 是公开的，所以有几条安全观念没有商量余地——而当数据敏感时，要紧的正是它们：

  • HTTPS——用 TLS 加密的 HTTP，使流量在传输途中无法被读取或篡改。那把 小锁。今天没有不用的余地。
  • 同源策略——浏览器阻止一个站点的页面读取另一个站点的数据，是站点之间 最根本的那道墙。
  • 永远不要相信客户端——任何从浏览器发来的东西都可能是伪造的，所以 服务器必须始终重新校验。那些经典的攻击（SQL 注入、跨站脚本）全都源于把用户输入 当作可信。

08

这个网站如何运作

一个具体的例子：你正在读的这个页面。rin.contact 用 Next.js（一个 React 框架）构建。内容写成组件；Next 把它们在服务器 上渲染成 HTML，以求一次快速、对搜索友好的首次加载，然后水合，让 JavaScript 处理交互的部分——深色模式、语言切换、导航。知识页上的数学由 KaTeX 渲染成 HTML； 整个网站在代码推送时自动部署，经由一条先做 lint 检查的 CI 管线。本页上的每一个 概念，此刻都在各司其职，把这一页展示给你。

09

它在我工作中的体现

10

60 秒回顾