The Web Wizard's Academy Begins / Web巫师学院开学了

The Web Wizard's Academy Begins / Web巫师学院开学了

小明的浏览器里藏着什么秘密？

/ What Secrets Are Hiding in Xiao Ming's Browser?

---

十四岁的小明盯着屏幕上那个闪闪发光的加载动画，指尖无意识地敲击着桌面。他刚在浏览器地址栏里输入了三个字母——"www"——后面跟着一串奇怪的字符，然后按下回车键。整整三秒钟，他的世界被一个旋转的圆圈占据。

Three seconds. That spinning circle held Xiao Ming's entire attention for three long seconds. At fourteen years old, he'd typed three letters—"www"—followed by some mysterious string of characters into his browser's address bar, then pressed Enter. For three glorious seconds, his world was nothing but a rotating circle.

三秒之后，网页出现了。

After three seconds, the page appeared.

但这短短的三秒钟里，到底发生了什么？

But in those mere three seconds—what *actually* happened?

"这也太神奇了吧！"小明自言自语道，眼睛里闪烁着好奇的光芒。他点开班主任分享的历史资料网站，观看了一场关于二战纪录片，又在游戏论坛里和队友讨论战术。每一个动作，每一次点击，都像是在施展魔法一样——点击一下，世界就在他的屏幕里变换。

"This is *incredible*!" Xiao Ming murmured to himself, eyes sparkling with curiosity. He opened the history resources his homeroom teacher had shared, watched a documentary about World War II, and chatted with teammates on a gaming forum about tactics. Each action, each click, felt like casting a spell—click once, and the world transformed before his eyes.

小明突然意识到：他每天都在使用这个叫"互联网"的东西，却从来没有真正理解过它。就像一个每天都坐飞机却不知道飞机为什么会飞的孩子——他用的很熟练，但总觉得少了点什么。

It suddenly struck Xiao Ming: he used this thing called "the internet" every single day, yet he'd never truly understood it. Like a child who flies regularly but doesn't know why planes stay in the air—perfectly capable of using it, but always feeling like something was missing.

这个想法像一颗种子，在小明心里悄悄发芽。

That thought took root in Xiao Ming's heart like a seed.

"我想知道这到底是怎么运作的，"他对最好的朋友小华说，"不只是会用来玩游戏或者刷视频，我想知道它背后的原理。我想自己也能创造这些东西。"

"I want to know how this actually works," he told his best friend Xiaohua. "Not just to play games or watch videos—I want to understand the principles behind it all. I want to create these things myself."

小华耸了耸肩："那不是程序员的事情吗？我们才初中，能学会吗？"

Xiaohua shrugged. "Isn't that what programmers do? We're just in middle school—can we even learn this stuff?"

小明没有回答。但那天晚上，他在搜索引擎里输入了一个问题："How does the internet work for beginners?"

Xiao Ming didn't answer. But that night, he typed a question into the search engine: "How does the internet work for beginners?"

他的问题触发了数百万条结果。而你手上这本书，正是从类似的问题开始的。

His question triggered millions of results. And this book you're holding? It began with questions just like his.

---

欢迎来到Web巫师学院。

Welcome to the Web Wizard's Academy.

在这段旅程中，你将和小明一起，从完全不懂互联网的初中生，成长为能够独立构建网页和Web应用的"魔法师"。你将学会如何像理解一座城市一样理解互联网——理解它的街道、建筑和交通规则。然后，你将亲手拿起代码这把魔杖，在数字世界里创造属于你自己的奇迹。

On this journey, you'll join Xiao Ming from being a middle schooler who knows nothing about the internet, to becoming a "wizard" capable of building web pages and applications independently. You'll learn to understand the internet the way you'd understand a city—its streets, buildings, and traffic rules. Then, you'll pick up code as your magic wand and create miracles of your own in the digital world.

但在我们正式施放第一个魔法之前，我们需要先了解魔法的基础原理。

But before we cast our first spell, we need to understand the fundamentals of magic itself.

这一章，我们将回答三个根本性的问题：

In this chapter, we'll answer three fundamental questions:

1. 互联网究竟是什么？ 它是如何将世界各地的电脑连接在一起的？ 2. 当你访问一个网站时，到底发生了什么？ 那三秒钟里，你的电脑和服务器之间说了什么悄悄话？ 3. 成为Web开发者意味着什么？ 想要创造Web世界的魔法，你需要掌握什么技能？

Let's begin.

---

互联网作为网络的网络

/ The Internet as a Network of Networks

从寄信到数据包：信息如何在互联网上旅行

/ From Letters to Packets: How Information Travels on the Internet

想象一下你要给远在美国的笔友寄一封信。你写好信，装进信封，写上地址，贴上邮票，扔进邮筒。然后呢？

Imagine you're mailing a letter to a pen pal in the United States. You write the letter, seal it in an envelope, write the address, stamp it, and drop it in the mailbox. Then what?

邮递员会把这封信收集起来，送到邮局。邮局按照地址分类，可能先送到你所在城市的分拣中心，然后送到国际机场，接着飞越大洋，再经过美国那边的海关、分拣中心、地区邮局，最后才到达收信人手里。收信人打开信封，阅读你的信，然后可能再写一封回信，按照同样的过程寄回来。

