网页是什么：从 URL 到页面的第一课
面向零基础读者建立网页的心智模型：HTML/CSS/JavaScript 三件套的分工、标签长什么样、浏览器如何把文件变成页面，并亲手创建人生第一个网页。
学习目标
- 能用自己的话说出”网页是浏览器渲染出来的文件”
- 能说出 HTML、CSS、JavaScript 三者各自负责什么
- 能认出一个标签的三个组成部分（开始标签、内容、结束标签）
- 能亲手创建并打开人生第一个网页文件
HTML 在整张地图上的位置
如 计算机网络基础 所讲：浏览器拿到服务器返回的文件后渲染成页面。其中 HTML 文件就是页面的骨架——它告诉浏览器”这里是一个标题、这里是一段文字、这里是一张图片、这里该跳转到哪里”。
HTML 不是编程语言，而是标记语言（Markup Language，即”给内容打标记的语言”）：它不包含逻辑判断与循环，只负责用一对对”标签”给内容标注含义。这个区别值得展开说说：
| 对比项 | 编程语言（如 Python、JavaScript） | 标记语言（HTML） |
|---|---|---|
| 能否写”如果…就…” | 能（if 判断） | 不能 |
| 能否重复做一件事 | 能（循环） | 不能 |
| 核心工作 | 计算、决策、处理数据 | 给内容标注”这是什么” |
| 没有它会怎样 | 网页没有交互和逻辑 | 网页只剩一堆无结构的文字 |
所以”学 HTML”和”学编程”是两回事：HTML 更像学”写作格式规范”，门槛低得多——这也正是它适合作为 Web 学习第一站的原因。
网页三件套：骨架、外观与行为
一个完整的网页由三种文件配合完成，用”人”来类比最好记：
| 技术 | 类比 | 负责什么 | 典型代码 |
|---|---|---|---|
| HTML | 骨架 | 页面结构和内容 | <h1>标题</h1> |
| CSS | 皮肤和衣着 | 颜色、字体、布局 | h1 { color: red; } |
| JavaScript | 肌肉和神经 | 交互、动态行为 | button.onclick = ... |
三者关系可以画成一张分工图：
┌─────────── 浏览器渲染出你看到的页面 ───────────┐
│ │
HTML（结构） CSS（表现） JavaScript（行为）
"这里是什么" "它长什么样" "点了会怎样"后续课程会按这条主线依次展开：本模块学 HTML，接着的 CSS 模块学外观，再往后的 JavaScript 模块学行为。第一遍不必深究 CSS 和 JavaScript，知道”页面不止 HTML 一种文件”即可。
认识第一个标签
HTML 的基本单位是标签（tag），通常成对出现：
<p>这是一段文字。</p>把这一行拆开看，有三个组成部分：
<p> 这是段落内容。 </p>
└┬┘ └──────┬──────┘ └┬┘
开始标签 内容 结束标签<p>是开始标签，</p>是结束标签（比开始标签多一个/），中间是内容；p代表 paragraph（段落）。浏览器认识几十种标签：h1到h6是六级标题，a是链接，img是图片，ul与li是列表。
标签还可以带属性（attribute，写在开始标签里的附加信息），比如链接去哪儿、图片用哪张——现在只需记住”属性长在开始标签里”，细节马上会在后续课程遇到。
标签书写的三条基本规范
从第一行代码起就养成好习惯，后面能少踩很多坑：
- 标签名用小写：
<p>而不是<P>（HTML 不区分大小写，但小写是全行业的统一约定）； - 属性值用引号包起来：
<a href="https://example.com">而不是裸写href=https://example.com（后者遇到空格或特殊字符就会出错）； - 有开始就有结束：成对标签写完开始标签后，立刻补上结束标签再填内容，能避免”忘记闭合”这一新手最高频的错误。
<!-- 推荐写法 -->
<a href="https://example.com">示例链接</a>
<!-- 不推荐：大写标签、属性裸奔 -->
<A HREF=https://example.com>示例链接</A>动手环节：创建人生第一个网页
- 新建一个文件夹，在其中新建文本文件
index.html； - 用任意文本编辑器（推荐 VS Code，安装见 VS Code 安装配置）输入以下内容：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界</h1>
<p>这是我亲手写出的第一个网页。</p>
<a href="https://developer.mozilla.org">点我去 MDN 学更多</a>
</body>
</html>- 保存后双击文件（或拖进浏览器）——你看到了一个真正的网页：一个大标题、一段文字、一个可点击的链接。
逐行拆解：<!DOCTYPE html> 声明这是 HTML5 文档；<html> 是根标签；<head> 里放看不见的元信息（<title> 是浏览器标签页标题）；<body> 里放看得见的全部内容。
把结构抽象出来，任何网页都是这三层：
html（根）
├── head（元信息：标题、编码、样式引入……访客看不见）
└── body（内容：文字、图片、链接……访客看得见）动手环节二：两个实验，建立”源代码 vs 渲染结果”的直觉
实验一：改出你自己的版本。 把 <h1> 里的文字改成你的名字，再添加一行 <h2> 与两段 <p>，保存后刷新浏览器。改一下、刷新一下、看效果——这个循环就是前端开发最基础的工作节奏。
实验二：偷看真实网站的源代码。 在任意大网站上右键选”查看网页源代码”（或按 Ctrl+U）：你会看到密密麻麻的 <div>、<script>——别慌，它们和你刚写的 <p>、<h1> 是同一套语法，只是数量多、嵌套深。再按 F12 打开开发者工具的”元素”面板，鼠标移到哪行代码，页面上对应区域就会高亮。这两个视角（源代码 vs 渲染结果）的往返，是前端调试的基本功，今天先种下印象。
为什么叫”HTML5”：一段一分钟版本史
你可能注意到课程名带个”5”。HTML 像软件一样有版本：1991 年只有十几个标签的初版、HTML 4.01（1999）、到 2014 年定稿的 HTML 5——它一举带来了 <video>、<canvas>、语义标签等大批能力，是现代 Web 的地基。
还有一个重要事实：HTML5 之后不再有 HTML6。制定标准的组织 WHATWG 改为持续滚动更新（称为 Living Standard，“活标准”）：<search> 元素、popover 属性这些 2023-2025 年的新能力，都属于现行 HTML 标准的一部分，浏览器支持一个就能用一个。本模块最后一篇 html5/440-HTMLNewElementsAndCapabilities 会专门讲这些新能力。
常见困惑
“标签写错了会怎样？“——浏览器会尽力猜测你的意图继续渲染，但结果可能不符合预期。养成配对书写、及时保存刷新的习惯，可以避开绝大多数低级错误。
“需要背下所有标签吗？“——不需要。常用的不到三十个，本模块会逐一讲解；遇到陌生标签查 MDN 文档即可。
“HTML 写完是保存在我自己电脑上吗？别人怎么看得到？“——双击打开是”本地文件”，只有你能看到。要让全网访问，需要把文件放到服务器上（后续的部署课程会讲）。学习阶段本地开发完全够用。
“手机和电脑打开同一个网页，代码一样吗？“——通常是同一份 HTML，配合后续要学的”响应式”技术让同一份代码适配不同屏幕。这是后话。
下一步
带着自己的第一个网页进入 HTML5 环境搭建与第一页 补齐规范细节；想给这个页面加上颜色与布局，接着读 CSS 是什么。