<p>HTML5注释语法为<!-- ... -->，须成对包裹完整节点树，不可嵌套；TEST:前缀便于搜索，但JS/CSS内无效；上线前应移除测试注释。</p>
HTML5里怎么写注释
HTML5注释语法和HTML4完全一致，没有新增格式。所有浏览器都只认 <!-- ... --> 这一种标准写法，其他如 //、/* */ 或 # 都不会被解析为注释，反而可能暴露在页面上或引发解析错误。
用注释标记待测试的代码段
想临时隔离某段HTML做功能验证，最稳妥的方式是用标准注释包裹整块结构，确保它不参与DOM构建、不触发资源加载、也不影响CSS/JS执行流。
<!-- TEST: 登录表单响应式适配待验证 --> <form id="login-form"> <input type="text" name="user"> <button type="submit">登录</button> </form> <!-- END TEST -->
- 注释内容中加
TEST:前缀便于全局搜索（比如 VS Code 里搜TEST:） - 避免只注释开标签或闭标签，必须成对包裹完整节点树，否则可能导致DOM结构意外截断
- 不要在注释内嵌套注释——
<!-- <!-- inner --> -->是非法的，浏览器会提前结束外层注释
别把注释当开关用：JS/CSS里的常见误用
HTML注释对内联脚本或样式无效。下面这些写法不会生效：
<script>
// <!-- alert('test'); -->
</script><style>
/* <!-- .btn { color: red; } --> */
</style>-
<!--在 JS 字符串或 CSS 注释中只是普通文本，不会触发注释行为 - 若想临时禁用某段JS逻辑，必须用
if (false) { ... }或直接删/注释掉 JS 行级注释（//或/* */） - 同理，CSS 中要用
/* ... */，不能依赖 HTML 注释
自动化工具能识别的测试标记惯例
有些前端测试工具（如 Cypress、Playwright 的 selector 扫描）支持通过注释定位测试区域，但需约定格式。推荐以下轻量写法：
立即学习“前端免费学习笔记（深入）”；
<!-- cypress-test: checkout-flow-start --> <div class="checkout-step" data-step="1">...</div> <!-- cypress-test: checkout-flow-end -->
- 用
cypress-test:、test-id:等前缀提高可检索性，避免和业务注释混淆 - 保持前后标记一一对应，方便脚本做区间提取
- 上线前建议用构建脚本自动移除含
test、TEST、dev-only的注释块——HTML 注释虽不执行，但会增大传输体积，也可能泄露内部逻辑
注释本身不参与运行，但标记位置一旦错位，就可能让本该测试的代码被跳过，或者让不该测的部分混进测试范围。动手前先确认注释起止点是否真正包住了目标节点。
