html模板中只该用注释，其他语法会导致显示异常或解析错误；注释需说明“为什么”和注意事项，位置须与代码同缩进且换行紧贴，禁用内联注释，并通过ci校验过期关键词。
HTML模板里该用哪种注释写法
HTML模板中只该用 <!-- --> 这一种注释语法，其他如 // 或 /* */ 在 HTML 文本节点里不会被解析，反而可能暴露在页面上或引发解析错误。
常见错误现象：有人把 JavaScript 注释习惯带进 HTML 模板，在 <script></script> 外写 // header section，结果这段文字直接显示在网页顶部；或者在 <style></style> 块外用 /* reset */，导致样式失效。
-
<!-- header start -->是唯一安全、跨浏览器兼容的写法 - 避免嵌套注释：
<!-- <!-- nested --> -->会提前终止，浏览器只认第一个--> - 不要在
<script></script>或<style></style>标签内部用 HTML 注释——那里应分别用//或/* */
团队协作时注释要写哪些信息
模板注释不是写给自己看的，是写给下一个修改它的人看的。重点不是“这里是什么”，而是“为什么这么写”和“改这里要注意什么”。
比如 <!-- sidebar: only shown on desktop, hidden via .sidebar-mobile-only class --> 就比 <!-- sidebar --> 有用得多。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 标明依赖项：
<!-- requires data-user-id attr on <body> --> - 标注条件逻辑：
<!-- rendered only if user.hasSubscription === true --> - 提示样式边界：
<!-- this div must stay outside .container for full-width bg --> - 禁止随意删改的区域加警告：
<!-- DO NOT REMOVE: tracking pixel wrapper -->
注释位置和缩进怎么保持统一
注释必须和它所描述的代码块处于同一缩进层级，且紧贴上方（非内联）。否则 Prettier 或团队格式化工具一跑，注释就飘到错位位置，失去上下文。
错误示例：<div class="card">
<!-- card wrapper --> —— 这属于内联注释，难维护、易错位、无法被大多数 lint 工具识别。<ul>
<li>正确写法是换行+对齐：<pre class="brush:php;toolbar:false;"><!-- card wrapper --><br><div class="card">
<br> <p>content</p>
<br>
</div></pre>
</li>
<li>所有注释前不加空格，后不加空格：<code><!-- foo --> ✅，<!-- foo --> ❌
自动化检查注释是否遗漏或过期
靠人眼检查注释有效性不可靠。建议在 CI 流程中加一条简单校验：扫描所有
