课时16：HTML 注释¶
学习目标：掌握 HTML 注释的语法格式，理解其在代码注解与调试中的核心作用，建立规范使用注释的开发习惯。
一、注释的基本概念¶
1.1 什么是注释¶
注释是代码中用于说明、标记或临时屏蔽内容的特殊语法结构。注释内容：
- ✅ 在源代码编辑器中可见
- ❌ 在浏览器渲染结果中不可见
- ❌ 浏览器不会加载注释内容
1.2 为什么需要注释¶
实际开发中页面代码量可达数百甚至上千行，复杂的结构（如头部导航、主体内容区、底部版权区）若缺乏标识：
- 他人接手维护时难以快速理解代码结构
- 开发者自身长期未接触后也可能遗忘各部分用途
- 英文类名（如
header、content、footer）对部分开发者辨识度有限
二、HTML 注释语法¶
2.1 标准写法¶
语法结构拆解：
| 符号 | 含义 | 说明 |
|---|---|---|
<!-- |
注释开始 | 左尖括号 + 感叹号 + 两个短横线 |
| 注释内容 | 任意文本 | 说明文字、标记信息或临时屏蔽的代码 |
--> |
注释结束 | 两个短横线 + 右尖括号 |
- 感叹号
!起到警示作用，表明中间内容被注释 - 注释不可嵌套（HTML 不支持注释内再写注释）
2.2 快捷键操作¶
在 VS Code 等现代编辑器中：
| 快捷键 | 功能 | 操作说明 |
|---|---|---|
Ctrl + / |
快速注释/取消注释 | 选中代码后按下，自动添加或移除注释符号 |
三、注释的核心作用¶
3.1 作用一：注解代码，提高可读性¶
解决的问题：代码需要便于他人维护，开发者自身也可能遗忘各部分含义。
具体应用：
<!-- 头部导航区域开始 -->
<header>
<nav>导航内容</nav>
</header>
<!-- 头部导航区域结束 -->
<!-- 主体内容区域 -->
<main>
<article>文章正文</article>
</main>
<!-- 底部版权区域 -->
<footer>
<p>版权所有 © 2023</p>
</footer>
规范建议： - 为每个主要区域添加开始和结束标记注释 - 使用直白的中文描述代码功能 - 帮助团队成员快速定位和理解代码结构
3.2 作用二：调试代码，临时屏蔽¶
应对的场景：
| 场景 | 说明 | 注释的应用 |
|---|---|---|
| 需求不确定 | 产品需求频繁变动（如文案从"警示"改为"提示"再改回） | 注释旧版本，保留源码以便恢复 |
| 方案对比 | 在图片 A 和图片 B 之间犹豫 | 注释一种方案，启用另一种 |
| 逻辑排错 | 怀疑某段逻辑有误，需测试替代方案 | 注释可疑代码，运行替代逻辑验证 |
| 多方案预留 | 需要匹配不同公司网址或链接 | 注释不需要的链接，仅启用当前所需 |
案例演示：
<!-- 需求不确定：产品还在决定用哪个文案 -->
<!-- <p class="warning">警示：操作不可逆</p> -->
<p class="tip">提示：请确认操作</p>
<!-- 方案对比：鸟巢 vs 歌剧院 -->
<!-- <img src="bird-nest.jpg" alt="鸟巢"> -->
<img src="opera-house.jpg" alt="歌剧院">
<!-- 逻辑调试：测试 B 方案是否可行 -->
<!-- <script>逻辑A();</script> -->
<script>逻辑B();</script>
四、注释使用的最佳实践¶
4.1 应该使用注释的情况¶
- ✅ 划分页面主要区域（header、main、footer、sidebar 等）
- ✅ 标记复杂的嵌套结构终点（如多层 div 的结束位置）
- ✅ 说明特殊的实现逻辑或兼容性处理
- ✅ 临时屏蔽调试代码或备选方案
- ✅ 标注 TODO 或 FIXME 待处理事项
4.2 避免过度注释¶
- ❌ 不要为每一行简单代码添加注释（如
<p>文本</p>） - ❌ 不要注释显而易见的代码逻辑
- ❌ 不要保留大量已废弃的注释代码（调试完成后应删除）
4.3 注释代码的管理¶
| 状态 | 处理方式 | 说明 |
|---|---|---|
| 临时调试 | 注释屏蔽 | 短期内可能恢复，保留注释代码 |
| 方案对比 | 注释备选 | 产品决策后删除未采用方案 |
| 长期废弃 | 直接删除 | 确认不再需要，彻底移除 |