HTML注释不能嵌套，否则会导致解析中断；应使用编辑器批量注释、结构化语义标记、构建时自动移除，并优先采用模板引擎原生注释语法。
HTML 注释不能嵌套，但可以多行写
HTML 的 <!-- --> 注释不支持嵌套，嵌套会导致解析中断、后续内容被意外注释掉。大型项目里常有人想用注释块“临时屏蔽”一段含注释的代码，结果页面白屏或布局错乱——本质是浏览器遇到第一个 --> 就结束注释，后面全乱套。
正确做法是：用编辑器批量注释（如 VS Code 的 Ctrl+/），而非手动加 <!-- 和 -->；若必须手写，确保每段注释独立、无嵌套，且换行对齐便于扫描：
<!-- Header section: includes logo, nav, and mobile toggle --> <header class="site-header"> <!-- Logo is loaded as inline SVG for crisp scaling --> <svg class="logo" viewBox="0 0 100 100"></svg> </header>
结构化注释要带语义标记，别只写“这里开始XXX”
大型模板里光写 <!-- start header --> 没用。团队协作时没人知道“header”指哪个层级，也不清楚是否包含辅助导航或 BEM 命名空间。注释得带上下文和约定标识。
- 统一前缀，比如
<!-- @section: header -->、<!-- @component: card-list --> - 关键区块加简短目的说明，例如
<!-- @section: main-content — uses CSS container query for responsive grid --> - 避免模糊词：“这里”“上面”“下面”——换成具体元素 ID 或 class 名，如
<!-- @depends-on: #user-preferences-api -->
构建时自动剥离注释，别靠人肉清理
开发阶段保留注释没问题，但生产环境 HTML 里塞满注释会拖慢首屏解析、暴露内部结构、增大传输体积。手动删既不可靠也易遗漏。
立即学习“前端免费学习笔记（深入）”；
推荐在构建流程中处理：
- Webpack +
html-webpack-plugin：配minify: { removeComments: true } - Vite：默认启用
build.minify = 'terser'，配合vite-plugin-html可定制注释过滤规则 - 纯静态场景：用
html-minifier-terserCLI，加参数--remove-comments
注意：某些注释需保留（如 IE 条件注释已淘汰，但遗留系统可能依赖 <!--[if IE]>），这类要加白名单逻辑，不能一刀切。
模板引擎里的注释语法比原生 HTML 更安全
如果项目用的是 handlebars、twig 或 Vue SFC，优先用它们的原生注释语法，而非混用 <!-- -->。
-
handlebars：用{{! This won't render at all }}，服务端渲染时直接忽略，不进输出流 -
Vue单文件组件：在<template>里用<!-- ... -->安全，但逻辑部分用//或/* */更稳 -
PHP/Twig：用{# this is a Twig comment #}，完全不输出到 HTML
混用容易出问题：比如在 handlebars 模板里写 <!-- {{> partial}} -->，结果注释没生效，反而把 partial 渲染出来又藏掉，调试时极难定位。
实际维护一个 20+ 页面的 HTML 模板库时，最常被忽略的是注释的生命周期管理——谁负责加、谁审核、何时删、删哪些。没有自动化和约定，再规范的写法也会在三个月后变成注释垃圾场。
