html注释写错位置会直接吃掉dom结构：解析器在首个“--”或“-->”处终止注释，后续内容被当作文本或丢弃，导致页面模块消失、dom缺失。
HTML注释写错位置会直接吃掉DOM结构
不是“注释没用”，而是写错位置等于删代码。浏览器遇到<!--就进入注释状态，直到下一个-->才结束——中间出现独立的--（比如<!-- 配置开关: --enable-logging -->），解析器会在第一个--后立刻终止注释，后面所有内容都变成普通文本或被丢弃。
-
<!-- <!-- 嵌套 --> -->：外层注释匹配到第一个-->就结束，后续真实HTML全被吞掉，页面突然少模块，查DOM发现那段根本没生成 <div title="<!-- 错!-->foo">：属性值里写<code><!--会触发解析器进入注释态，导致整个标签提前截断或属性失效<!-- TODO: IE11 flex塌陷修复 -->：结尾-->紧贴文字，实际被当成注释结束符，>漏出来变成未闭合标签，引发后续渲染错乱验证方法很简单：右键“查看网页源代码”，搜索
<!--和-->是否成对、中间有没有孤立--或>连写。团队协作中必须带上下文的注释类型
光写
<!-- 这里改过 -->等于没写。协作注释不是日记，是轻量级工单，要能回答“谁、什么时候、为什么、是否已确认”四个问题。- 权限控制区域：
<!-- 权限控制区域:仅admin可见,后端已校验,前端仅隐藏 -->——不写依据，后续容易被当成冗余结构误删 - 跨组件共享模板：
<!-- END OF HEADER TEMPLATE (shared across /app and /admin) -->——不标清楚，改一处header可能连带影响后台管理页 - 兼容性hack：
<!-- 修复IE11下flex布局塌陷问题 -->——没注释会被当成“过时代码”清理，然后IE用户集体报错 - 框架挂载点：
<!-- Vue mount point: do not remove or wrap -->——删了或包进其他标签会导致JS失效
推荐统一前缀：
<!-- TODO:、<!-- REVIEW: OPEN、<!-- FIXME:，方便IDE插件高亮或Linter自动扫描。上线前不清理注释会泄露敏感信息
构建工具（如Vite或Webpack）默认不删HTML注释。如果没配
removeComments，这些注释会原样发给用户——路径、接口逻辑、待办事项、甚至内部人员名都会暴露。- 调试用的临时注释，如
<!-- DEBUG: data loading delay added for testing -->，上线前必须删除 - 含时间戳的协作标记，如
<!-- TODO: [登录流程] - 需对接新SSO协议(2026-06-28, @zhangsan) -->，若长期未处理，应转为Jira任务并清除 - 文件头部注释（作者、修改记录）建议只保留在开发环境，生产构建阶段通过插件剥离
- 大型模块必须成对标注，且风格统一（全用
:start/:end，或全用start/end of xxx） - 注释前后各留一个空格：
<!-- header:start -->比<!--header:start-->更易识别 -
<script></script>和<style></style>内部严禁用<!-- -->，JS用//或/* */，CSS只能用/* */
真正危险的不是写了注释，而是写了却忘了它会随HTML一起下发。
注释不能替代结构设计，但能守住关键边界
最常被忽略的不是“要不要写注释”，而是“注释是否在正确的位置、用正确的格式、承载了足够的上下文”。比如
<!-- header:start -->和<!-- end of .sidebar -->这类区块标记，本质是人工维护的结构锚点——它不改变功能，但一旦缺失或错位，重构时极易误删依赖区域。注释本身没有语法错误风险，但它是一条隐性契约：写在这里，就意味着“动这段代码前，请先看这行字”。
- 权限控制区域：
