注释与特殊字符：给代码写便利贴
零基础第一道坎：HTML 注释怎么写、为什么连续空格会被压缩成一个、五个必须背的实体字符，以及 © 这类符号怎么打出来。
0. 学习目标（可验证）
- 能写出 HTML 注释（
<!-- ... -->），并说出它的两个用途 - 能解释为什么在代码里敲 5 个空格，网页上只显示 1 个
- 能默写出
、<、>、&、©五个实体字符 - 能说出实体字符的三种写法（命名、十进制、十六进制）及各自适用场景
- 能完成”10 个空格 vs 10 个 “的对比实验
1. 一句话理解
注释是写给”看代码的人”的便利贴，实体字符是”特殊符号的安全写法”。这两件事不涉及任何高深原理，但几乎每个新手都会在第一个小时撞上。
一个类比：HTML 文档像一份”给浏览器的施工单”。注释是施工单页边的手写批注——施工队（浏览器）照常施工，但不会把批注贴到墙上（网页）给访客看；实体字符则是施工单里的”特殊材料编号”——有些材料（<、&、空格）直接写名字会引起误会，必须用编号代指。
2. HTML 注释：给代码写便利贴
2.1 语法
注释的固定格式是 <!-- 开始、--> 结束：
<!-- 这是注释：下面的标题是首页的大标题 -->
<h1>你好，世界！</h1>浏览器会完全忽略 <!-- ... --> 之间的内容，它不会显示在网页上，只存在于源代码里。注释可以夹在任何标签之间，也可以写在 <head> 里：
<head>
<!-- 全站通用的样式文件（示例） -->
<title>我的网页</title>
</head>2.2 快捷键：Ctrl+/
在 VS Code 里，把光标放在一行上按 Ctrl+/，可以快速把这一行变成注释或取消注释；选中多行再按，可以一次注释多行。这是写代码时最高频的快捷键之一。
2.3 两个最常见用途
| 用途 | 示例 |
|---|---|
| 解释代码 | <!-- 导航区：放 3 个链接 --> |
| 暂时”废掉”一行代码 | <!-- <p>这行先不显示</p> --> |
第二个用途是调试神器：某段内容不想删除、又暂时不想显示，就用注释把它包起来；想恢复时删掉注释标记即可，不用重新打字。
实际项目里还有两种常见注释习惯，现在就可以模仿：
<!-- ========== 页头区 ========== -->
<header>...</header>
<!-- TODO: 等设计稿确定后补上页脚的备案号 -->
<footer>...</footer>前者是”分区标记”，让上百行的页面代码能快速定位；TODO 是”待办标记”，很多编辑器能高亮它并在侧边栏汇总。
2.4 三个注意事项
- 注释不能嵌套：
<!-- 外层 <!-- 内层 --> -->不合法，第一个-->出现后注释就结束了，后面的-->会被当成普通文字显示出来； - 注释在 F12 开发者工具里完全可见，不要把密码、密钥、个人信息写进去；
- 注释要写清楚、写简洁，它和代码一样需要维护——过时的注释比没有注释更误导人。
3. 空白符折叠：为什么 5 个空格只显示 1 个
3.1 现象与规则
在 HTML 里，连续敲多个空格、换行、Tab，浏览器都会压缩成一个空格：
<p>我 打了 很多空格</p>网页上只会显示”我 打了 很多空格”。这条规则叫空白符折叠（whitespace collapsing）。
这是 HTML 的设计规则：源代码里的空白排版（缩进、换行）是给程序员看的，不是给访客看的。正因为有了折叠，你才可以放心地这样缩进代码而不影响显示：
<!-- 源代码里的换行与缩进不会让段落断裂 -->
<p>
这是一段很长的文字，
中间虽然换了行、加了缩进，
显示出来仍然是连贯的一段。
</p>3.2 真的需要连续空格怎么办
用实体字符 （nbsp = non-breaking space，不间断空格）：
<p>我 打了三个空格</p> 有两个特性，正是它区别于普通空格的原因：
- 不会被折叠——写几个显示几个；
- 不允许在它处断行——“10 km”、“3 时”这类”数字与单位”之间用
连接，能避免换行时数字和单位被拆到两行：
<p>售价仅需 99 元，全场包邮。</p>注意：
是”排版工具”而不是”万能填充”。需要拉开元素间距时，正确做法是学 CSS 后用margin/padding，不要用一串 硬撑。
3.3 预告：空白行为可以改
空白折叠是”默认行为”，不是铁律。CSS 的 white-space 属性可以改变它（例如 pre 值会让空格换行原样保留），<pre> 元素天生就是这个行为。第一遍知道”这事儿有开关”即可，学到 CSS 时再细究。
4. 实体字符：特殊符号的安全写法
4.1 为什么需要”代号”
HTML 里有几个字符身兼数职，直接写会引起误会：
<是标签的开始，正文里直接写1 < 2，浏览器可能把< 2...误认为某个标签的开头；&是实体字符的开始，直接写©会被浏览器当成没写完的实体去”翻译”。
实体字符（HTML entity）就是给这些字符发的”代号”：浏览器遇到代号，把它翻译成对应的符号原样显示，而不会当成语法解析。
4.2 必须背的 5 个
| 实体写法 | 显示效果 | 用途 |
|---|---|---|
| 一个不换行空格 | 连续空格、防止文字断行 |
< | < | 显示小于号（否则会被当成标签开头） |
> | > | 显示大于号 |
& | & | 显示与符号（否则会被当成实体开头） |
© | © | 显示版权符号 |
另外两个常用的：" 显示双引号 "，' 显示单引号 '，主要用在属性值里。
4.3 三种写法：同一个符号可以有多种代号
实体字符不止 &名字; 一种写法，还有十进制与十六进制编号：
<p>版权符号的三种写法：© © ©</p>
<!-- 三者显示效果完全一样：© © © -->| 写法 | 格式 | 适用场景 |
|---|---|---|
| 命名实体 | © | 常用符号，好记好读，优先使用 |
| 十进制编号 | © | 没有名字的字符（按 Unicode 码位编号） |
| 十六进制编号 | © | 同上，技术文档里更常见 |
4.4 常用实体扩展表（用到再查，不必背）
| 实体 | 显示 | 用途 |
|---|---|---|
® | ® | 注册商标 |
™ | ™ | 商标 |
— | — | 破折号（占一个汉字宽度） |
… | … | 省略号 |
« / » | « / » | 法式引号 |
° | ° | 度数 |
± | ± | 正负号 |
× | × | 乘号 |
· | · | 间隔号 |
€ / £ / ¥ | € / £ / ¥ | 货币符号 |
4.5 一个重要澄清：大部分字符其实可以直接打
本课程的文档统一采用 UTF-8 编码（详见 html5/060-MetadataCharacterEncoding），中文、日文、数学符号等绝大多数字符都可以直接写进源文件，不需要实体。真正必须用实体的只有三类：
- 语法保留字符：
<、>、&（在属性值里再加引号）； - 需要表达排版意图的空白：
； - 键盘打不出、又不想记 Unicode 码位的偶尔一用的符号（用命名实体更省事）。
反过来说：如果页面把大段中文显示成 你好 这样的数字代号，多半是内容被多做了一次转义——这是排查”页面显示乱码/代号”问题时的重要线索。
4.6 什么时候必须用（核对清单）
- 想显示连续空格：用
； - 想在正文里写
1 < 2：必须写1 < 2，否则浏览器可能把<后面的内容误认为标签； - 链接地址里带
&（如page.html?a=1&b=2）：属性中写成&； - 想在网页上展示一段代码：把
<、>、&全部转成实体，代码才能原样显示：
<!-- 想让访客看到 "<h1>标题</h1>" 这行代码本身 -->
<code><h1>标题</h1></code>埋个伏笔：第 3、4 条不只是”显示正确”的问题，还与安全有关——将来学 JavaScript 与后端时会遇到”XSS 注入攻击”，其防线之一就是对用户输入内容里的
<、>、&做同样的转义。现在先把”转义”这件事练熟。
5. 动手试试
入门版
- 打开
html5/030-HTML5EnvSetupFirstPage创建的index.html，给标题加一行注释，刷新页面确认注释没有显示； - 写一个段落，连续敲 10 个空格，刷新观察；再写一个段落，连续打 10 个
，刷新对比差异； - 在段落里写
5 © 2026，刷新看效果。
进阶版
- 用实体字符写一段包含
<、>、&的文字，再写一段不转义的版本，对比显示差异； - 试着在网页上展示一行 HTML 代码（例如
<h1>标题</h1>），想想哪些字符必须转义； - 用三种写法（
©、©、©）各打一个版权符号，确认三者渲染结果一致； - 按
Ctrl+/练习注释多行代码，再用 F12 确认注释没有出现在页面上。
6. 常见问题与改进建议
| 常见问题 | 原因 | 改进建议 |
|---|---|---|
| 注释不生效，页面多出奇怪内容 | 注释里又写了 -->，提前结束了注释 | 注释中不再写注释结束符，需要分段时拆成多个注释 |
| 把密码写进注释 | 以为注释”只有自己能看” | 注释在 F12 中完全可见，敏感信息一律不写 |
| 打了 5 个空格只显示 1 个 | 不理解空白符折叠规则 | 需要连续空格时用 ，需要间距时用 CSS |
正文里写 1 < 2 页面错乱 | < 被浏览器当成标签开头 | 写成 1 < 2 |
链接参数带 & 解析出错 | 属性中的 & 未转义 | 写成 & |
页面原样显示 © 字样 | 实体名拼写错误或漏了结尾分号 | 核对拼写；命名实体末尾的 ; 不能省 |
用一串 做对齐 | 不知道排版间距属于 CSS 的职责 | 学完 CSS 后用 margin/padding 控制 |
7. 下一步
注释和实体字符解决的是”字符怎么打”的问题。下一篇 html5/070-HTML5BlockVsInline 解决”标签怎么排”的问题：为什么 <h1> 独占一行，而 <span> 不换行。