<p>HTML中没有“备注”，只有<!-- -->注释；它不显示、不可见、无法被JS选择器获取，仅用于源码说明，语法严格，不可嵌套或缺失字符，生产环境常被压缩移除。</p>
HTML 里没有“备注”这个东西，只有 <!-- --> 注释
很多人搜“HTML 修改备注”，其实是想改页面里那些灰色的、不显示在浏览器里的说明文字。HTML 标准里管这叫“注释”，语法固定是 <!-- 这里是注释内容 -->，不是 Word 里的批注，也不能像 JS 那样用 // 或 /* */。
常见错误现象：<!-- 这是注释 --> 被写成 <!-- 这是注释 >（少了一个 -），或者嵌套使用（<!-- <!-- 内层 --> -->），浏览器直接忽略整段甚至破坏后续结构。
- 注释必须以
<!--开头、-->结尾，中间不能出现--或> - 换行、缩进、空格都允许，但别在注释里写未转义的 HTML 标签（比如
<div>），哪怕只是想“备注一下结构”，浏览器可能误解析 - 构建工具（如 Webpack/Vite）默认保留注释，但生产环境常配
minify: true，会自动删掉所有<!-- -->—— 别指望它在上线后还“可见”
想让“备注”在页面上显示出来，就得用真实 HTML 元素
如果本意是“给开发/测试人员看提示，但又不想影响用户”，那得靠视觉隐藏 + 语义化标记，而不是依赖注释。注释对运行时完全不可见，连 document.querySelector() 都抓不到。
使用场景：临时调试提示、组件说明、A/B 测试标记位。
立即学习“前端免费学习笔记（深入）”；
- 用
<div>+class="dev-note"，配合 CSSdisplay: none或color: #999; font-size: 0.8em; - 加
data-*属性更稳妥，比如<div data-dev-note="此处对接 v2 API"></div>，JS 可读可查，不影响渲染 - 避免用
<span>包注释文字再设visibility: hidden—— 它仍占布局流，可能意外撑开容器
document.createComment() 是 JS 动态加注释的唯一方式
真有 runtime 修改注释的需求（极少见），只能走 DOM API。HTML 字符串里的 <!-- --> 是静态的，加载完就固化了，没法“修改”，只能删掉重插。
性能影响很小，但兼容性要注意：IE9+ 支持 createComment，但老项目若用 jQuery .html() 设置含注释的字符串，某些版本会过滤掉注释节点。
- 插入注释节点：
const comment = document.createComment('debug: user auth pending');+element.appendChild(comment) - 替换已有注释：先
node.parentNode.replaceChild(newComment, oldComment)，不能直接改nodeValue（只读） - 检查是否存在注释节点：
node.nodeType === 8（注释节点类型码是 8），不是查innerHTML里有没有<!--
编辑器里快捷键改的不是 HTML 注释，是文件级备注
VS Code / WebStorm 按 Ctrl+/ 对选中行加的是编辑器级注释（<!-- --> 或 //），不是 HTML 规范里的注释节点。它只是帮你快速输入字符，和浏览器解析无关。
容易踩的坑：在 .html 文件里用 Ctrl+/ 注释掉一段 <script>，结果脚本没执行——因为 <!-- 在 script 标签内会被当普通文本，不是 JS 注释语法。
- JS 代码块里要注释，必须用
//或/* */，<!--无效 - 编辑器设置里关掉 “Auto closing tag” 可能导致
<!--输入后自动补-->，但光标停在中间，手抖多按一次Enter就断成两截 - 用 Prettier 格式化时，默认保留 HTML 注释；但 ESLint 不校验它，所以拼写错误或过期说明没人提醒
改注释本身很简单，难的是想清楚：你到底要让它“给人看但不渲染”，还是“给机器读但人看不见”，或是“临时留痕等后续自动化处理”。选错载体，后面全是坑。
