<p>HTML注释必须以“-->”结尾且中间禁用“--”，否则导致解析截断；禁止嵌套；推荐模块化标记如“<!-- header start -->”；上线前须清理TODO、DEBUG及冗余HTML注释。</p>
HTML 注释不是可有可无的装饰，而是直接影响团队协作效率和长期维护成本的关键环节。写错一个 <!-- 或漏掉一个 -->，就可能让整段后续 HTML 被浏览器当成注释忽略——页面突然空白、样式错乱、脚本不执行，问题还难定位。
注释必须用 <!-- 开头、--> 结尾，中间不能出现 --
这是最基础也最容易翻车的一条。浏览器解析器遇到 <!-- 就进入注释状态，直到首次匹配到 --> 才结束。如果注释内容里不小心写了 --（比如想写“版本--v2.1”或“临时禁用--调试中”），解析器会提前终止注释，导致后面代码被截断解释。
常见错误现象：
- 页面某块区域突然不显示，但源码里明明写了标签
- 控制台没报错，但 DOM 中缺失预期节点
- 注释后紧跟的
<script></script>或<style></style>内容失效
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<!-- 版本：v2.1（注意这里没有 --） --> <!-- 临时禁用旧导航模块，待新组件上线后删除 -->
避免写成：
<!-- 版本--v2.1 --> <!-- ❌ 解析器在第一个 -- 就结束了 -->
注释不可嵌套，<!-- 里不能再写 <!--
HTML 标准明确不支持嵌套注释。哪怕你只是想“再注释掉一段注释”，浏览器也不会理解你的意图，而是按顺序匹配第一个 <!-- 和第一个 -->，中间所有内容（包括内层的 <!-- 和 -->）都算作注释文本。
使用场景：
- 调试时想临时屏蔽带注释的代码块
- 复制粘贴他人代码，原代码已含注释
实操建议：
- 别试图“注释掉注释”，直接删掉外层
<!--和-->，把整块代码缩进或移到文件末尾备份 - 用编辑器的“行注释”快捷键（如 VS Code 的
Ctrl+/）批量注释多行——它只在外围加<!--/-->，不会引入嵌套风险 - 如果必须保留原注释结构，改用
<!-- [DEBUG] ... -->标记，而不是二次包裹
模块级注释推荐写法：<!-- header start --> 和 <!-- /header -->
在大型 HTML 文件中，仅靠缩进很难快速定位 </header> 对应哪个 <header>。加结束注释是业内通行做法，但写法要统一、简洁、可搜索。
参数差异与性能影响：
-
<!-- header start -->比<!-- 开始：页眉区域 -->更轻量，减少源码体积（对 gzip 影响微乎其微，但利于 grep 查找） - 用
/header而非end header，能和 Vue/React 的结束标签风格对齐，也方便正则匹配/[a-z]+ - 不要写成
<!-- end of header -->，冗余词增加阅读负担
示例：
<!-- header start --> <header class="site-header"> <h1>我的网站</h1> </header> <!-- /header -->
上线前必须清理的三类注释
注释本身不耗性能，但某些类型会暴露信息或干扰运行时行为：
-
<!-- TODO: 添加响应式菜单 -->—— 上线后仍留着，等于公开项目缺陷 -
<!-- DEBUG: data-id=12345 -->—— 可能泄露内部 ID、环境配置等敏感信息 -
<!-- <div class="legacy">...</div> -->—— 大段被注释的 HTML，增大传输体积，且容易误恢复
容易被忽略的地方：构建工具（如 Vite、Webpack）默认不移除 HTML 注释。需要手动配置插件（如 html-minifier-terser 的 removeComments: true）或 CI 流程中加入校验步骤。否则，生产环境源码里依然能看到所有开发痕迹。
