网页是怎么打开的

一口气看完整段旅程

你在浏览器里输入一个地址，按下回车。一眨眼，一整张做好的网页就摆在你面前——文字、图片、按钮，各就各位。它感觉像是一瞬间完成的，但其实是几位「选手」之间一场小小的接力赛，一棒接一棒地传下去。

这场接力赛分四棒：先是你的电脑找到网页住在哪里，然后向对应的服务器索取它，接着服务器回应，最后你的浏览器把一切画成你看到的页面。我们会一棒一棒慢慢讲，用大白话，从此你再也不用对着那个转圈的加载图标发愁了。

第一棒——找到那个地方

你输入的地址——比如 https://example.com/about——叫做网址（URL）。把它想成一个完整的邮寄地址：它说明了要讲哪种「语言」（https:// 这部分）、你想去哪个站点（example.com）、以及那个站点上具体哪一页（/about）。它就是整趟旅程的「去哪儿」。

但网络其实看不懂 example.com 这样的名字——它靠数字来寻路，就像电话系统需要的是号码，而不只是一个人的名字。所以第一件正经事是一次查询：把名字翻译成数字。这正是 DNS 的工作，它是互联网的电话簿。你给它 example.com，它回给你一个像 93.184.216.34 这样的地址。

第二棒——这场对话

现在你的浏览器知道了服务器的号码，就可以去敲门、索取网页了。它们之间讲的「语言」是 HTTP——本质上就是一种礼貌、有条理的说法：「请把 /about 这一页发给我。」你的浏览器发出一个请求（request），服务器回一个回应（response）。先提问，再回答。这一来一回，就是整个网络的核心。

每个回应都盖着一个状态码——一个三位数，告诉你结果如何。200 表示「给你，一切正常」。404 表示「我找了，但没有这个名字的页面」。500 表示「我这边出岔子了」。你会慢慢学会把它们读成服务器的「心情指示灯」。

GET /about HTTP/1.1
Host: example.com

--- the server replies ---
HTTP/1.1 200 OK

一个索取 /about 的请求，以及一个表示「网页给你」的 200 OK 回应。

你会注意到大多数地址用的是 HTTPS，而不是普通的 HTTP——多出来的那个 S 代表安全（secure）。它把整场对话装进一个封好的信封里，这样和你共用同一家咖啡店 wifi 的人就读不到你的密码、也没法把网页偷换成假的。普通 HTTP 是一张谁都能看的明信片；HTTPS 是一个上了锁的信封。永远优先选上了锁的那个。

第三棒——服务器作答

那么到底是谁收到那个请求呢？在服务器这台机器上，有一个长期运行的程序，它唯一的工作就是守在那里等访客。它常常是一个守护进程（daemon）——一种安静运行在后台、没有窗口、只负责监听的程序。它守在一个带编号的「门」上，这个门叫端口（port，网页常用的门是 HTTPS 的 443 端口），就像一栋公寓楼只有一个街道地址，却有许多房间号。

对一个简单的网页，服务器只要把一个文件递回来就行。但很多时候网页需要实时数据——你的订单记录、今天的天气——于是服务器程序会去调用一个 API，也就是一个标签清晰的「数据服务柜台」。你在某个具体的端点（endpoint，一个像 /api/weather 的网址）发问，它通常用 JSON 回答——一种整洁的文本格式，电脑和人都读得懂。

{
  "city": "Taipei",
  "temp": 28,
  "sky": "clear"
}

一个 API 端点返回的典型 JSON 回应——一个个贴了标签的数据盒子，很好读。

第四棒——浏览器搭建页面

回来的并不是一张网页的图片——而是做网页的一份「食谱」，你的浏览器就是那位厨师。这份食谱由三种配料协作而成。HTML 是结构：标题、段落、按钮，就像房子的毛坯框架。它说的是页面上有什么，还没说长什么样。

CSS 是样式——颜色、字体、间距，是给毛坯房刷的漆和摆的家具，让它好看起来。JavaScript 是行为——它让东西会动、会反应：能展开的菜单、能加入购物车的按钮、不刷新就能更新的内容。你的浏览器把这三样都读进来，组装成你面前这个「活」的页面。

两个常让新手犯迷糊的东西

第一，网站是怎么在不同页面之间记住你的，让你不必每点一下就重新登录一次？答案是 Cookie——服务器请你的浏览器保管的一张小纸条，下次请求时再出示给它看。它通常只装着一串没有含义的 ID，服务器一看就认出「哦，这是刚才那个访客」。「保持登录」和你的购物车，就是靠它在一页又一页之间延续下来的。

第二，有时当一个页面试图从你所在网站之外的另一个网站抓取数据时，你会在控制台里看到一个吓人的红色 CORS 错误。它与其说是你代码里的 bug，不如说是一条安全规则：默认情况下，浏览器不允许 A 网站悄悄读取 B 网站的数据，除非 B 网站明确说过「可以，我允许」。第一次碰到会觉得很烦，但它的存在是为了防止某个可疑页面，从你已登录的另一个网站里偷走你的数据。

小结——这场接力赛，从头到尾

这就是整趟旅程。这里头没有任何魔法——不过是四次交接，发生得比你眨眼还快，每次你打开一个页面时都在重演。一旦你能叫出每一棒的名字，网络就不再是一个神秘的黑盒，而变成你能琢磨、能动手戳一戳、最终能亲手搭建的东西。

找到地方：网址（URL）指明方向，DNS 把名字翻译成数字。
展开对话：浏览器发出 HTTP/HTTPS 请求，得到一个带状态码的回应。
拿到回应：一个在端口上监听的服务器程序作答，有时还会从 API 端点取来 JSON 形式的新数据。
搭建页面：浏览器把 HTML、CSS、JavaScript 组装成你最终看到的样子。