html注释正确写法是,须严格遵循开头,中间禁用--或>,否则解析提前终止;不支持嵌套及//、/ /语法;影响dom但极轻微,不可用于条件编译。

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 体积,影响首屏加载——尤其在
里堆满调试注释时 - 某些老旧工具(如部分 HTML 压缩器)可能错误删除注释,导致依赖注释的构建逻辑失效(例如 Webpack 的
html-webpack-plugin用注释标记注入点)
别把注释当条件编译或模板占位符用
有人习惯写 <!-- DEV-ONLY --><script src="dev.js"></script><!-- END-DEV-ONLY -->,指望靠注释控制加载——这完全无效。浏览器照常下载并执行 <script></script>,注释只起说明作用,不改变行为。
真正需要条件逻辑的地方,必须用:
- 服务端模板(如 EJS 的
) - 构建时预处理(如 Vite 的
import.meta.env.DEV+ 动态import()) - 运行时 JS 判断(
if (location.hostname === 'localhost') {...})
注释就是给人看的,不是给机器执行的开关。混淆这点,后期维护时容易误删关键逻辑,或以为注释能“屏蔽”代码而放松测试。