The postal worker collects your letter, sends it to the post office. The post office sorts it by address, possibly routing it through your city's distribution center, then to the international airport, across the ocean, through customs on the other side, then regional post offices, until finally it reaches your recipient. They open the letter, read your message, then might write a reply and send it back through the same process.

这个过程你已经非常熟悉了。互联网的工作方式，其实和寄信惊人地相似——只是速度快了无数倍。

This process is already familiar to you. The internet works surprisingly similarly to sending mail—just millions of times faster.

当你发送一条微信消息、打开一个网页、或者发送一封电子邮件时，你的信息并不是作为一个完整的整体传输的。和寄信不同，互联网会把你的信息切割成无数个小包裹，每个包裹都写上"从哪里来"和"要到哪里去"的地址，然后这些小包裹通过各种各样的"交通工具"——网线、光纤、卫星信号、Wi-Fi无线电波——被发送到目的地，最后在接收端重新组装成完整的信息。

When you send a WeChat message, open a webpage, or send an email, your information doesn't travel as one complete unit. Unlike physical mail, the internet chops your message into countless tiny packages, each labeled with "where it came from" and "where it's going." These packages then travel via various "vehicles"—Ethernet cables, fiber optic cables, satellite signals, Wi-Fi radio waves—to their destination, where they're reassembled into the complete message.

这些小包裹有一个专门的名字：数据包（Packet）。

These tiny packages have a special name: Packets.

协议：互联网的"交通规则"

/ Protocols: The "Traffic Rules" of the Internet

你可能会问：如果全世界这么多人同时在网上传输数据包，它们不会撞车吗？信件可能会寄错或者丢失，但互联网怎么保证我的消息能够准确地到达目的地？

You might ask: If millions of people are transmitting packets simultaneously worldwide, won't there be collisions? Letters can get lost or misdelivered—how does the internet ensure my message reaches its destination accurately?

答案在于协议（Protocol）。

The answer lies in Protocols.

想象一下，如果没有交通规则，红绿灯，或者驾驶执照，城市会变成什么样？所有的汽车、行人、自行车会乱成一团，交通瘫痪，事故频发。

Imagine what a city would look like without traffic rules, traffic lights, or driver's licenses. Cars, pedestrians, and bicycles would create total chaos—gridlock and constant accidents.

互联网也有它的"交通规则"。协议就是一套所有连接到互联网的设备都必须遵守的规则和约定。 这些规则定义了数据包如何被切割、如何被寻址、如何被传输、如何被检查错误、如何在目的地重新组装。正是因为有这些协议，全世界数十亿台设备才能有条不紊地交换信息。

The internet has its own "traffic rules" too. Protocols are a set of rules and agreements that all internet-connected devices must follow. These rules define how packets are fragmented, addressed, transmitted, error-checked, and reassembled at the destination. It's because of these protocols that billions of devices worldwide can exchange information in an orderly fashion.

举一个具体的例子。假设小明想给在美国的小华发一条消息："Hello, Xiaohua!" 这条消息在互联网上的传输过程大致如下：

Let's walk through a concrete example. Suppose Xiao Ming wants to send a message to Xiaohua in the US: "Hello, Xiaohua!" Here's roughly how that message travels across the internet:

1. 分割：消息被切割成几个数据包，比如 ["Hel", "lo, ", "Xia", "ohua", "!"]。 2. 打包：每个数据包都被贴上标签，包含小明的IP地址、小华的IP地址、以及它在原始消息中的顺序编号。 3. 路由：数据包从路由器跳到路由器，每个路由器都查看数据包上的地址，决定下一步应该送到哪个相邻的路由器——就像快递在各个中转站之间转运。 4. 校验：每个数据包在传输过程中都会被检查是否有损坏。如果发现问题，接收端会要求发送端重新发送。 5. 重组：当所有数据包都到达小华的电脑后，它们会按照顺序编号重新组装成完整的消息。 6. 分割：The message gets fragmented into several packets, like ["Hel", "lo, ", "Xia", "ohua", "!"]. 7. 打包：Each packet gets labeled with Xiao Ming's IP address, Xiaohua's IP address, and its sequence number in the original message. 8. 路由：Packets hop from router to router, each router checking the address and deciding which neighboring router to send it to next—like packages moving between logistics hubs. 9. 校验：Each packet gets checked for corruption during transmission. If a problem is detected, the receiver requests the sender to resend. 10. 重组：Once all packets reach Xiaohua's computer, they're reassembled in order by their sequence numbers.

整个过程只需要几毫秒——比你眨一下眼睛还要快。

The whole process takes just milliseconds—faster than you can blink.

万维网和互联网：别再搞混了

/ The World Wide Web vs. The Internet: Time to Clear This Up

在继续之前，我们需要澄清一个很多人都会搞混的概念：互联网（Internet） 和 万维网（World Wide Web，通常简称Web） 不是同一个东西。

Before we continue, let's clarify a concept that confuses many people: The Internet and **the World Wide Web (commonly call