html注释正确写法是，浏览器完全忽略其内容；常见错误包括漏结尾、嵌套注释、位置不当及含--或>；适合模块分隔、临时禁用代码、标记todo；不适合script/style内、属性中或藏敏感信息。
HTML 注释的正确写法是 <!-- 注释内容 -->
不是 //，也不是 /* */，更不能用 （那是 JSP 的）。浏览器会完全忽略 <!-- --> 之间的所有内容，包括换行、标签、JS 代码——哪怕里面写了 <script>alert(1)</script> 也不会执行。
常见错误现象：
— 写成 <!-- 注释 --（漏了结尾 -->），导致后续整页 HTML 被当成注释不渲染；
— 在注释里嵌套注释，比如 <!-- <!-- 内层 --> 外层 -->，这是非法语法，解析器会直接截断到第一个 -->；
— 把注释写在 标签之前，虽然多数浏览器能容错，但不符合规范，XML 解析器或某些构建工具（如 Webpack + html-loader）可能报错。
注释里不能出现 -- 或结尾的 >
因为 <!-- 和 --> 是硬边界。只要注释正文里出现连续两个短横线 --，浏览器就会认为注释提前结束了——哪怕它出现在单词中间，比如 <!-- user-name -- is valid -->，实际只注释了 user-name ，后面 is valid 会裸露出来被渲染。
安全做法：
— 避免手动拼接含 -- 的字符串；
— 如果真要写双短横（比如表示范围 “5--10”），改成用中文破折号或 en dash（–）；
— 不要在注释末尾留空格后跟 >，例如 <!-- end -- > 中的空格+> 可能触发解析异常；
— 用编辑器自动补全（如 VS Code 输入 <! 回车）比手敲更可靠。
立即学习“前端免费学习笔记（深入）”；
哪些地方适合加 HTML 注释？哪些不适合？
适合：
— 模块分隔：比如 <!-- header start --> 和 <!-- header end -->，方便团队协作定位；
— 临时禁用某段结构：<!-- <div class="ads">...</div> -->，比删代码再找更安全；
— 标记待办：<!-- TODO: 接入 SSR -->，部分 IDE 能识别并高亮。
不适合：
— 在 <script></script> 或 <style></style> 标签内部用 HTML 注释（应该用 JS/CSS 自身的注释语法）；
— 给单个属性加注释，比如 <div class="btn"> data-id="123">，语法错误，属性里不能塞注释；<br>— 大段敏感信息（如 API key）藏在注释里——源码可见，毫无安全性可言。<h3>服务端模板里混用 HTML 注释要注意什么？</h3>
<p>像 Vue、React、PHP、Django 这类环境，容易混淆“HTML 注释”和“模板引擎注释”。比如 Vue 中 <code><!-- {{ msg }} --> 看似注释，但 {{ msg }} 仍会被 Vue 编译器解析执行；而 （JSP）或 {# {{ msg }} #}（Django）才是真正的服务端静默注释。
关键判断点：
— 打开浏览器开发者工具 → 查看 Elements 面板 → 如果注释内容里有动态值（如 user_123）且没被渲染，说明是服务端注释；如果值还在注释里，那就是 HTML 注释；
— 构建产物中是否还存在该注释：Webpack 打包时默认保留 HTML 注释，但 html-webpack-plugin 配置 minify: { removeComments: true } 会删掉；
— 模板语法优先级高于 HTML 注释，不要指望用 <!-- --> 来屏蔽未闭合的 或 {% endif %}。
最常被忽略的一点：注释本身也会被计入 HTML 文件体积，千行注释可能多出几十 KB。上线前确认构建流程是否清理了无用注释，尤其是带调试信息的长注释。
