南希说在前面的学习中，我们已经顺利搭建好了 VS Code 的开发环境。从现在开始，我们就可以把重点放在 HTML 的语法和特性上了。写网页的过程就像搭积木，每一块小知识点都是未来构建完整网页的基础。
今天我们要聊的是一个常见却很容易让我这样的新手疑惑的问题：为什么我在代码里敲了很多空格或符号，结果浏览器里并没有按我想的那样显示出来？
为了搞清楚这个问题，我们先从一个最简单的例子开始。
1. 从一个简单的例子开始
先来做一个实验。我们在 VS Code 中新建一个文件（比如命名为 01.html），写入以下代码：
<p>今天天气真好</p>
然后，我想让“天气”和“真”之间多几个空格，于是这样写：<p>今天天气 真好</p>
结果保存后在浏览器中打开，你会发现显示效果和之前完全一样：
👉 页面上还是只有一个空格。这就是初学者常常会遇到的第一个“坑”。
2. 浏览器的默认行为：空格折叠
为什么在 HTML 代码里敲了好几个空格，浏览器却只显示一个？这是因为 浏览器有一条默认的规则：连续的空格会被折叠（合并）成一个空格。
👉 简单来说：
- 你写 1 个空格 → 显示 1 个空格
- 你写 5 个空格 → 还是只显示 1 个空格
- 你写 100 个空格 → 依然只显示 1 个空格
举个例子，我们写下这段代码：
<p>苹果 香蕉 西瓜</p>
在 VS Code 编辑器里，你可以清楚地看到“苹果”和“香蕉”之间有 5 个空格，“香蕉”和“西瓜”之间也有 5 个空格。可是一旦在浏览器中运行，它只会显示成这样：
苹果 香蕉 西瓜
是不是感觉浏览器“偷走”了你的空格？😂
其实不是浏览器偷懒，而是 HTML 的规范就是这样设计的。为什么要这样设计？
想象一下，如果浏览器把你写在代码里的所有空格都照单全收，会发生什么？
- 代码缩进（我们为了排版整齐经常会缩进很多空格）也会被展示出来 → 页面会乱掉。
- 不同人写的代码习惯不同，页面的显示效果可能完全不可控。
因此，为了让网页更规范、更统一，浏览器会自动把连续的空格压缩成一个。
这条规则被称为 “空格折叠”。
所以，如果你只是单纯地在代码里敲很多空格，是没办法在网页上直接展示出来的。
3. 如何显示多个空格？
既然浏览器会自动把多个空格折叠成一个，那如果我们真的需要展示多个空格，该怎么办呢？
答案就是：使用 HTML 实体（Entities）。
什么是 HTML 实体？
在 HTML 中，有些符号和字符是“保留的”，它们本身有特殊的作用，比如：
<用来表示标签的开始>用来表示标签的结束空格在代码中只是排版用的，不会直接显示多个
如果你想让这些符号 原封不动地显示在网页上，就要用到 实体（Entities）。
HTML 实体的写法有固定规则：
&名字;
👉 以 & 开头，以 ; 结尾，中间是某个特定的“名字”。
空格对应的实体：
在 HTML 里，如果想插入一个“不会被折叠掉的空格”，要用 。
nb= non-breaking（不换行的）sp= space（空格）
例子：
<p>苹果 香蕉 西瓜</p>
运行结果：
苹果 香蕉 西瓜
这一次，“苹果”和“香蕉”之间就真的有了 3 个空格，浏览器不会再合并掉。
想要更多空格怎么办？
很简单，想要几个就写几个 就行。
比如：
一个空格 两个空格 三个空格
这样你就可以完全掌控空格的数量了。
4. 特殊符号的显示问题
除了空格，HTML 中还有一些符号也不能直接写在网页里，否则会被浏览器误解。
最典型的就是 < 和 > 这两个符号。
在 HTML 里，它们分别用来表示：
<→ 标签的开始>→ 标签的结束
比如你写：
<p><h1>这是一个标题</h1></p>
浏览器看到 <h1> 就会立刻当成一个标题标签来处理，而不会把它显示成文字。
想要展示符号 < 和 > 怎么办？
这时候就要用到 转义字符（实体）：
<表示<（lt = less than，小于号）>表示>（gt = greater than，大于号）
例子：
<p><h1>这是一个标题</h1></p>
运行结果会变成：
<h1>这是一个标题</h1>
这次浏览器就不会把它当作标签解析，而是原样显示了。
除了 < 和 >，还有一些常见符号也需要转义：
| 想显示的符号 | 写法 | 效果 |
|---|---|---|
小于号 < | < | < |
大于号 > | > | > |
引号 " | " | “ |
和号 & | & | & |
这些写法在网页中非常实用，特别是当你需要展示代码片段时。
5. 常见 HTML 实体汇总
在日常网页开发中，我们并不会频繁用到实体，但有一些符号确实很常见，建议记下来：
| 符号 | 实体写法 | 显示效果 | 记忆方法 |
|---|---|---|---|
| 空格 | | ␣ | non-breaking space，不会被合并 |
| 小于号 | < | < | lt = less than（小于） |
| 大于号 | > | > | gt = greater than（大于） |
| 和号 | & | & | amp = ampersand（& 符号） |
| 双引号 | " | “ | quote（引号） |
| 单引号 | ' | ‘ | apostrophe（撇号） |
| 版权符号 | © | © | copy = copyright（版权） |
| 注册商标 | ® | ® | registered（注册） |
记忆小技巧
- 看到
lt就想到 less than，代表< - 看到
gt就想到 greater than，代表> nbsp= non-breaking space，不会折叠的空格- 其他大多和英文单词的缩写相关
所以不用死记硬背，理解了含义就很容易记住。
6. 学习资源推荐
虽然常见的 HTML 实体只需要记住几个，但有时候我们也会遇到一些比较少见的符号，比如：货币符号、数学符号、箭头等等。
要是我们不记得写法怎么办呢？
不用担心，网上有很多现成的 实体符号表 可以查。
推荐网站：W3School 中文网
在 W3School 上，有一个专门的栏目叫做 HTML 实体。
点进去后，你会看到：
- 常用实体的写法
- 各种符号的效果展示
- 更完整的实体参考手册
比如：
€→ €（欧元符号）¥→ ¥（人民币/日元符号）♥→ ♥（爱心符号）
这些表格很直观，你只要找到自己需要的符号，复制对应的写法放进代码里就可以了。
提示
在学习阶段，掌握常见的几个实体就够用了。
等以后真的需要一些特殊符号时，再去查就行，不用现在一次性背完。
方式了。
7. 总结
在这篇文章里，我们解决了两个新手最容易遇到的问题：
- 多个空格无法正常显示 —— 需要用
来插入不折叠的空格。 - 小于号、大于号等特殊符号显示异常 —— 需要用
<、>等实体来转义。
我们还整理了常见的 HTML 实体表，并推荐了学习资源（如 W3School 的实体表格），让你在需要时随时查找。
其实，HTML 实体在日常开发中用得不算多，但掌握它们会让你在写网页时更灵活，避免一些“显示不出来”的小问题。
