<p>HTML注释必须用<!-- -->,其他语法无效且可能显示;不可嵌套、禁用--连写;注释是DOM中真实Comment节点,影响选择器匹配;不执行但暴露源码,勿存敏感信息;建议用TODO/FIXME等前缀规范用途。</p>

HTML 注释写法必须用 <!-- -->,别手滑写成 // 或 /* */
浏览器只认 <!-- --> 这一套注释语法,其他语言的注释风格在 HTML 里完全无效,也不会被忽略——有些甚至会直接显示在页面上。比如你在 <head> 里写了 // 这是注释,它可能就真出现在标题栏下方。
<!-- 这样是对的 -->-
<!-- 多行也OK -->(不需要每行都加<!--和-->) - 不能嵌套:
<!-- <!-- 内层 --> 外层 -->会导致外层注释提前结束 - 注释里不能出现
--连写(如<!-- 值为--10 -->),否则解析器会在第一个--后截断
HTML 注释位置影响 DOM 解析,但不参与渲染或执行
注释节点会作为 Comment 类型真实存在于 DOM 树中,document.body.childNodes 里能数出来。这意味着:用 querySelector 选元素时,:nth-child(2) 可能选到的是注释而不是你想要的 <div>;用 element.children 则自动过滤掉注释,但 element.childNodes 不会。
- 调试时用
console.dir(element.childNodes)比console.log(element)更容易发现“多出来的空白节点”其实是注释 - 服务端模板(如 EJS、Django)生成 HTML 时,如果条件块里留了注释,可能意外让注释出现在不该出现的位置(比如
<table>内部中间) - 不要依赖注释来“临时禁用”一段 HTML 结构——它还在 DOM 里,只是不显示;真要移除,得删掉或用 JS 控制
display: none
HTML 注释里的引号、尖括号、脚本片段不会被解析执行
这是安全边界:哪怕你写 <!-- <script>alert(1)</script> -->,这段内容纯文本存着,不会触发 JS 执行,也不会被 HTML 解析器当成标签处理。但要注意——这只是“不执行”,不是“不暴露”。
- 注释内容对用户完全可见(查看源码就能看到),别把密钥、内部路径、未上线功能说明写进去
- 某些构建工具(如 Webpack 的
html-webpack-plugin)默认保留注释;上线前若没配置minify.removeComments: true,生产环境照样泄露 - 注释里写
<!-- {{ variable }} -->对服务端模板有效,但对纯静态 HTML 无效——它就是字面量,不会被二次解释
「HTML代码引文注释汇总」这类命名习惯容易混淆语义
所谓“引文注释”,并不是 HTML 标准里的概念,而是人自己加的分类标签。实际使用中,更关键的是区分用途:<!-- TODO: 接口未联调 --> 是开发标记,<!-- IE8 兼容 hack --> 是兼容性说明,<!-- Analytics pixel --> 是第三方代码标识。混用一个汇总名,反而让搜索和维护变难。
立即学习“前端免费学习笔记(深入)”;
- 用统一前缀便于 grep:
grep -n "<!-- FIXME" *.html - 避免空泛描述,比如
<!-- 这里有问题 -->,不如写<!-- FIXME: Safari 下 flex gap 不生效 --> - 团队内约定好前缀(
TODO/FIXME/HACK)比起个“汇总”文件名更管用
事情说清了就结束。注释本身很简单,但混进模板、构建链路、协作习惯之后,最容易出问题的反而是“以为它无害”那一部分。











