如何编写HTML中的注释代码？

本文共计902个文字，预计阅读时间需要4分钟。

HTML 注释不会在浏览器中渲染，也不会影响页面结构或脚本执行，但格式错误会导致注释失效，甚至可能引发内容外露或解析异常。

HTML 注释的标准写法

必须用 <!-- 开头、--> 结尾，中间不能出现 -- 或 >，否则注释提前终止。

正确示例：

<!-- 这是一个合法的 HTML 注释 --> <!-- <p>标签会被当作纯文本，不会被解析 -->

错误示例（会导致后续 HTML 被注释掉或解析报错）：

立即学习“前端免费学习笔记（深入）”；

<!-- 多个--会出问题 --> <!-- 注释里写了 > 符号 --> <!-- <div class="wrapper"> -->

• -- 在注释体内连续出现两次（如 --> 之前还有 --），浏览器会认为注释已结束，后面内容恢复解析
• > 单独出现在注释中不违法，但若紧挨着 --（如 -->），就会被识别为结束符
• 注释不能嵌套：<!-- <!-- 内层注释 --> --> 是无效的，外层注释在第一个 --> 就结束了

在 script 或 style 标签里混用 HTML 注释

老式写法（如为了兼容 IE5/6）会在 <script> 里套 <!-- 和 -->，现代浏览器已不需要，且容易出问题。

比如这样写：

<script> <!-- console.log("hello"); // --> </script>

实际效果是：浏览器把 <!-- 当作 HTML 注释开始，直到遇到 --> 才结束——而这个 --> 出现在 JS 字符串或注释里，会导致整个 <script> 标签体被当作文本跳过。

• 现代项目应直接写 JS，无需包裹 HTML 注释
• 如果必须兼容极老环境，确保 --> 独立成行、不在 JS 字符串或正则中出现
• <style> 同理，CSS 里写 <!-- 不会被识别为注释，反而可能触发怪异模式

注释被意外“激活”的常见场景

编辑器自动补全、复制粘贴、模板引擎拼接都可能悄悄破坏注释结构。

• 从 Word 或网页复制文字进 HTML，可能带不可见 Unicode 字符（如零宽空格），导致 <!-- 匹配失败
• 构建工具（如 Webpack + html-webpack-plugin）对注释做压缩时，若配置不当，可能删掉本该保留的条件注释（如 <!--[if IE]>...<![endif]-->）
• 服务端模板（如 EJS、Jinja）里误把 <!-- 放在逻辑块内，结果生成了未闭合的注释，影响后续 DOM 解析

检查方法：用浏览器开发者工具的 Elements 面板看源码，确认注释是否完整高亮；或者用 document.createComment() 动态插入来验证解析行为。

最稳妥的做法是：只用标准格式，避免复杂嵌套和跨行特殊符号，别依赖注释实现功能逻辑——它只是给人看的，不是给机器执行的。