HTML 注释

2025年9月6日 | 阅读 4 分钟

HTML 注释是代码中包含的无显示文本部分。它们是为了方便开发人员、协作者,甚至是您在将来检查代码时自己使用。注释阐明了一段代码的意图和结构,记录了编写该代码的人的设计选择,并在调试时证明很有用。

放置在 HTML 注释标签(<!-- 和 -->)之间的文本会被浏览器忽略,因此注释不会对页面如何显示或对最终用户产生任何影响。

为什么要使用 HTML 注释?

  • 可读性 - 复杂的 HTML 页面很容易很快迷失方向。注释有助于提高可读性。
  • 协作 - 多个开发人员共同参与一个项目,注释是代码中的沟通渠道。
  • 文档 - 文档可以用来阐明某些部分背后的原因,使维护变得轻而易举。
  • 调试 - 开发人员可以在不删除代码的情况下动态禁用代码,这在调试布局或功能时特别方便。

如何在 HTML 中添加注释?

您可以使用 <! -- ... --> 标签在您的 HTML 文件中添加注释。如果您在这些注释标签之间编写任何内容,它将被视为注释,并且浏览器不会读取它。

语法

<! 和 -- 之间不应有额外的空格,并且注释必须以 --> 结束。

正确

不正确

注意:注释掉的代码在 网页中是不可见的,因此您可以将注释标签用于文档和调试目的,如下所示

  1. <!-- <p>这里有一些文本</p>
  2. <p>这里是第二段文本</p> -->

示例

多行注释

在 HTML 代码中,我们还可以一次注释多行。在多行注释中,我们可以使用任何关于代码的描述或多行代码进行调试等。

语法

示例

输出

HTML Comments

使用注释进行调试

HTML 注释最常见的应用之一是调试。注释掉调试通常被希望在没有特定代码段的情况下测试页面的开发人员使用。

示例

这使得开发人员可以在不永久丢失代码的情况下禁用代码。

编写注释的最佳实践

1. 保持清晰

注释应该解释代码以某种方式编写的原因,而不是简单地重述显而易见的事实。

2. 使用注释来组织结构

在长文档中,分隔不同的部分以便于导航。

3. 不要过度使用注释

过多的注释会使文件难以阅读。

4. 保持注释更新

过时的注释可能会比完全没有注释更让开发人员感到困惑。

注释和 SEO

HTML 注释会被浏览器忽略,但它们仍然在页面源代码中可见。这意味着

  • 注释无助于 SEO,因为它们通常会被搜索引擎忽略。
  • 敏感信息(例如您的密码、API 密钥或任何其他内部笔记)绝不能留在注释中,因为任何人都可以在“查看源代码”中看到它们。

应做的事情示例

<!-- 临时修复:API 密钥 = 12345-ABCDE -->

注释与其他语言

语言注释风格
CSS使用 /* ... */ 而不是 <!-- ... -->。
JavaScript单行使用 //,多行使用 /* ... */。
HTML始终使用 <!-- ... -->。

结合 HTML 和 CSS 注释的示例

结论

人们常说 HTML 注释并不复杂,但它们在可读性、可维护性和协作方面为开发代码提供了重要的作用。注释使开发软件能够通知其他人他们正在进行的工作、突出显示文档的某些部分或在不删除代码的情况下注释掉代码。

在所有这些情况下,注释都能提高个人任务和团队工作的效率。它们可能不会决定页面的呈现方式,但它们提供的上下文有助于项目的未来发展,尤其是在重新访问或调试时。


下一个主题HTML 文件路径