HTML注释用<!--...-->，CSS注释用/*...*/，二者不可混用；在<style>或.css文件中使用HTML注释会导致解析错误或样式失效，在<script>中使用<!--也已不推荐。
HTML5 注释语法是 <!-- ... -->，不能套用 CSS 的 /* ... */
HTML 解析器只认 <!-- 开头、--> 结尾的注释格式，中间内容完全忽略（包括换行和嵌套尝试）。CSS 的 /* ... */ 在 HTML 文本节点中会被当作普通字符显示，甚至可能破坏结构——比如写在 <script> 或 <style> 外部时，浏览器会直接渲染成可见文字。
CSS 注释只能用 /* ... */，HTML 注释在 CSS 里无效且会报错
CSS 解析器不识别 <!--，把它当非法 token 处理。实际表现有两类：
- 写在
<style>标签内：Chrome/Firefox 会跳过整条规则（如果注释插在声明中间），或直接使后续样式失效 - 写在外部
.css文件里：整个文件加载失败，DevTools 控制台报ParseError: Unexpected token '<'
示例错误写法：
<style>
<!-- body { color: red; } -->
/* 正确的 CSS 注释 */
body { margin: 0; }
</style>在 <script> 和 <style> 标签内混用注释要格外小心
这些标签的内容由对应语言引擎解析，不是 HTML 引擎处理：
立即学习“前端免费学习笔记（深入）”；
-
<script>内 JS 注释用//或/* ... */，<!--是历史遗留写法（仅用于兼容极老 IE），现代环境已不推荐 -
<style>内必须用/* ... */，哪怕它嵌在 HTML 文件里 - 想在
<script>标签里“隐藏” JS 代码（如旧式写法<script><!-- ... --></script>）现在纯属冗余，还可能触发严格模式警告
跨语言模板（如 Vue/JSX）里注释行为更复杂，需按宿主语言规则走
Vue 单文件组件中：<!-- ... --> 是 HTML 模板注释，<script> 块里必须用 JS 注释，<style> 块里必须用 CSS 注释。JSX 中的 {/* ... */} 是 React 特殊语法，和 HTML/CSS 都无关。
常见翻车点：
- 在 Vue
<template>里写/* 注释 */→ 渲染为文本节点 - 在 SFC 的
<style scoped>里写<!-- 注释 -->→ CSS 解析失败，样式丢失 - 用 Prettier 自动格式化时，若配置错 parser，可能把 HTML 注释误转成 CSS 注释
本质就一条：注释语法永远绑定解析器，不是绑定文件后缀或标签名。
