HTML 文档结构与页面骨架：搞懂浏览器到底在吃什么

很多人学 HTML 的第一件事，就是照着教程敲出一堆尖括号，然后双击文件，浏览器里果然出现了字。但很少有人停下来想一个问题：浏览器明明只拿到一串纯文本，它怎么知道哪里是标题、哪里是段落、哪里该换行？

理解了这件事，你写出来的页面才不会”看起来能跑，实际上一塌糊涂”。这一篇我们就把 HTML 的骨架拆开，看看一份正经网页到底由哪些零件组成。

浏览器其实是个”翻译官”

你写好的 .html 文件，本质就是一份纯文本，里面没有任何魔法。双击打开后，浏览器会把这份文本一行行读进来，按照一套约定俗成的规则”翻译”成你能看到的画面。这套规则，就是 HTML（HyperText Markup Language，超文本标记语言）。

注意两个关键词：

超文本（HyperText）：页面里的文字可以互相跳转、可以嵌套链接，不再是纸面上死死的一页；
标记（Markup）：用一对对的”标签”把文字包起来，告诉浏览器”这块是什么”。

所以 HTML 不是编程语言，它不负责逻辑运算，它的全部工作就是描述结构：哪里是标题、哪里是段落、哪里是图片。至于好不好看、怎么交互，那是 CSS 和 JavaScript 的活儿，HTML 只管”骨架”。这一点一定要先想通，否则后面学 CSS、JS 时会一直混淆”谁该管什么”。

一份最小可用的 HTML 长什么样

先看一个最精简、但完全合法的文件：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，世界</h1>
    <p>这是我的第一个网页。</p>
  </body>
</html>

别小看这十几行，它已经包含了 HTML 文档的全部必备骨架。我们逐个拆开看。你可以把这段代码存成 demo.html，双击用浏览器打开，再按 F12 打开”开发者工具”，切到”元素”面板，就能看到浏览器把它解析成了怎样的树状结构——这棵树叫 DOM（文档对象模型），后面 JS 篇会反复用到它。

`<!DOCTYPE html>`：告诉浏览器”按现代规矩来”

文件第一行必须是它，而且没有闭合标签。它的作用只有一个：声明文档类型。

它不区分大小写，写 <!doctype html> 也行，但习惯全大写；
它告诉浏览器”请用 HTML5 的标准来解析我”，而不是退回上古的”怪异模式（quirks mode）”；
如果你忘了写它，浏览器会进入一种兼容老网站的混乱模式，很多 CSS 表现会莫名其妙地出错，比如盒模型算错、百分比高度失效。所以永远把它放在第一行，且前面不要有任何空行或空格。

`<html>`：整份文档的根

<html> 是所有标签的”老祖宗”，页面里其他一切标签都得包在它里面。它有一个很有用的属性：

<html lang="zh-CN">

lang="zh-CN" 告诉浏览器（和用户、搜索引擎、屏幕阅读器）“这份文档主要是中文”。这看起来是小事，但它会影响：

屏幕阅读器用什么语言念出来（中英文发音不同）；
浏览器是否提示”是否需要翻译”；
搜索引擎对页面语言的判断；
某些字体渲染的默认行为。

所以养成习惯，写中文页面就带上 lang="zh-CN"。如果是英文页面就用 lang="en"。

`<head>`：页面的”后台”，用户看不见

<head> 里放的是给浏览器和搜索引擎看的信息，这些内容不会直接显示在页面正文中。你可以把它理解成一份文件的”封面信息”：书名、作者、出版信息，读者翻开书才看到正文，但封面信息决定了这本书怎么被归类、被找到。

最常见的 head 内容有：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面标题</title>
  <meta name="description" content="一句话介绍这个页面是干嘛的" />
  <link rel="stylesheet" href="style.css" />
</head>

<meta charset="UTF-8">：指定字符编码为 UTF-8，避免出现中文乱码。必写，而且尽量放在 head 最前面（浏览器读到第一个字节就要确定编码）；
<meta name="viewport">：移动端适配必备，告诉手机浏览器”按设备宽度缩放”，否则手机上看网页会缩成一小团；
<title>：浏览器标签页上显示的文字，也是搜索引擎结果里的大标题，非常重要；
<meta name="description">：搜索结果下面那行灰色简介，写得好能提升点击率；
<link rel="stylesheet">：引入外部 CSS 文件（后面 CSS 篇会细讲）。

还有 <link rel="icon" href="favicon.ico"> 可以设置标签页的小图标，<meta name="keywords"> 早年重要现在基本被忽略，别指望它提排名。

`<body>`：用户真正看见的内容

<body> 里放的就是你能在页面上看到的一切：文字、图片、按钮、表格……前面学过的 <h1>、<p> 都在这层。

记住一个清晰的分界：head 决定”页面被怎么理解”，body 决定”用户看到什么”。所有”可见内容”都必须放进 body，否则写了也不显示（除非用 JS 动态塞进去）。

标签的基本语法：尖括号、闭合、嵌套

HTML 用”标签”来标记内容，写法上有几条铁律：

1. 标签通常由一对组成，有开有合

<p>这是一段文字</p>

<p> 是开始标签，</p> 是结束标签（多了个 /）。内容夹在中间。

