html注释必须用包裹，不可嵌套、不可在标签属性内、不可跨行错位；-->前不能有空格或缺字符，否则注释不闭合；js/css中应使用原生注释而非html注释。
HTML 注释怎么写才不会出错
HTML 注释必须用 <!-- --> 包裹，且不能嵌套、不能出现在标签内部、不能跨行写错位置。浏览器会直接忽略其中所有内容，但写法不对会导致解析异常或意外渲染。
-
<!-- 这是合法注释 -->—— 空格可选，但前后破折号必须各有两个 <!--多行<br>注释-->
—— 允许换行，但不能写成<!--<div>-->（标签未闭合）- 禁止嵌套：
<!-- <!-- 内层 --> 外层 -->会让浏览器从第一个<!--一直吃到下一个-->，中间所有内容全被当注释 - 不能放在标签属性里：
<div title="<!-- 错 -->"> 是无效语法，部分浏览器会截断或报错<h3>为什么 <code><!--后面加空格有时会“失效”其实不是失效，而是注释起始标记对空格不敏感，但人容易误判边界。真正影响的是注释结束标记
-->前是否紧贴内容。-
<!-- hello -->✅ 正常 -
<!-- hello- ->❌ 中间多了一个空格，- ->不被识别为结束符，注释持续到文档末尾 <!--hello-->✅ 允许无空格（但可读性差，不建议）- 常见误写：
<!-- 某段代码 -- >——-- >少了连字符，变成-- >，不是合法结束符
在 JS 或 CSS 块里还能用
<!-- -->注释吗 -
能用，但只是“恰好没报错”，并不推荐。这是历史遗留行为，现代写法应改用语言原生注释。
-
<script><!-- console.log(1); --></script>—— 浏览器会忽略整块，但 JS 引擎根本没机会执行；若换成<script>// console.log(1);</script>更清晰可靠 -
<style><!-- body { color: red; } --></style>—— 同样可行，但 CSS 解析器不认<!--，实际靠 HTML 解析器提前剥离，一旦写错位置（比如漏了-->），整个<style></style>可能失效 - ES6+ 模块或外部
.js文件中，<!--完全无效，会当作非法字符报错
注释太多会影响页面性能吗
不影响渲染或执行，但会增加 HTML 体积和网络传输量，尤其在构建工具未自动清除时。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段注释无害，上线前建议用构建工具（如 Webpack 的
html-webpack-plugin配合minify.removeComments）自动剔除 - 避免在循环生成的模板中写重复注释，比如 Vue/React 组件里用
v-for渲染 100 个项，每个都加<!-- item -->，HTML 体积会明显增大 - 服务端渲染（SSR）场景下，注释随 HTML 一起下发，首屏加载字节数增加，可能轻微拖慢 TTFB 和解析速度
注释本身简单，但写在标签边缘、混进脚本块、或者依赖它做逻辑开关（比如用注释临时禁用某段 DOM）——这些才是最容易翻车的地方。
