<p>HTML注释正确写法是<!-- comment -->，须严格遵循开头<!--、结尾-->，中间禁用--或>，否则解析提前终止；不支持嵌套及//、/ /语法；影响DOM但极轻微，不可用于条件编译。</p>
HTML 注释的正确写法是 <!-- comment -->
所有浏览器都支持这种写法，且必须严格遵循：开头是 <!--（注意短横线是两个，且紧贴尖括号），结尾是 -->（同样两个短横线，紧贴右尖括号）。中间不能出现 -- 或 >，否则解析会提前终止或报错。
常见错误现象：
- 写成
<!-- comment -->但中间多了一个空格变成<!-- comment -- >→ 实际上合法，但容易误读；更危险的是写成<!-- comment - ->（中间有空格）→ 解析失败 - 在注释里嵌套注释，比如
<!-- outer <!-- inner --> outer end -->→ 第一个-->就结束了整个注释，后面内容裸露出来 - 用
//或/* */写注释 → HTML 不识别，会被当作普通文本显示在页面上
注释里不能出现 -- 或 >
这是 HTML 规范硬性限制。只要注释内容中连续出现两个短横线（--），或者出现单独的 >，解析器就会认为注释已结束——哪怕你本意不是这样。
使用场景举例：想注释掉一段含破折号的文案，比如“前端 —— 从入门到放弃”，直接写 <!-- 前端 —— 从入门到放弃 --> 是危险的，因为中文破折号（—）虽视觉类似，但它是 Unicode 字符，不触发问题；但若误用英文短横线拼成 --，就崩了。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 避免手动输入
--，用编辑器自动补全<!--和--> - 注释大段代码时，优先用编辑器的“块注释”快捷键（如 VS Code 的
Ctrl+/），它会逐行加<!--和-->，不产生内部-- - 真要写带短横线的词，用
–（en dash）或—（em dash）代替，它们不会被解析器截断
HTML 注释会影响 DOM 结构和性能吗
会，但极轻微。每个 <!-- ... --> 都是一个 Comment 节点，存在于 DOM 树中，可被 JavaScript 通过 document.createComment() 创建，也能被 node.nodeType === 8 检测到。
影响主要在两处：
- DOM 查询（如
document.querySelectorAll('*')）会包含注释节点，若大量无意义注释，可能拖慢遍历速度（通常可忽略） - 服务端渲染或静态站点生成时，未移除的注释会增加 HTML 体积，影响首屏加载——尤其在
<head>里堆满调试注释时 - 某些老旧工具（如部分 HTML 压缩器）可能错误删除注释，导致依赖注释的构建逻辑失效（例如 Webpack 的
html-webpack-plugin用注释标记注入点）
别把注释当条件编译或模板占位符用
有人习惯写 <!-- DEV-ONLY --><script src="dev.js"></script><!-- END-DEV-ONLY -->，指望靠注释控制加载——这完全无效。浏览器照常下载并执行 <script>，注释只起说明作用，不改变行为。
真正需要条件逻辑的地方，必须用：
- 服务端模板（如 EJS 的
<% if (env === 'dev') { %>） - 构建时预处理（如 Vite 的
import.meta.env.DEV+ 动态import()） - 运行时 JS 判断（
if (location.hostname === 'localhost') {...}）
注释就是给人看的，不是给机器执行的开关。混淆这点，后期维护时容易误删关键逻辑，或以为注释能“屏蔽”代码而放松测试。
