10. HTML 注释

注释是给开发者看的，浏览器会忽略它，不会渲染到页面上。

语法

<!-- 这是注释 -->
<p>这是正文，用户能看到</p>

注释以 <!-- 开始，以 --> 结束。

写注释的目的

解释代码意图

<!-- 主导航开始，全站统一 -->
<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
</nav>
<!-- 主导航结束 -->

临时禁用代码

调试时，可以用注释”关掉”某段代码，而不是直接删掉：

<p>这段正常显示</p>
<!--
<p>这段被注释掉了，不显示</p>
-->
<p>这段也正常显示</p>

标记待办事项

<!-- TODO: 添加搜索功能 -->
<!-- FIXME: 这个样式在 Safari 下有兼容问题 -->

注释里不能嵌套

<!-- 外层注释
  <!-- 内层注释 -->
  这里的"--> "会提前关闭外层注释
-->

HTML 注释不支持嵌套，写了会出问题。

多行注释

<!--
  这是多行注释
  可以写好几行
  浏览器全部忽略
-->

每一行都要手动写 -- 会很麻烦，但大多数编辑器有快捷键（通常是 Ctrl+/ 或 Cmd+/）自动添加注释。

注释不会完全”消失”

虽然浏览器不渲染注释，但用户查看网页源代码时能看到。所以：

什么时候写注释

• 代码意图不明显时
• 复杂结构的分隔标记
• 暂时禁用某段代码
• 团队协作时留下说明

什么时候不该写注释

<!-- 不好的注释：说了等于没说 -->
<p>这是一段文字</p> <!-- 这是一段文字 -->

<!-- 不好的注释：和代码不同步 -->
<!-- 链接指向首页 -->
<a href="/contact">联系我们</a>

注释要保持最新。过时的注释比没注释更误导人。

小结

• 注释语法：<!-- 内容 -->
• 浏览器不渲染，但用户能查看源码
• 不要写敏感信息
• 注释要简洁、准确、保持最新
• 临时禁用代码的好帮手

下一节，我们讲 HTML 代码规范。