<p>HTML注释唯一合法语法是<!-- ... -->，非法形式会导致解析错误或白屏；仅在<body>等内容区最安全，注释内禁用--和未转义的<>，且构建时通常被自动移除。</p>
HTML 注释语法本身没有“规范等级”，但有必须遵守的硬性规则
HTML 的注释只有 <!-- ... --> 这一种合法写法，其他形式（比如 //、/* */、<!--- >）在解析时会被当作普通文本或导致解析错误。浏览器遇到非法注释结构，可能截断后续 DOM，尤其在 <head> 里出错时页面会白屏。
常见错误现象：
- 用
<!--- 多个短横线 -->→ 被识别为注释开始但永不闭合，后面所有 HTML 都被吞掉 - 注释里嵌套
<!--（如<!-- <!-- debug --> -->）→ 第一个--后遇到-->就提前结束，中间内容暴露为文本 - 在
<script>或<style>内部用<!--伪装“兼容旧 IE”的写法 → 现代浏览器已不需，反而干扰 JS/CSS 解析
哪些地方能安全写 HTML 注释？优先级和场景差异明显
不是所有位置都适合加注释。HTML 解析器对注释位置敏感，尤其在特殊上下文里会改变行为。
-
<head>区域：可写，但避免紧贴<title>或<meta>前后——某些构建工具（如 Webpack HTML 插件）会因注释位置误判标签边界 -
<body>内容区：最安全，但不要插在内联元素中间（如<p>文字<!-- 注释 -->更多文字</p>合法，但影响可读性） - 表格结构中（
<tr>/<td>之间）：允许，但不能替代语义化标签；用注释说明“此处未来将插入动态行”比留空<tr></tr>更易维护 - 自定义元素或 Web Component 模板内：建议用 JS 注释（
//或/* */）代替 HTML 注释，避免模板字符串拼接时意外闭合
注释内容里哪些字符必须转义？不是所有符号都安全
<!-- 和 --> 是注释定界符，中间内容本不该被解析，但实际存在两个隐性限制：
立即学习“前端免费学习笔记（深入）”；
-
--连续出现会提前触发注释结束（哪怕在单词里），例如<!-- user--id -->实际只注释了user，后面-id -->会暴露为文本甚至破坏结构 -
>单独出现无害，但若前面紧跟->（如foo->），可能被误判为注释结束信号（虽不常见，但某些 HTML 压缩器会主动修复） - 推荐做法：注释内含代码片段时，用
和 <code>>转义尖括号，用—替代长破折号，避免--
示例：<!-- 示例：渲染逻辑见 src/components/Header.js，参数为 { title: "Home" } -->
构建流程中 HTML 注释常被自动移除，别依赖它做运行时逻辑
多数生产环境构建（Vite、Webpack、Next.js 默认配置）会启用 html-minifier 或类似工具，开启 removeComments: true。这意味着你在源码写的 <!-- DEV_ONLY --> 在上线后根本不存在。
- 想实现“开发可见、生产隐藏”，得用 JS 控制（如
process.env.NODE_ENV === 'development'动态插入元素） - 用注释标记区块供构建工具识别（如
<!-- htmlmin:ignore -->）需要显式配置插件支持，且不同工具语法不互通 - 注释里写 TODO / FIXME 不会被 ESLint 或其他静态检查捕获——这类信息应移到对应 JS/TS 文件的注释中
真正容易被忽略的是：注释不参与任何语义或无障碍（a11y）暴露，屏幕阅读器完全跳过 <!-- ... -->。如果需要向辅助技术说明某块区域用途，用 aria-label 或 role，而不是注释。
