HTML 注释——如何在 HTML 中注释掉一行或标签

在本文中，你将学习如何向 HTML 文档添加单行和多行注释。

你还将了解为什么在编写 HTML 代码时注释被认为是一种很好的做法。

让我们开始吧！

HTML 注释标签

HTML 注释的一般语法如下所示：

<!-- I am a comment! -->

HTML 中的注释以  结尾。

不要忘记标签开头的感叹号！但是你不需要在结尾添加感叹号。

该标签包含要注释掉的任何文本或其他 HTML 标签。

什么时候使用 HTML 注释

HTML 注释不会显示在浏览器中。这意味着当文档在 Web 浏览器中呈现时，你添加到 HTML 源代码中的任何注释都不会显示。

话虽如此，请记住，任何人都可以通过转到 “View -> Developer -> View Source” 来查看几乎所有在互联网上发布的网站的源代码——这也包括所有注释！

因此，其他人可以看到你的注释，看看你是否将 HTML 文档设为公开并且他们选择查看源代码。

编写注释很有帮助，这是编写源代码时遵循的好习惯。注释可帮助你记录并与你自己（和其他人）交流你的代码和思维过程。它还可以提醒你，当你在几个月没有工作后回到项目时，你在想什么/在做什么。

注释还可以帮助你与与你一起处理该项目的其他开发人员进行交流。你的注释可以清楚地向他们解释你添加某些代码的原因。

如何在 HTML 中写单行注释

单行注释仅包含一行。如前所述，该行不会显示在浏览器中。

当你想解释和阐明其后面的代码背后的目的时，或者当你想像这样向自己添加提醒时，请使用单行注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Add the navbar here -->
    <h2>About me</h2>
    <p>I am learning to code with freeCodeCamp.</p>
    <p>I am going through each and every one of their awesome and super helpful  certifications. </p>
    <p>I am on my way to becoming a fullstack web developer!</p>
    <h3>Work Experience</h3>
</body>
</html>

当你想明确标记的结束位置时，单行注释也很有用。这在长而复杂的 HTML 文档中很有用，其中发生了很多事情，你可能会对结束标记的位置感到困惑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section class="contact">
    </section> <!--closing tag of contact section is here-->
</body>
</html>

如何在 HTML 中写行内注释

你还可以在句子或代码行中间添加注释。

只有  内的文本会被注释掉，标签内的其余文本不会受到影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I am <!--going to be--> a web developer</p>
</body>
</html>

如何在 HTML 中写多行注释

注释也可以包含多行，使用与你目前看到的完全相同的语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I am  a web developer</p>
    <!--This is going to be my portfolio.
    It will show off the projects that I'm most proud of.
    I could go on and on about what I want to add
    because I am writing a multi-line comment here-->
</body>
</html>

如何在 HTML 注释标签

那么如果你想在 HTML 中注释掉一个标签呢？

你将你选择的标签包裹在  中，如下所示：


!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>My portfolio page</h2>
    <h3>freeCodeCamp certification projects</h3>
    <!-- <section class="hero">
    </section>  -->
    <h2>About Me</h2>
</body>
</html>

注释掉标签有助于调试。

当某些事情没有按照预期的方式运行或没有按照你希望的方式运行时，开始逐个注释掉各个标签。这使你可以测试它们并查看是哪个导致了问题。

添加 HTML 注释的键盘快捷键

你可以使用一些快捷方式来添加注释——而且你可能会经常使用它们。Mac 用户的快捷方式是 Command /，Windows 和 Linux 用户的快捷方式是 Control /。

要添加单行注释，只需在代码编辑器中按住上面显示的组合键，然后你所在的整行都将被注释掉。请记住，由于所有内容都将在该行上注释掉，因此这只适用于单行注释。你需要手动添加行内注释。

要添加多行注释，请选择并突出显示要注释掉的所有文本或标签，然后按住前面显示的两个键。你选择的每一行现在都有一个注释。

总结

现在你已经知道了如何以及为什么在 HTML 中使用注释了！

在 freeCodeCamp 的 YouTube 频道观看以下视频，了解有关 HTML 的更多信息：

freeCodeCamp 还提供免费的、基于项目的响应式网页设计认证。

它是初学者的理想选择，并且假设学员没有任何先前知识。你将从绝对必要的基础开始，逐渐提升你的技能。最后，你将完成五个项目。

感谢你阅读本文，祝你学习愉快:)

原文：HTML Comment – How to Comment Out a Line or Tag in HTML，作者：Dionysia Lemonaki