第01期 | 写下第一行HTML：网页到底怎么运行的

🎯 今天你将学会

• 理解网页的工作原理：从输入网址到页面呈现，中间发生了什么
• 写出你的第一行HTML代码，并在浏览器中打开它
• 认识HTML文档的基本结构：标签、元素、属性
• 学会用浏览器的开发者工具检查网页
• 第一次让AI帮你解释代码和报错信息

📖 核心知识

从一个日常动作说起

你每天都会做这样一件事：打开浏览器，在地址栏输入一个网址，按下回车，然后一个页面就出现在你眼前。

这个过程如此自然，以至于我们从来没有想过——当你按下回车的那一刻，到底发生了什么？

让我用一个类比来解释。

想象你去一家餐厅吃饭。你（浏览器）坐在座位上，翻开菜单（网址），向服务员（DNS服务器）问清楚厨房（服务器）在哪，然后把你的点单请求（HTTP请求）发给厨房。厨房收到订单后，开始准备菜品（生成HTML），做好了端上来（HTTP响应）。你收到菜品后，按照摆盘方式把菜一道道摆到桌上（渲染页面），最终你看到了一桌完整的饭菜（网页）。

让我们把这个过程拆得更细一点：

第一步：浏览器解析网址

当你在地址栏输入https://example.com时，浏览器首先要搞清楚这个网址指向哪台服务器。网址里的example.com叫做域名，它就像一个门牌号，但计算机并不认识门牌号，计算机只认识IP地址——一串数字，比如93.184.216.34。

第二步：DNS查询

于是浏览器去问DNS服务器——互联网的"电话簿"——"example.com 的IP地址是多少？“DNS服务器查了一下，告诉你"是 93.184.216.34”。这个过程通常只需要几十毫秒，但它确实发生了。

第三步：建立连接

拿到IP地址后，浏览器向那台服务器发起一个连接请求。如果是HTTPS（现在绝大多数网站都是），还会进行SSL/TLS握手——简单说就是双方确认"你真的是你吗？我们的对话会被偷听吗？"握手完成后，你和服务器之间就有了一条加密的通道。

第四步：发送请求

浏览器通过这条通道发送一个HTTP请求，大致意思是：“你好，我想要 example.com 首页的内容。”

第五步：服务器处理并返回

服务器收到请求后，找到对应的文件，通过HTTP响应发送回来。这个文件通常就是HTML文档——一个纯文本文件，里面用特殊的标记描述了页面的结构。

第六步：浏览器渲染

这是最神奇的部分。浏览器拿到HTML文档后，会读取并解析它，然后根据里面的描述，把文字、图片、链接等元素一个个画到屏幕上。这个过程叫做"渲染"。

你现在看到的每一个网页，无论多复杂，本质上都经历了这六个步骤。

HTML是什么

现在我们知道，浏览器收到的核心文件是HTML文档。那么HTML到底是什么？

HTML的全称是HyperText Markup Language——超文本标记语言。这个名字听起来很唬人，但拆开看就很好理解：

• HyperText（超文本）：比普通文本更强大的文本。普通文本只能顺序阅读，超文本可以通过链接跳转到其他文本——这就是我们每天都在用的"超链接"。
• Markup（标记）：用特殊的符号来"标记"文本，告诉浏览器这段文字是标题、那段是段落、这里是图片。
• Language（语言）：它确实是一种语言，但不是编程语言，而是标记语言。编程语言用来指挥计算机执行操作，标记语言用来描述内容的结构。

HTML的核心概念只有一个：标签。

标签用尖括号包围，成对出现。比如<p>表示段落开始，</p>表示段落结束：

<p>这是一段话。</p>

中间的"这是一段话。"就是段落的内容。浏览器看到这对标签，就知道要把中间的内容当作一个段落来显示。

常见的标签有：

<h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><p>这是一个段落</p><ahref="https://example.com">这是一个链接</a><imgsrc="photo.jpg"alt="照片描述">

注意<a>和<img>的写法稍有不同——它们有属性。

属性写在开始标签里，格式是属性名="属性值"。比如：

• href="https://example.com"告诉浏览器这个链接指向哪里
• src="photo.jpg"告诉浏览器图片的地