<p>HTML注释必须用<!-- -->包裹，不可嵌套、不可在标签内或DOCTYPE前，JS/CSS中无效，服务端模板需注意剥离风险，调试时可能影响布局。</p>
HTML 注释怎么写才不会出错
HTML 注释必须用 <!-- --> 包裹，且不能嵌套、不能出现在标签内部、不能跨行到 DOCTYPE 前面——浏览器遇到非法位置的注释会直接忽略，甚至触发怪异模式。
-
<!-- 这是合法注释 -->，前后空格可选，但建议留一个避免紧贴内容 -
<!-- <p>这不行</p> -->是允许的（注释里可以写任意字符，包括标签），但别当真——它不会被解析为 HTML -
<div class="<!-- 错误 -->box">会破坏属性解析，导致 class 值截断或 JS 获取失败 - 注释不能写在
<!DOCTYPE html>之前，否则某些旧版 IE 会直接进入 Quirks 模式
JS 和 CSS 里混写 HTML 注释会怎样
HTML 注释语法在 <script> 或 <style> 标签内完全无效，纯属噪音。现代浏览器会把 <!-- 当作 JS/CSS 的普通字符串或语法错误处理。
-
<script><!-- console.log('hello'); --></script>：Chrome 会报Uncaught SyntaxError: Unexpected token '<' -
<style><!-- body { color: red; } --></style>：CSS 引擎根本认不出<!--，整段规则失效 - 想在 JS 里写注释，用
//或/* */；CSS 里只认/* */
服务器端模板里写 HTML 注释要注意什么
像 PHP、Django、Vue SFC 这类支持服务端渲染或编译的场景，<!-- --> 可能被提前剥离，也可能意外暴露——得看模板引擎配置和注释位置。
- PHP 中
<!-- <?php echo $data; ?> -->：如果 PHP 未执行（如文件被直读），<?php代码会原样输出，变成前端可见的明文 - Vue 单文件组件中，
<!-- <MyComponent /> -->在<template>内会被 Vue 编译器忽略，但若写在<script>区域外，可能被 HTML 解析器先吃掉 - Django 模板里
{# 这才是 Django 注释 #}才安全；<!-- -->会在服务端保留，最终发给浏览器
用注释调试时为什么页面突然乱了
最常见的原因是注释“撑开”了 DOM 结构——特别是用注释替代元素做占位或调试时，它仍属于文本节点，会参与排版（比如影响 display: flex 的对齐）。
立即学习“前端免费学习笔记（深入）”；
-
<div><!-- debug --><span>content</span></div>：这个注释节点在 Flex 容器里会占一个“项目”，可能把<span>挤偏 - 想临时隐藏元素，用
style="display:none"或hidden属性更可靠；注释只是删 DOM 节点，但代价是重排+重绘 - 审查元素时看到大量
#comment节点？大概率是某处模板循环或条件渲染漏掉了清理逻辑
注释不是胶带，粘哪儿都行；它是 HTML 解析器眼里明确的节点类型，位置和嵌套规则不守，轻则失效，重则改写渲染流。写之前先想清楚：这行字到底要给谁看——人？浏览器？还是构建工具？
