<p>HTML注释仅用于标记HTML结构，必须用<!-- -->，禁止嵌套、禁用在DOCTYPE前、禁塞JS/CSS代码；应配合语义化标签使用，避免替代模块边界。</p>
HTML注释必须用 <!-- -->，别往 <script></script> 里塞
很多老项目还留着 <script><!-- alert(1); --></script> 这种写法，现代浏览器根本不需要——它不会执行，还可能让解析器误判注释边界，导致后续 HTML 被当成纯文本渲染，甚至白屏。JS 该用 // 或 /* */，CSS 该用 /* */，HTML 注释只管 HTML 结构。
常见错误现象：<div title="<!-- bad -->foo"> 会提前终止属性解析；<!-- <!-- inner --> --> 是非法嵌套，部分解析器直接截断到第一个 -->；<!DOCTYPE html> 前加注释会触发怪异模式。
- 临时屏蔽整块 HTML？用
<!-- header:start -->和<!-- /header -->包裹整个标签块，安全 - 想注释掉某一行 JS？别用 HTML 注释，进 JS 文件里写
// initHeroBanner() - 构建时要删注释？Vite 配
htmlMinifyOptions.removeComments: true，Webpack 在html-webpack-plugin的minify里设removeComments: true
模块起止注释要成对、带斜杠、有缩进
单写 <!-- HEADER --> 容易漏掉闭合，尤其在嵌套区域（比如 header 里还有 nav）。推荐统一用 <!-- HEADER --> + <!-- /HEADER --> 模式，结尾加 / 类似标签闭合逻辑，视觉上立刻能配对。
复杂模块建议缩进：外层 <!-- LAYOUT -->，里面 <!-- HEADER -->、 <!-- MAIN -->、 <!-- /MAIN -->、<!-- /LAYOUT -->。这样 Ctrl+F 查 /MAIN 就能准确定位结束位置，不用靠肉眼数缩进或猜深度。
立即学习“前端免费学习笔记（深入）”；
- 命名全部大写 + 连字符，如
<!-- HERO-SECTION -->、<!-- PRODUCT-CARD-LIST -->，避免驼峰或小写造成团队风格混乱 - 不要写
<!-- 这里是页头 -->这类模糊描述，也不要用“上面”“下面”这种相对词——滚动后就失效 - 注释前后保留一个空格：
<!-- HEADER -->✅，<!--HEADER-->❌，可读性差一截
注释只是地图，不是结构；真边界得靠语义化标签
见过太多项目注释写得工整漂亮，结果所有逻辑耦合在全局 initHeroBanner() 函数里，样式靠 .hero-banner img 层层穿透，改一个图标要翻三页 CSS。这时候注释再规范，也只是掩盖结构腐化的止痛药。
模块边界应由标签嵌套体现：<section class="hero-banner"></section> 比 <!-- - hero-banner --> + <div> 更真实。注释不创建作用域、不隔离样式、不约束 JS 作用域——它只是地图上的图例，不是路。
-
<section>必须配<h2>–<h6>才生效，没标题的<section>DOM 存在但语义等于空转 -
<main>整个页面只能出现一次，且必须与文档主内容存在逻辑关联，不能随便把“相关推荐”塞进去 - 纯布局容器（如下拉菜单、图标列表）仍可用
<div>，加 BEM 类名更清晰，别硬套<section>
注释里别写业务逻辑，这类信息属于 JS 或文档
像 <!-- 此处调用 API 获取 banner 数据 --> 这种注释，看似有用，实则埋雷：API 地址变了、参数改了、错误处理加了，但注释没人同步更新，反而误导后来人。HTML 只管结构归属，不该承担逻辑说明职责。
真正该写在注释里的，只有两件事：一是区块功能定位（<!-- FOOTER: 版权 + 备案号 + 底部导航 -->），二是临时调试标记（<!-- DEBUG: 临时禁用 lazyload, 2026-07-28 -->），且上线前必须清理。
- 团队统一格式即可，不必追求
<!--! （发布时间是2026年7月21日）-->这种过度设计 - 构建流程中未清理的调试注释，可能泄露内部路径、接口意图或临时开关逻辑
- 注释写得越“聪明”，越容易过期；写得越“老实”，越耐维护
