网页是什么：浏览器画出来的文本文件
以「你在浏览器里看到的每一个页面，骨子里都是一个文本文件」建立网页心智模型：HTML/CSS/JavaScript 三件套分工、右键源代码与 F12 Elements 的区别、URL 与 HTTP 一句话预告，并现场写出第一个双击就能打开的 HTML 页面。
前置知识
- 已完成 零基础计算机常识：会新建文件夹与文件，知道扩展名决定「双击后用什么程序打开」；
- 不需要任何编程经验。本篇代码都能原样复制，你只需要一个浏览器（Chrome 或 Edge）和一个文本编辑器（记事本或 VS Code）。
学习目标
读完本文你将能够：
- 说清「网页是浏览器渲染出来的文本文件」，以及双击打开的本地页面与访问网站拿到的页面是同一种东西；
- 说出 HTML、CSS、JavaScript 三件套各自负责什么，并用一句话类比复述；
- 认出标签的三段结构（开始标签、内容、结束标签），知道属性写在开始标签里；
- 从零写出第一个最小 HTML 页面，双击打开并看到预期效果；
- 用「右键查看源代码」和 F12 的 Elements 面板两种方式偷看任何网页，并说清两者的区别。
预计 30 到 45 分钟，包含 2 组动手实验与 4 道练习。
1. 问题引入：页面再炫，骨子里都是文本文件
你刚在某个游戏官网逛完：大图轮播、排行榜实时刷新、按钮悬停会发光。看起来离「自己写一个」隔着十万八千里。现在拆穿它：你在浏览器里看到的每一个页面，骨子里都是一个文本文件——和你桌面上的「新建文本文档」是同一类东西，只是内容换成了浏览器认识的标记，扩展名换成了 .html。
验证只需要一分钟：打开记事本，写几行标记，存成 .html，双击，得到一个真网页。网页没有魔法，浏览器的工作就是「读文本 → 画画面」。
顺手纠正一个容易吓退人的误会：HTML 不是编程语言，不会 if、不会循环、不做计算，只做一件事——给内容贴标签，回答「这里是什么」。判断与计算是 JavaScript 的活，本篇一个字不碰。
2. 动手实验一：一分钟造出第一个网页
2.1 写文件
新建一个文件夹 webpage-experiment（名字随意），在里面新建文件 index.html，完整内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界</h1>
<p>这是我亲手写出的第一个网页。</p>
<a href="https://developer.mozilla.org">点我去 MDN 看看</a>
</body>
</html>三行先混个眼熟：<!DOCTYPE html> 告诉浏览器「按现行标准渲染」（第 040 篇讲透）；<meta charset="UTF-8"> 声明文字编码，没有它中文可能乱码（第 060 篇讲透）。其余标签马上拆解。
2.2 打开看效果
保存，双击文件（或把它拖进浏览器窗口）。预期效果：浏览器标签页显示「我的第一个网页」；页面上是一行加粗大标题「你好，世界」，下面一段普通文字，再下面一行蓝色带下划线的链接——点它，浏览器会带你跳到 MDN 的网站。
2.3 拆解这十几行
先看整体结构，任何网页都是这两层：
html（根：整个文档的唯一祖先）
├── head（元信息：标题、编码……访客看不见，浏览器看得见）
└── body（内容：文字、图片、链接……访客看得见）再解剖一个标签，三段式：
<p> 这是我亲手写出的第一个网页。 </p>
└┬┘ └───────────┬───────────┘ └┬┘
开始标签 内容 结束标签p代表 paragraph（段落），h1是一级标题。常用的还有a（链接）、img（图片）、ul与li（列表），本模块后面逐个讲；<a href="...">里的href是属性——写在开始标签里的附加信息，回答「链接去哪」。现在记住「属性长在开始标签里」就够；- 三条习惯从第一天养成：标签名用小写、属性值用引号包住、写完开始标签立刻补结束标签。
3. 核心概念：三件套分工
你刚写的页面只有 HTML。真实网页由三种技术配合完成：
| 技术 | 一句话类比 | 负责什么 | 长什么样 |
|---|---|---|---|
| HTML | 素坯 | 结构与内容：这里有什么 | <h1>标题</h1> |
| CSS | 化妆师 | 外观：长什么样 | h1 { color: red; } |
| JavaScript | 操偶师 | 行为：点了会怎样 | button.onclick = ... |
类比口径全课程统一：HTML 是素坯，CSS 是化妆师，JavaScript 是操偶师。素坯决定页面有没有眉眼（标题、段落、按钮）；化妆师决定脸色、口红色号、眉毛粗细；操偶师在幕后牵线，让页面听见点击、刷新排行榜、弹出提示。
回头拆那个游戏官网：排行榜的数据列表是 HTML（素坯），轮播动画是 CSS（化妆），「实时刷新」是 JavaScript 在牵线（操偶）。三个模块分别深入：本模块学素坯，CSS 是什么 学化妆，JavaScript 是什么 学操偶。
4. 动手实验二：偷看任何网页的两扇窗
HTML 最好的玩具是别人的网页。找一个大网站（比如 MDN 首页），做两个动作：
- 右键 → 查看网页源代码（
Ctrl+U）：新标签页铺满代码。这是服务器发来的原始文本文件——和你刚写的 index.html 是同一种东西，只是数量多、嵌套深，而且只读； - 按
F12打开开发者工具，切到 Elements（元素）面板：这也是代码，但性质不同——它是浏览器「消化」之后的活结构，包含 JavaScript 后来动态塞进去的内容，而且可以直接改（改的是内存副本，刷新就还原）。
区别记一句口诀：查看源代码看食材，Elements 看摆好盘的菜。动画满天飞的页面，源代码里可能只有几个空盒子——内容是 JS 运行后才填进去的，只有 Elements 看得到。预期效果：两边都是熟悉的 < 标签语法；认不出的标签查 MDN，不用背。
5. 一句话预告：URL 与 HTTP
双击打开时，地址栏以 file:/// 开头——浏览器读的是你硬盘上的文件。访问网站时，地址栏是 https://...——浏览器在向另一台电脑（服务器）要文件。那串地址叫 URL（去哪台机器、要哪个文件），两台机器之间对话的规矩叫 HTTP。
现在只需知道：服务器发来的，和你双击打开的，是同一种 HTML 文件。网络那一半，HTTP 协议 所在的 networking 模块深讲；网页开发做的是拿到文件之后的这一半。
6. 修改实验
对 index.html 动手，每一步先预测再刷新：
- 把
<h1>里的文字换成你的名字，保存，刷新——大标题跟着变。「改、存、刷、看」四拍循环是前端最基础的工作节奏，第 030 篇会把它提速； - 在
<body>里补一行<h2>二级标题</h2>。预测：它比 h1 大还是小？——刷新验证，顺便发现数字越大级别越低； - 把
<title>改成别的文字。预测：正文变还是标签页变？——标签页。title 不进页面，只进标签页（和搜索结果列表）； - 把链接的
href换成你常去的网站，文字改成对应的名字，点击验证跳转。
7. 常见错误与调试实录
错误一：双击打开的是记事本。原因：系统隐藏了扩展名，文件其实是 index.html.txt。修法：资源管理器「查看」里勾选「文件扩展名」（Windows），确认真名后重命名为 index.html。
错误二：改了没反应。两个嫌疑：没保存（VS Code 标签上有个圆点就是没保存），或没刷新（按 F5）。铁证法：页面上按 Ctrl+U——浏览器实际拿到的文本和你刚写的对得上吗？对不上，就是保存环节的锅。
错误三：忘写结束标签。把 <a> 的 </a> 删掉试试：
<a href="https://developer.mozilla.org">点我去 MDN 看看
<p>这是我亲手写出的第一个网页。</p>页面不报错、不白屏，但「这是我亲手写出的第一个网页」也变成了蓝色链接。按 F12 看 Elements：浏览器自作主张把后面的内容都塞进了 <a> 里。HTML 的容错是把双刃剑：写错不报错，但结构可能不是你要的。「写完开始标签立刻补结束标签」能避开大半此类事故。
8. 实际场景
- 接手任何网页：先 Ctrl+U 与 Elements 各看一眼，比读文档快；
- 爬虫与自动化测试：程序读的就是你写的标签，标签越规范越好解析（第 170 篇的伏笔）；
- 邮件模板：营销邮件正文就是一份受限的 HTML——客户端支持参差，只能用老写法；
- 排查「网页显示不对」：先分清是结构错（Elements）还是样式错（CSS 模块的方法）。
9. 小练习
预测题（5 分钟）：把 index.html 的 head 与 body 开头改成下面这样（其余内容不动）：
<title>榜单</title>
...
<h1>游戏周报</h1>问题：标签页上显示的是哪个词？页面大标题是哪个词？
答案（写完再对照）：标签页「榜单」，大标题「游戏周报」。head 里的东西只给浏览器看，body 里的东西才给访客看。
修改题（10 分钟）：给页面加一段自我介绍——一个 <h2> 配两个 <p>；再把链接换成你最喜欢的游戏官网。验收：新标题比大标题小；点击链接能跳到正确网站；Ctrl+U 能看到你新写的标签。
修Bug 题（10 分钟）：下面页面有真实 bug，症状是「链接后面的一整段也变成蓝色链接，点哪都跳转」。先用 F12 的 Elements 看 <a> 包到了哪里，再修复：
<body>
<h1>我的游戏周报</h1>
<a href="rank.html">查看完整榜单
<p>本榜单每周一更新。</p>
</body>答案（修完再对照）：<a> 漏了结束标签，浏览器把后面的 <p> 也当成链接内容。在「查看完整榜单」后面补上 </a> 即可。
挑战题（半小时，不看正文独立完成）：做一张「我的游戏年度榜单」页面。验收清单：单独文件夹里的 index.html；标签页标题与大标题内容不同；一个 h1、至少三个 h2（各配一段 p）；至少一个能点开的外链；只用本篇出现过的标签。做完 Ctrl+U 自查——代码应与编辑器里的一字不差。
10. 与之前和之后的知识的关系
- 之前：零基础计算机常识 给了文件与扩展名的概念，本篇第一次把它们变成作品；
- 本模块之后：HTML5 概述与核心特性 回答「为什么叫 HTML5、它比老 HTML 强在哪」；环境准备与第一个页面 把双击打开升级成正规工作流；DOCTYPE 声明 深讲你页面第一行那句话；
- 跨模块：CSS 是什么 与 JavaScript 是什么 都会回链本篇——三件套入口篇（本篇、css/010、javascript/010）都过完，再按兴趣选深入顺序。建议先跟完本模块的 HTML 主线。
11. 官方文档
- MDN「HTML 结构化 Web 内容」入门模块：https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content
- MDN HTML 元素参考（标签字典，随用随查）：https://developer.mozilla.org/zh-CN/docs/Web/HTML
12. 自我检查
- 能不看笔记复述「素坯、化妆师、操偶师」各对应哪门技术、负责什么；
- 能默写标签的三段结构，并说出属性写在哪里；
- index.html 是你从零建出来的，能一句话说出
<!DOCTYPE html>与<meta charset>各干什么（深讲在后面）； - 会用 Ctrl+U 与 F12 的 Elements 偷看网页，并能说出两者的区别；
- 遇到「改了没反应」，知道按「保存 → 刷新 → Ctrl+U 对照」排查。
本章总结
网页是浏览器渲染出来的文本文件。三件套分工：HTML 管结构与内容（素坯），CSS 管外观（化妆师），JavaScript 管行为（操偶师）。标签三段式：开始标签 + 内容 + 结束标签，属性写在开始标签里。双击打开读的是 file:// 本地文件，访问网站是向服务器要文件（URL 与 HTTP，networking 模块深讲）。查看源代码看原文，Elements 看浏览器消化后的活结构——前端的第一双透视眼从这里开始用。
下一步
进入 HTML5 概述与核心特性：搞清楚「HTML5」这个 5 从哪来、它给网页补了哪些新能力，以及为什么它不是更难的 HTML，而是更明确的 HTML。