HTML注释不执行代码但会生成Comment节点影响DOM操作，不能用于隐藏元素或条件渲染，仅适合写开发说明；禁用结构应使用CSS或JS控制，调试推荐DevTools右键隐藏。
HTML 注释里写代码不会执行，但会影响 DOM 结构
HTML 注释（<!-- ... -->）本身不参与渲染，也不触发 JS 执行，但它会真实存在于 DOM 树中，类型为 Comment 节点。这意味着：用 JS 操作 DOM 时，它可能意外干扰遍历逻辑或选择器匹配。
- 比如用
parent.childNodes遍历时，注释节点会混在元素节点之间，容易漏判或越界 -
document.querySelector('div')不会选中注释，但document.querySelectorAll('*')会包含它（在支持该行为的浏览器中） - 服务端模板（如 Django、Vue SFC）若在注释里插变量（
<!-- {{ data }} -->），实际会把原始字符串当文本输出，而非执行
想“隐藏”元素，别用注释包裹，改用 CSS 或属性
常见错误是把一段 HTML 套进 <!-- ... --> 当作临时禁用手段，比如：<!-- <button onclick="doIt()">点我</button> -->。这看起来“注释掉了”，但其实只是让浏览器跳过解析——它根本不会生成 DOM 节点，JS 也无法后续通过 getElementById 找到它。
- 真要临时隐藏，用
style="display: none"或hidden属性，DOM 还在，JS 可控 - 需要条件渲染，交给 JS 控制
element.remove()或框架的v-if/*ngIf - 调试时想“屏蔽某段结构但保留位置”，用
<div style="visibility: hidden; height: 0; overflow: hidden">...</div>更可靠
HTML 注释的唯一正经用途：给开发者看的说明，不是运行时开关
它只在源码里可见，审查元素里能看到灰色文字，但对页面行为零影响。适合写：模块说明、临时 TODO、服务端 include 提示、SEO 注意事项。
- 避免在注释里写可执行逻辑，比如
<!-- if (user.isAdmin) { renderAdminPanel() } -->—— 它纯属无效文本 - 不要依赖注释做 A/B 测试或功能灰度，那得靠 JS 判断或后端响应
- 构建工具（如 Webpack、Vite）默认不会移除 HTML 注释，上线后仍存在，敏感信息（如路径、密钥片段）别往里写
调试时想快速“禁用”某段 HTML，用浏览器 DevTools 的右键菜单
比手动加注释快得多，也更安全。在 Elements 面板中右键点击任意元素 → 选择 Hide element（Chrome / Edge）或 Break on attribute modification 配合手动删节点，能实时观察变化而不污染源码。
立即学习“前端免费学习笔记（深入）”；
- 这个操作只在当前 DevTools 会话生效，刷新即恢复，不会误提交到 Git
- 如果想“模拟注释掉但保留结构”，右键选
Edit as HTML，把内容替换成空格或<!-- placeholder -->，比手敲更准 - 注意：某些框架（如 React）的根容器被 Hide 后，整个应用可能因无法挂载而报错
Target container is not a DOM element
注释不是胶带，粘上就能“暂时不用”。它不参与任何运行时流程，只是一行静态文本。真正影响行为的，永远是 DOM 节点是否存在、CSS 是否生效、JS 是否执行——这三件事，注释一个都管不了。
