HTML 注释：<!-- --> 注释语法

在编写 HTML 代码时，注释是一个不可或缺的工具。它可以帮助开发者记录思路、临时禁用代码、添加说明信息，让代码更易维护和协作。本篇文章将系统讲解 HTML 注释的语法规则、使用场景以及常见注意事项。

一、什么是 HTML 注释

HTML 注释是写在代码中但不会在浏览器中显示的文本内容。浏览器会忽略这些内容，只将其视为说明性文字。注释的主要作用包括：

1. 记录说明：解释某段代码的功能或设计意图
2. 临时禁用：暂时隐藏某段代码而不删除它
3. 协作沟通：为团队成员留下提示信息
4. 版本记录：标注修改历史或待办事项

二、基础语法

HTML 注释以 <!-- 开头，以 --> 结尾。注释内容放在这两个标记之间。

<!-- 这是一个注释，浏览器不会显示它 -->
<p>这是一段会在浏览器中显示的文本。</p>

语法要点：

1. <!-- 是注释的开始标记
2. --> 是注释的结束标记
3. 注释内容可以是一行，也可以是多行
4. 注释可以出现在 HTML 文档的任意位置：标签内、标签外、head 体内、body 体内

三、单行与多行注释

单行注释

当注释内容较短时，可以写在同一行内：

<!-- 设置页面标题 -->
<title>我的网站</title>

多行注释

当需要大段说明文字时，注释可以跨越多行：

<!-- 
  这是一个复杂的功能模块说明：
  1. 处理用户输入
  2. 验证数据格式
  3. 发送到服务器
  作者：张三
  日期：2024-01-15
-->
<div class="form-container">...</div>

注意事项：注释不能嵌套使用。如果在 <!-- 和 --> 之间再次出现 <!--，浏览器会将其视为注释结束，导致代码错乱。

<!-- 外层注释开始
  <!-- 内层注释（这是错误的写法）-->
这里是外层注释的内容 -->

四、常见使用场景

场景一：代码说明

<!-- 导航栏容器，包含logo和菜单链接 -->
<nav class="navbar">
  <!-- logo区域 -->
  <div class="logo">MyLogo</div>
  <!-- 主菜单 -->
  <ul class="menu">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

场景二：临时禁用代码

开发过程中经常需要临时隐藏某段代码来调试问题：

<div class="old-feature">
  <!-- <p>这个功能暂时隐藏，等下个版本发布</p> -->
  <!-- <button onclick="alert('.disabled')">点击我</button> -->
  <p>这里是替代内容</p>
</div>

场景三：TODO 待办标记

在代码中标注需要后续处理的事项：

<div class="user-profile">
  <img src="avatar.jpg" alt="用户头像">
  <h2>用户名</h2>

  <!-- TODO: 后续添加用户个人简介功能 -->
  <!-- FIXME: 这里的样式在移动端显示有问题，需要修复 -->
</div>

场景四：调试信息

有时需要添加临时的调试注释来追踪问题：

<form action="/submit" method="post">
  <!-- DEBUG: 检查表单数据提交 -->
  <input type="text" name="username" required>
  <input type="email" name="email" required>
</form>

五、条件注释（仅作了解）

条件注释是早期 IE 浏览器特有的语法，用于针对不同版本的 IE 加载特定代码。由于现代浏览器已不再需要，这种用法已逐渐淘汰，仅作了解即可：

<!--[if IE]>
  <p>您正在使用 Internet Explorer，部分功能可能不支持。</p>
<![endif]-->

六、重要注意事项

1. 注释不能嵌套

<!-- 第一层注释
  <!-- 第二层注释（错误）-->
第一层结束 -->

上面的代码会被浏览器解析为：第一层注释在"第二层注释（错误）"处结束，导致后续代码显示异常。

2. 注释中的横杠要注意

虽然技术上 -- 在注释中是允许的，但建议避免连续使用三个或更多横杠，以防与结束标记混淆：

<!-- 这是一个---测试注释 -->

3. 敏感信息不要放注释中

注释虽然不会在页面中显示，但通过"查看网页源代码"功能，任何人都能看到注释内容。因此不要在注释中放置密码、API 密钥或其他敏感信息：

<!-- 警告：不要在这里放密码：admin123 -->

4. 过度使用注释反而降低可读性

注释的目的是让代码更清晰，但过多的注释会增加文件体积，也可能造成维护负担。遵循"必要的注释"原则，让代码本身具有自解释性：

<!-- 好的示例：注释说明"为什么"而不是"是什么" -->
<!-- 由于浏览器兼容性问题，使用这个Hack方案 -->
.selector { ... }

<!-- 不推荐的示例：重复显而易见的信息 -->
<p class="title">标题文字</p> <!-- 这是一个标题 -->

七、与 JavaScript/CSS 注释的区别

HTML 注释只能用于 HTML 文件中。如果需要在 <script> 或 <style> 标签内添加注释，应使用对应语言的注释语法：

<!-- HTML 注释 -->
<script>
  // JavaScript 单行注释
  /* JavaScript 多行注释 */
  console.log('Hello');
</script>

<style>
  /* CSS 注释 */
  .container {
    /* color: red; */  /* 临时禁用这行样式 */
  }
</style>

八、实践建议

1. 养成写注释的习惯：在复杂逻辑、关键决策点、重要业务规则处添加注释
2. 保持注释与代码同步：修改代码后，及时更新相关注释
3. 使用统一格式：团队协作时，约定注释的格式规范
4. 善用 TODO 和 FIXME：用特殊标记标注待办和有问题的地方，便于后续查找
5. 定期清理注释：版本发布前，检查并清理临时的调试注释