<p>HTML注释必须用<!-- -->，其他写法无效；注释内禁用--和-->，JS/CSS中禁用HTML注释，注释位置不当会截断解析或暴露代码，需规范使用并上线前清理。</p>

HTML注释必须用<!-- -->，其他写法全无效

浏览器只认<!-- -->这一种注释语法。写成//、/* */、#或<!---（多一个短横），都会被当作普通文本渲染出来——轻则页面上赫然显示<!-- 注释内容 -->，重则破坏 DOM 导致白屏或脚本不执行。

VS Code 快捷键 Ctrl+/ 是否插入正确注释，取决于右下角语言模式是不是 html。如果当前是 javascript 模式，它会插 //；是 plaintext 模式，可能插 #——都不是 HTML 注释。

• 确认编辑器状态栏显示 HTML，再按快捷键
• 手敲时务必检查开头是 <!--、结尾是 -->，中间不能漏字符
• <!--- 或 -->（少一个-）这类“近似写法”一律报错

  注释里不能出现--或-->

  HTML 解析器遇到 <!-- 后的连续两个短横 --，会立刻终止注释——不管后面有没有 -->。这不是高亮异常，是真实解析行为，直接导致后续 HTML 被当作文本流处理。

  常见翻车点：

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • <!-- 版本号 v2.1--beta --> → --beta --> 部分被截断，beta --> 可能裸露在页面上
  • <!-- 链接: https://a.com/x?y=1&z=2 --> → & 必须写成 &，否则解析中断
  • 想写英文双短横（如 --help），改用中文破折号 — 或实体 –（en dash）

  <script></script> 和 <style></style> 标签内部禁用 HTML 注释

  <script></script> 和 <style></style> 里的内容由 JS 引擎或 CSS 解析器处理，它们完全无视 <!-- -->。在其中写 HTML 注释，不是“加了注释”，而是把 JS/CSS 代码暴露在注释体外，极易引发语法错误或渲染异常。

  • <script><!-- console.log(1); --></script> → HTML 解析器认为注释未闭合，console.log(1) 被当作文本渲染
  • <style><!-- body { color:red } --></style> → CSS 解析器收到的是空规则，样式失效
  • JS 用 // 或 /* */，CSS 用 /* */，别混用
  • 真要临时屏蔽整个脚本块，用 <!-- <script>...</script> --> 包裹整段标签

  注释位置和内容的隐性风险

  注释不是随便塞哪儿都安全。出现在 <head> 开头前、<!DOCTYPE html> 紧后、属性值中间，或嵌套在其他注释里，都可能触发解析器提前退出或截断。

  • <div class="box <!-- 说明 -->"> → 属性值里出现 <!--，解析器进入注释状态，直到遇到 -->，整个属性可能被吞掉
  • 多行注释别堆太长，有些构建工具（如 html-webpack-plugin）压缩时会抹掉换行，让 <!-- 多行注释 --> 变成一行难读的密文
  • 上线前应移除调试类注释（含路径、密钥、TODO），可用 minify: { removeComments: true } 自动清理
  • 模块级注释建议写意图而非结构，比如 <!-- 主导航：支持键盘焦点管理 -->，而不是 <!-- nav 开始 -->

  最麻烦的不是不会写，而是写了但没意识到它正在悄悄改变 DOM 结构或阻断 JS 执行——尤其当错误藏在嵌套层级深处时，排查成本远高于预防成本。