第一个网页

这是什么：完整网页 = 一个以 <!DOCTYPE html> 开头、由 <html> 包住 <head> 和 <body> 的 .html 文档。

为什么用：上一章我们认识了标签，这一章直接写一个完整可运行的网页——散落的标签还不算网页，浏览器要先读到完整骨架才知道从哪渲染。

如何用：把在线运行框里的完整代码抄一遍存成 .html 文件双击打开，页面里点「▶ 运行」也能立刻看效果。

运行后注意看两处：

1. 右边结果区显示了标题和段落
2. 运行结果上方其实还有个标签页标题变成了「我的第一个网页」——那是 <title> 的作用

逐行解读

记忆口诀

html 包一切，head 管说明，body 管表演。

❓ 常见问题

Q1：双击 .html 文件，打开的却是编辑器/记事本，满屏代码？

<!DOCTYPE html>
<html>
  <head> ←—— 看到的是代码，不是网页

原因：文件的默认打开方式是编辑器；编辑器管"改代码"，浏览器管"看效果"，两回事。 修复三步：① 右键文件 → 打开方式；② 选 Chrome 或 Edge；③ 以后也可以直接把文件拖进浏览器窗口。 举一反三：前端永远双通道——编辑器里改，浏览器里看，来回切换是日常。

Q2：明明改了代码，刷新后页面还是老样子？

原因：十有八九是没保存（编辑器标题栏还挂着一个小圆点），剩下的一成是改的和开的不同一个文件。 修复三步：① 回编辑器按 Ctrl+S 保存；② 对比浏览器地址栏和编辑器标题，确认是同一个文件；③ 回浏览器按 F5 刷新。 举一反三：调试三板斧第一斧永远是先问"保存了吗"。

Q3：页面打开后出现一堆 <html> 这样的代码文字，或干脆白屏？

原因：多半是尖括号用了中文全角、或标签/引号没配对，浏览器没法把后半段解析成结构，原样显示或直接吞掉。 修复三步：① 检查最近敲过的符号是否半角、成对；② 对照本章骨架逐行检查嵌套顺序；③ 修一处刷一次，缩小嫌疑范围。 举一反三：白屏九成是标签配对问题，从最近改动处往回查最快。

Q4：存好的文件双击没反应，图标也不像网页？

原因：文件名可能存成了 first-page.txt 或 first-page.html.txt——扩展名不对，系统就不认它是网页。 修复三步：① 资源管理器里打开"显示文件扩展名"；② 把文件重命名为 .html 结尾；③ 双击验证图标变成浏览器图标。 举一反三：扩展名是文件的身份牌，排查文件问题先看它。

⚠️ 新手翻车现场

翻车一：属性值只写了半边引号，整页被吞

<html lang="zh-CN>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

翻车现象：

浏览器窗口全白，连标签页标题都没了。

逐行分析：第 1 行 lang="zh-CN 只有左引号，浏览器从那个引号开始一路往下找配对的右引号——把 <head>、<body>、全部内容都当成了属性值的一部分，html 标签永远关不上门，页面自然什么都没有。教训：引号必须成对，写完属性值立刻补右引号。正确写法：

<html lang="zh-CN">

翻车二：body 手滑拼成 boyd，页面"看起来正常"

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <boyd>
    <h1>你好，世界！</h1>
  </boyd>
</html>

翻车现象：

页面居然能显示标题——但按 F12 一看，
结构里根本没有 body，站着一个陌生的 boyd。

逐行分析：第 5 行把 body 敲成了 boyd，浏览器不认识也不报错，直接当成一个无样式的陌生元素处理；今天没事是默认样式在救场，等后面学 CSS 想给 body 设背景色时就会"灵异失效"。教训：拼错标签不报错，只是把雷埋到后面。正确写法：

  <body>
    <h1>你好，世界！</h1>
  </body>

📦 完整小示例

从零手敲一遍骨架，存成 my-first.html：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>呱小吉的第一页</title>
  </head>
  <body>
    <h1>你好，我是呱小吉！</h1>
    <p>这是我亲手写出的第一个网页。</p>
    <p>从一行 DOCTYPE 到一整个页面，只用了十分钟。</p>
  </body>
</html>

人工校验：DOCTYPE 首行；html→head+body 依序嵌套；head 内 meta 与 title 闭合；body 内 h1/p 闭合；无交叉嵌套。

运行后在浏览器会看到：

标签页标题变成「呱小吉的第一页」；
页面上一行大标题「你好，我是呱小吉！」；
下面两行普通文字的自我介绍，各占一行。

逐段中文精讲

• 第 1~5 行：文档的"身份证区"——DOCTYPE 声明、根元素 html、head 后台里放着编码声明和标题；这些都不显示在页面里，但一样都不能少。
• 第 6 行：<body> 前台开门，看得见的内容从这儿开始。
• 第 7~9 行：<h1> 全页唯一的大标题点题，两个 <p> 各说一句话——一个最简页面，一标题两段落就成立。
• 第 10~12 行：标签按开门的相反顺序关门：先 </body> 后 </html>，像俄罗斯套娃一层层退出来。

跑通后做个小实验：把第 7 行的 <h1> 改成 <h2>，刷新对比——标题小了一号；再改回 <h1>。亲手感受一次"标签决定结构"。

🎯 什么时候用它

• 每次新建网页：这套骨架是万能开头，以后写任何 .html 都从它起手，再往 body 里填内容。
• 本地备忘页：把常用链接、待办写成一张本地 HTML，双击就能看，不依赖任何软件。
• 给教程做 demo：向别人演示一个概念时，最小骨架加一个标签，就是最有说服力的例子。

📝 本章小结

• 能跑的网页最小只需：DOCTYPE + html + head(title) + body。
• title 显示在标签页上；看得见的内容全住 body。
• h1 大标题加 p 段落，一个页面就此成立。
• 改完代码 Ctrl+S 保存、F5 刷新，浏览器才给看新版。
• 记忆锚点：写网页像寄信——DOCTYPE 是信封规格，head 是信封（写收件人信息），body 是信纸（真正想说的话），少一样都寄不出去。

动手改

1. 把 <h1> 里的文字改成你自己的名字，点运行
2. 在 <p> 下面再加一行 <p>第二段话</p>，看看结果
3. 改改 <title>，观察结果区上方的标签页

下一章：页面结构详解，把骨架掰开揉碎讲清楚 🐸