HTML 注释：语法、多行注释与快捷键

如何在 HTML 中写注释

HTML 注释以 <!-- 开头，以 --> 结尾。浏览器会忽略两个标记之间的所有内容，所以这些文字永远不会出现在页面上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

页面上只显示标题和段落。HTML 只有一种注释语法，单行和多行都用它。

VS Code 和大多数编辑器中的快捷键：选中几行，按 Ctrl + /（Mac 上按 Cmd + /）。编辑器会替你加上标记，再按一次同样的键就会去掉它们。

注释掉代码

浏览器会忽略注释中的标签，所以用 <!-- 和 --> 包住一段标记，就能隐藏它而不必删除。想看看页面少了某个元素会怎样，这是最快的办法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

删掉横幅那一行的 <!-- 和 -->，它就会重新出现。被注释掉的代码仍然会随页面一起下载，所以一旦确定不再需要，就把它删掉。

注释不能嵌套

第一个 --> 总会关闭注释。如果你要注释掉的代码里已经有注释，外层注释就会提前结束，剩下的内容会漏到页面上。下面的示例把嵌套注释交给浏览器的解析器，并显示最终可见的内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> 被当作文字显示出来。在注释掉一大段代码之前，先删掉其中的注释（或者改掉它们的 -->，让它不再匹配）。

还有几条规则：注释不能以 <!--> 开头（那是一个空注释，后面的内容会显示出来），而且 --!> 和 --> 一样会关闭注释，所以注释文字中两者都不要出现。

注释是公开的

注释是服务器发送的 HTML 的一部分，所以每个访问者都能通过查看源代码或开发者工具读到它们。脚本也能把它们列出来：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

注释只用来写关于代码的说明。任何私密内容（密码、API 密钥、内部 URL、客户数据）都绝不能出现在 HTML 中，无论是否被注释。构建工具和压缩工具通常会从生产环境的 HTML 中去掉注释，这样还能省下几个字节。

CSS 和 JavaScript 中的注释

HTML 注释只在 HTML 中有效。在 <style> 和 <script> 中，要用对应语言自己的注释语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

标题变成了蓝色：CSS 会忽略 <!-- 和 --> 这两个标记本身，照样应用它们之间的规则。只有 /* ... */ 才能禁用 CSS。这种语法详见 CSS 注释。

条件注释

旧代码里有时会出现 <!--[if IE]> ... <![endif]-->。这是给 Internet Explorer 9 及更早版本的指令。所有现代浏览器都把它们当作普通注释，里面的内容会被忽略，整段都可以删掉。

常见错误

• 嵌套注释。 内层的 --> 会结束外层注释。注释掉一段代码之前，先删掉里面的注释。
• 在注释里放机密信息。 注释会发送给每个访问者。
• 漏写 -->。 <!-- 之后直到文件末尾的所有内容都会消失，看起来就像半个页面不见了。
• 在 CSS 中用 <!-- -->。 它不会禁用规则。请用 /* */。
• 在 HTML 中用 //。 // note 会被当作文字显示。HTML 只认 <!-- -->。