页面结构详解

这是什么：页面骨架 = <!DOCTYPE html> → <html> → <head> + <body> 这套固定结构，<head> 放看不见的信息，<body> 放看得见的内容。

为什么用：上一章的网页里有 6 行"固定结构"，这一章把它们彻底讲透——分不清 head 和 body，页面标题就会写进正文里。

如何用：先照着骨架总览抄下这 6 行，再逐层拆开 <head> 与 <body> 各自该放什么。

骨架总览

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 所有看得见的内容写在这里 -->
  </body>
</html>

🧪 在线运行

👀 运行结果

💡 代码可直接复制；想改、想跑，点右上「🧪 在线运行场」。

逐个拆解

`<!DOCTYPE html>` —— 证件照

不是标签，是声明：告诉浏览器"请按最新标准（HTML5）渲染我"。所有现代网页第一行都是它。

`<html lang="zh-CN">` —— 根元素

整个文档的祖先，所有标签都是它的子孙。lang="zh-CN" 告诉浏览器和搜索引擎：这个页面是简体中文。

`<head>` —— 后台信息区

这里放"关于页面的信息"，用户看不见：

标签	作用
`<meta charset="UTF-8">`	字符编码。没有它，中文会变成乱码 `æµ‹è¯•`
`<title>`	标签页标题、收藏夹名称
`<meta name="viewport">`	手机适配（后面进阶篇讲）

`<body>` —— 前台表演区

用户能看见的一切都在这里：文字、图片、按钮、视频……

注释：``

代码里的"便利贴"，浏览器会完全忽略：

<!-- 这行是注释，浏览器看不见，是写给人看的 -->
<p>这行会正常显示</p>

🧪 在线运行

👀 运行结果

💡 代码可直接复制；想改、想跑，点右上「🧪 在线运行场」。

❓ 常见问题

Q1：页面上的中文全变成 æµ‹è¯• 这样的乱码？

娴嬭瘯 →  浣犲ソ

原因：<meta charset="UTF-8"> 没写，或者写了但文件实际保存成了别的编码——浏览器猜错了解码方式，中文就花了。 修复三步：① 确认 head 里有 <meta charset="UTF-8">；② 在编辑器右下角把文件编码改成 UTF-8 并重新保存；③ 刷新页面。 举一反三：以后见乱码先查编码，这是万年的第一条排查。

Q2：忘写第一行 <!DOCTYPE html> 会怎样？

原因：浏览器会退回几十年前的"怪异模式"渲染，一些排版规则变成老式算法，页面效果可能和教程对不上——而且它不会报任何错。 修复三步：① 打开文件看第一行；② 补上 <!DOCTYPE html>；③ 刷新对比效果。 举一反三：新建 HTML 文件的第一件事就是敲这一行，让它变成肌肉记忆。

Q3：明明在 <title> 里写了字，页面上却怎么也找不到？

原因：<title> 住在 head 后台，它显示在浏览器标签页上，不进入页面内容区——页面里只显示 body 里的东西。 修复三步：① 抬头看浏览器标签页，标题就在那儿；② 想让文字出现在页面上，把它搬进 <body>；③ 想改标签页标题，就改 <title>。 举一反三：head 里的都是"关于页面的信息"，用户看不见，看不见不等于没生效。

Q4：注释里的内容怎么跑到页面上去了？

原因：注释的暗号没写对——要么 --> 忘了写，要么把  是否成对；② 确认符号是英文半角；③ 刷新确认内容消失。 举一反三：注释是给浏览器的暗号，暗号写错就失效，代码里的符号永远用半角。

⚠️ 新手翻车现场

翻车一：把正文写进 head，页面一片空白

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <h1>我的蛙塘日记</h1>
  </head>
</html>

翻车现象：

浏览器窗口白茫茫一片，什么都没渲染；
标签页标题也是空的。

逐行分析：第 5 行是罪魁祸首——<h1> 被写进了 head。head 是后台信息区，浏览器默认不渲染里面的内容，这个标题就这样被雪藏了；而且整个文档压根没有 <body>，内容根本没进前台表演区。正确写法：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的蛙塘日记</title>
  </head>
  <body>
    <h1>我的蛙塘日记</h1>
  </body>
</html>

翻车二：注释只写了开头，后半页内容被吞

<!-- 这是页面说明
<p>欢迎常来玩</p>

翻车现象：

页面空白，"欢迎常来玩"一句也没出现。

逐行分析：第 1 行只有注释开头 ，浏览器就一直往下找结尾，把后面所有内容统统当成注释吞掉——第 2 行本身无辜，被连坐了。教训：写注释时先把  敲成一对，再往中间填字。正确写法：

<!-- 这是页面说明 -->
<p>欢迎常来玩</p>

📦 完整小示例

把骨架和内容串起来，存成 my-site.html：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>呱小吉的小站</title>
  </head>
  <body>
    <!-- 前台表演区：用户能看见的内容 -->
    <h1>欢迎来到呱小吉的小站</h1>
    <p>这里记录一只青蛙的学习日常。</p>
  </body>
</html>

人工校验：DOCTYPE 在首行；html→head+body 嵌套正确；head 内 meta 自闭合、title 有闭合标签；body 内 h1/p 闭合；注释  完整配对；标签收尾顺序 body 先于 html。

运行后在浏览器会看到：

标签页上显示「呱小吉的小站」；
页面内容区是一行大标题「欢迎来到呱小吉的小站」；
下面一行普通文字「这里记录一只青蛙的学习日常。」；
代码里那句注释在页面上完全看不到。

逐段中文精讲

第 1 行：<!DOCTYPE html> 声明"我是 HTML5 文档"，每个 .html 文件的第一行都留给它。
第 2 行：<html lang="zh-CN"> 根元素开场，lang 告诉浏览器这是简体中文页面。
第 3~6 行（head 后台）：<meta charset="UTF-8"> 防中文乱码，<title> 管标签页标题——这四行是页面的"身份证"，用户在页面里看不到它们。
第 7~10 行（body 前台）：看得见的内容全在 <body> 里；第 8 行注释是给自己看的便利贴，浏览器直接忽略。
第 11~12 行：标签依次收尾——先关 </body> 再关 </html>，顺序和开时相反，像俄罗斯套娃一层层退出来。

跑通后做个小实验：把 <title> 里的字改成你的名字，保存刷新——标签页标题变了，页面内容一动不动。这就验证了 title 住在"后台"。

🎯 什么时候用它

每个网页文件的开头：今后新建任何 .html，都先把这套骨架铺上去，再往 body 里填内容——像写信先铺好信纸。
给网站起名片：title 写得好，收藏夹和搜索结果里显示的就是它，相当于页面的"姓名牌"。
协作留备注：改代码前用注释标一句"这里为什么这么写"，同事（和三个月后的你）会感谢你。

📝 本章小结

固定出场顺序：DOCTYPE 声明 → <html> 根元素 → <head> 后台 → <body> 前台。
<meta charset="UTF-8"> 千万别忘，否则中文变乱码。
<title> 显示在标签页上，不在页面里；看得见的内容住 body。
注释  浏览器忽略，写注释先敲成对符号再填内容。
记忆锚点：网页像一场演出——DOCTYPE 是演出许可证，head 是后台化妆间（观众看不见），body 才是舞台。

动手改

删掉 <meta charset="UTF-8"> 这行会怎样？（提示：试试在代码里加中文再乱改编码看效果）
把 <body> 的内容全部换成注释，看看结果区还剩什么

下一章：常用文本标签，开始往 body 里填内容 🐸