HTML注释必须严格闭合且避免嵌套或含敏感信息，否则会导致结构错乱、信息泄露及协作障碍；其位置、格式与上下文直接影响代码可维护性与安全性。
HTML注释本身不改变功能，但写错位置、嵌套、含敏感信息或缺失关键上下文，会直接导致结构破坏、协作断层、调试失焦——它不是“可有可无的说明”，而是代码质量的隐性守门人。
注释写错位置会吞掉整段HTML
浏览器遇到<!--就进入注释状态，直到下一个-->才结束。中间出现独立的--（比如<!-- 这里不能出现 -- -->），会导致提前截断；而<!-- <!-- 嵌套 --> -->这种写法，外层注释会一直匹配到第一个-->，后面一大段真实HTML就被静默吃掉，页面结构直接错乱。
- 常见现象：改完一处注释，页面突然少了一整个模块，检查DOM发现那段HTML根本没生成
- 真正原因不是JS或CSS问题，而是注释提前闭合后，后续标签被当成注释内容丢弃
- 验证方法：右键“查看网页源代码”，搜索
<!--和-->是否成对、是否夹杂多余--
团队协作中注释必须能被机器识别和人工快速定位
只写<!-- 这里改过 -->等于没写。协作注释不是日记，是轻量级工单，要能回答“谁、什么时候、为什么、是否已确认”四个问题。
- 推荐格式：
<!-- TODO: [登录流程] - 需对接新SSO协议（2026-06-28, @zhangsan） --> - 审查类标注用统一前缀，如
<!-- REVIEW: OPEN - class命名与BEM规范冲突 -->，方便IDE插件高亮 - 权限/兼容性等关键逻辑必须带依据，例如
<!-- 权限控制区域：仅admin可见，后端已校验，前端仅隐藏 -->，避免后续误删 - 构建工具（如Vite或Webpack）默认不删注释，上线前若未配置
removeComments，这些注释会暴露给用户，可能泄露路径、接口逻辑甚至待办事项
哪些地方必须加注释，而不是“可加可不加”
不是所有注释都平等。以下几类位置漏掉注释，大概率引发后续误操作：
立即学习“前端免费学习笔记（深入）”；
-
<!-- Vue mount point: do not remove or wrap -->—— 框架挂载点，删了或包进其他标签会导致JS失效 -
<!-- 用户权限控制区域：仅 admin 可见，后端已做校验，前端仅作隐藏 -->—— 业务强约束，没注释容易被当成冗余结构删掉 -
<!-- END OF HEADER TEMPLATE (shared across /app and /admin) -->—— 跨组件边界，不标清楚，改一处header可能连带影响后台管理页 -
<!-- 修复IE11下flex布局塌陷问题 -->—— 兼容性hack，没注释会被当成“过时代码”清理掉，然后IE用户集体报错
最常被忽略的不是“要不要写注释”，而是“注释是否在正确的位置、用正确的格式、承载了足够的上下文”。它不参与渲染，却决定了别人能不能看懂你写的到底是什么，以及半年后你自己还敢不敢动那行代码。