2. 少数标签是自闭合的（单标签）

<meta charset="UTF-8" />
<img src="cat.jpg" alt="一只猫" />
<br />

这些标签不需要”包住”什么内容，所以不用写结束标签。结尾的 / 可写可不写，现代写法常带上，更清晰。常见自闭合标签：meta、img、br、hr、input、link。

3. 标签可以嵌套，但必须正确闭合

<!-- 正确：先开的后闭 -->
<p>这是<strong>加粗</strong>的文字</p>

<!-- 错误：交叉嵌套，浏览器会帮你乱纠正 -->
<p>这是<strong>加粗</p>的文字</strong>

嵌套就像俄罗斯套娃，先进后出：最后打开的标签要先关。交叉嵌套是新手最常见的 bug 来源，会导致样式和脚本行为错乱。

4. 标签可以带属性

<a href="https://www.baidu.com">去百度</a>
<img src="cat.jpg" alt="猫" width="200" />

href、src、alt、width 都是属性，写在开始标签里，格式是 属性名="属性值"。属性给标签补充额外信息，多个属性用空格分开。

一个常见的困惑：元素 vs 标签

严格说，“标签”指的是 <p> 和 </p> 这两个尖括号本身；“元素”指的是从开始标签到结束标签、连同中间内容的整个整体。日常交流里大家混着叫，你心里知道区别就行，考试或面试时才需要抠字眼。

注释：写给未来的自己看

写代码一定要会写注释，HTML 的注释长这样：

<!-- 这是一段注释，浏览器不会显示它 -->
<!--
  多行注释也可以
  用来临时藏起一段代码很方便
-->

快捷键通常是 Ctrl + /（Mac 是 Cmd + /）。注释不显示在页面上，但能帮你和同事看懂”这块是干嘛的”，调试时也常用来临时屏蔽一段代码。注释不要写废话，写”为什么”比写”是什么”更有用。

常见错误与排查

中文乱码：十有八九是漏了 <meta charset="UTF-8">，或文件保存时不是 UTF-8 编码（编辑器右下角可改）；
页面样式全乱：检查 <!DOCTYPE html> 是否在第一行、前面有没有多余空行；
内容不显示：确认是不是写进 head 了，可见内容必须在 body 里；
标签不生效：多半是交叉嵌套或忘了闭合，用开发者工具一看便知；
移动端缩成一团：忘了写 viewport 那行。

动手小练习

新建 index.html，写出包含 doctype、html、head、body 的最小结构，head 里设好 charset、viewport、title；
在 body 里放一个 <h1> 和两段 <p>，用开发者工具查看 DOM 树；
故意删掉 <!DOCTYPE html>，观察页面有没有变化（某些布局会错位）；
给 <html> 加上 lang="zh-CN"，想想它对谁有用。

为什么骨架这么重要

你可能会想：“我随便写写，浏览器也能显示啊。“没错，浏览器非常”宽容”，你漏个闭合标签它也能猜着帮你修。但代价是：

不同浏览器猜的方式不一样，页面可能在 Chrome 正常、在 Safari 崩；
搜索引擎看不懂结构，收录和排名受影响；
后期维护时，你自己都看不懂哪块是啥；
后面学 JS 操作 DOM 时，结构混乱会让你寸步难行。

所以从第一天就按规范写骨架，是最划算的投资。

把它串起来：动手做一个”关于我”小页

学完骨架，来个最小实战。新建 about.html，要求：DOCTYPE 在第一行、<html lang="zh-CN">、head 里有 charset 和 viewport 和 title、body 里有一个 <h1> 名字、一段 <p> 自我介绍、一个 <a> 跳回首页。写完用浏览器打开，再按 F12 看 Elements 面板，确认 DOM 树是 html > head + body 的结构。这个练习能帮你把”标签、属性、嵌套”一次性打通。

新手常问（FAQ）

Q1：<!DOCTYPE html> 写错成 <!doctype html> 行不行？ 行，HTML 不区分大小写，但习惯全大写，且必须放在第一行最前面，前面不能有任何空格或换行。

Q2：为什么我写的汉字成了乱码？ 九成是漏了 <meta charset="UTF-8">，或者文件本身保存时不是 UTF-8 编码（在编辑器右下角改）。两者要一致。

Q3：<div> 和 <section> 到底先用哪个？ 纯为了排版分组用 <div>；内容有明确主题、还带标题，才用 <section>。新手最容易”万物皆 div”，也最容易”万物皆 section”，两个极端都错。

这一篇你该记住的

HTML 不是编程语言，而是一套”描述页面结构”的标记语言；一份文档由 doctype、html、head、body 四件套撑起骨架，head 放给浏览器和搜索引擎看的元信息（charset 防乱码、viewport 做移动适配、title 是搜索门面），body 放用户看到的内容。标签要成对闭合、正确嵌套（先进后出），属性写在开始标签里。浏览器虽宽容，但规范书写才能保证跨浏览器一致、利于 SEO 和后期维护。

把骨架立稳了，下一步就该往 body 里填”看得见的文字内容”了——下一篇我们专门聊 HTML 里那些文本与排版标签，看看怎么用标题、段落、列表、加粗，把一篇文章排得清清楚楚、读着不累。

前端开发