HTML 注释

HTML 注释用于在代码中添加说明文字，不会被浏览器解析和显示，是仅作为开发者参考的信息

语法

<!-- 这里是注释内容 -->

以  结尾，中间为注释内容（可换行）
注释内容可以包含任意字符（除 --> 外，避免提前结束注释）

作用

仅作为演示，实际操作中需自行判断需要添加注释的地方

解释代码功能

用于说明某段代码的用途、逻辑或设计思路，方便后期维护或团队协作。

<!-- 顶部导航栏：包含logo、主导航菜单 -->  
<header>  
  <img src="logo.png" alt="网站logo">  
  <!-- 主导航：首页/教程/关于 -->  
  <nav>  
    <ul>  
      <li><a href="/">首页</a></li>  
      <li><a href="/tutorial">教程</a></li>  
      <li><a href="/about">关于</a></li>  
    </ul>  
  </nav>  
</header>

临时隐藏代码

开发中需要暂时移除某段代码但不想删除时，可用注释 “包裹” 代码，使其不生效。

<body>  
  <h1>HTML 注释教程</h1>  

  <!-- 临时隐藏这段广告代码，后续可能恢复 -->  
  <!--  
  <div class="ad">  
    <p>点击领取优惠 →</p>  
  </div>  
  -->  

  <p>注释不会影响页面渲染...</p>  
</body>

标记代码块边界

在复杂页面中，用注释标记不同模块的开始和结束，快速定位代码位置。

<!-- 开始：用户信息模块 -->  
<section class="user-info">  
  <img src="avatar.jpg" alt="用户头像">  
  <h3>用户名</h3>  
  <p>注册时间：2023-01-01</p>  
</section>  
<!-- 结束：用户信息模块 -->  

<!-- 开始：文章列表模块 -->  
<div class="article-list">  
  <!-- 文章1 -->  
  <article>...</article>  
  <!-- 文章2 -->  
  <article>...</article>  
</div>  
<!-- 结束：文章列表模块 -->

隐藏模板中的备用代码

在前端模板（如静态页面模板）中，保留备用样式或结构，方便后续调整

<!-- 备用按钮样式：如需红色按钮，可替换下方class -->  
<!-- <button class="btn btn-red">提交</button> -->  
<button class="btn btn-blue">提交</button>

标记待办事项

用注释记录未完成的功能或需要优化的代码，避免遗漏。

<footer>  
  <p>© 2024 网站名称</p>  
  <!-- TODO：添加备案号和联系方式 -->  
  <!-- TODO：优化移动端显示效果 -->  
</footer>

解释复杂逻辑

对逻辑较复杂的代码（如表单规则、条件判断），用注释说明设计思路。

<form>  
  <!-- 密码规则：至少8位，包含数字和字母 -->  
  <input type="password" pattern="^(?=.*[A-Za-z])(?=.*\d).{8,}$">  
  <button type="submit">注册</button>  
</form>

限制与注意事项

不能嵌套注释

HTML 注释不支持嵌套，内层的 --> 会被误认为是外层注释的结束符，导致代码错误。

错误示例：

<!-- 外层注释  
  <!-- 内层注释：这会导致外层注释提前结束 -->  
  <p>这段代码会被错误解析</p>  
-->

正确做法：分开注释或调整逻辑

<!-- 外层注释 -->  
<!-- 内层注释：单独写 -->  
<p>正确解析的代码</p>

敏感信息不要写在注释中

注释会被用户通过 “查看网页源代码” 直接看到，避免包含密码、API 密钥等敏感内容。

最后更新于5个月前