HTML5注释只有一种语法<!--...-->，无临时与正式之分；开发中可用但须提交前清理，避免污染生产环境、触发CI告警或误导团队；推荐用JS注释+环境变量替代，并确保HTML临时注释含责任人、原因及清理时限。
HTML5 注释语法本身没有“临时”或“正式”之分
HTML5 只有一种注释语法：<!-- ... -->，它不区分用途，浏览器会完全忽略其中内容。所谓“临时备注”，其实是开发者在写代码时的主观行为，不是语言特性。关键在于怎么用、何时删、如何避免干扰协作和构建流程。
临时注释别塞进生产 HTML 文件里
很多团队误把 <!-- TODO: 修复按钮对齐 --> 这类标记留在上线页面中，这会带来几个实际问题：
- 增加 HTML 体积（尤其大量遗留注释时）
- 被爬虫或自动化工具意外抓取并索引（虽不渲染，但可读）
- CI/CD 流程中触发 HTML 静态检查告警（如
html-validate默认警告非空注释） - 新成员误以为是“待办事项”，却找不到上下文或责任人
实操建议：
- 开发阶段可用，但提交前用编辑器快捷键（如 VS Code 的
Ctrl+Shift+P→ “Remove All HTML Comments”）批量清理 - 用
git diff检查是否残留<!--行，特别是<!-- DEV ONLY -->类标记 - CI 脚本中加入
grep -q '<!--' src/index.html && echo "ERROR: found HTML comments" && exit 1做基础拦截
替代方案：用 JS 注释 + 开发环境开关更可控
真正需要“临时备注”的场景，比如调试某段逻辑、绕过某组件、模拟数据——这些更适合放在 JavaScript 层，配合环境变量控制：
立即学习“前端免费学习笔记（深入）”；
if (import.meta.env.DEV) {
console.log('DEBUG: button render triggered');
// TODO: check why onClick fires twice
}
// 或用条件注释（仅限 JS）
// @ts-ignore // temp fix for TS7016 until @types/react updated
优势明显：
- JS 注释天然支持 IDE 跳转（如 VS Code 点击
TODO自动聚合） - 打包工具（Vite / Webpack）默认移除
console.*和开发专用代码块 - 不会污染 HTML DOM 结构，不影响 SSR 输出或 Lighthouse 评分
团队协作中注释必须带上下文和时效性
如果真要在 HTML 里留一行临时注释（例如快速验证某个 class 是否生效），至少要包含三要素：谁、为什么、什么时候清理：
<!-- @alice: temp override for header spacing, remove before PR merge --> <header class="header--dev-fix">...</header>
常见失效写法：
-
<!-- fix later -->→ 没人知道“later”是哪天，“fix”指什么 -
<!-- XXX -->→ 搜索不到含义，也搜不到人 -
<!-- test -->→ 构建后还在，测试完没删，变成幽灵注释
复杂点在于：HTML 注释无法被 lint 工具自动追踪生命周期。一旦写了，就得靠人盯、靠流程卡、靠 Git 提交信息反查。没人跟进的话，三个月后它就成谜题了。
