<p>HTML注释需严格使用<!-- -->语法，避免嵌套、符号错误及混用JS/CSS注释；应独占一行、缩进一致、配对标注区块边界，并用TODO/FIXME等明确标记意图，而非替代语义化结构。</p>
HTML注释本身不改变页面行为，但写错位置、嵌套或混用符号会导致解析失败，甚至让整段后续 HTML 被浏览器误判为注释内容。
注释语法必须严格匹配 <!-- 和 -->
浏览器只认这一对标记，任何偏差都会中断解析。常见错误包括：
- 漏掉末尾的
-->，导致后面所有 HTML 都不渲染（页面空白或结构错乱） - 在注释内出现
--或>，比如写成<!-- 临时禁用 -- 新逻辑 -->，浏览器会在第一个--后就提前闭合，余下内容暴露为明文 - 误用
//或/* */，这些是 JS/CSS 的注释，在 HTML 中会被当作普通文本显示在页面上
多行注释要单独成行且缩进一致
把注释和标签挤在同一行会破坏结构可读性，尤其在嵌套较深时容易看错层级。正确做法是：
- 注释独占一行，前后都换行
- 与所标注代码保持相同缩进，例如
<main>缩进 2 空格，注释也缩进 2 空格 - 起始和结束注释配对使用，如
<!-- Header Start -->和<!-- Header End -->，方便搜索定位 - 避免写成
<!--<div class="card">-->这类“包裹式”写法，它既难读又容易因缩进不一致引发协作混乱
用 TODO、FIXME 等标记代替模糊描述
“待优化”“这里有问题”这类注释没有操作指向性。实际开发中应明确标注意图：
立即学习“前端免费学习笔记（深入）”；
-
<!-- TODO: 替换为 fetch API 调用 -->—— 指出下一步动作和工具 -
<!-- FIXME: Safari 下 flex gap 不生效，降级为 margin -->—— 说明问题现象与临时方案 -
<!-- NOTE: 此处依赖后端返回的 data-status 字段 -->—— 提示关键外部依赖 - 上线前建议全局搜索
TODO，避免遗漏；但不要全删——有些FIXME是线上已知限制，需留作监控依据
结构注释要覆盖区块边界，而非单个标签
给 <div> 单独加注释意义有限，真正有用的是圈出语义区块。比如：
- 用
<!-- Navigation Bar -->包住整个<nav>及其子元素，而不是只注释<nav>开头 - 组件级注释应包含用途和上下文，如
<!-- Product Carousel: auto-rotates every 5s, paused on hover --> - 避免在每行 HTML 前都加注释，这会让源码膨胀、干扰扫描节奏；重点标注“为什么在这里”而非“这是什么标签”
- 模板引擎（如 Handlebars、Vue SFC）中注意：HTML 注释不会被服务端或构建工具移除，若含敏感信息（如
<!-- DEBUG: user_id=12345 -->），可能意外泄露到生产环境源码中
最常被忽略的一点：注释不是替代清晰结构的手段。一个靠大量注释才能看懂的 HTML 片段，往往意味着语义标签没用好、class 命名不一致，或逻辑本该抽离到 JS/CSS 中。注释是补丁，不是底座。
