HTML 多行注释

2024年8月28日 | 阅读 4 分钟

HTML 中的注释标签

HTML 注释通常应按以下方式编写

I am a remark! <!-- .->
HTML comments begin with <!-- and finish with -->.

请记住在标签开头包含感叹号！但是，你可以在末尾省略它。

该标签包围你希望注释掉的任何文本或 HTML 标签。

何时在 HTML 中使用注释

浏览器不显示 HTML 注释。这意味着当页面在网络浏览器中生成时，你对 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>Doc</title>
</head>
<body>
    <!-- Add the navbar here -->
    <h2>About you</h2>
    <p>I am learning to code with JavaTpoint.</p>
    <p>I am going through every topic in JavaTpoint.</p>
    <p>I am heading to becoming a full-stack web developer! using jtp</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>Doc</title>
</head>
<body>
    <section class="cont">
    </section> <!--closing tag of cont 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>Doc</title>
</head>
<body>
    <p>I am <!--going to be--> a content writer</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>Doc</title>
</head>
<body>
    <p>I am  a content writer</p>
    <!--This is going to be my portfolio.
    It will highlight the accomplishments of which I am most proud. Because I am Posting a multi-line remark here, I could go on and on about what I want to contribute.
</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>Doc</title>
</head>
<body>
    <h2>My portfolio page</h2>
    <h3>my projects</h3>
    <!-- <section class="h">
    </section>  -->
    <h2>Me</h2>
</body>
</html>

从注释中移除标签有助于调试。

如果某个功能没有按预期工作，或者没有达到你的期望，请一次注释掉特定的标签。这使你能够测试它们并找出问题所在。

添加 HTML 注释的键盘快捷键

你可以使用快捷键进行注释，并且很可能会发现自己经常使用它们。对于 Mac 用户，快捷键是 Command /；对于 Windows 和 Linux 用户，它是 Control /。

HTML

<ul class="1">
  <li class="nt">A</li>
  <li>B</li>
  <li class="nt">C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li class="nt">G</li>
  <li>H</li>
  <li>I</li>
  <li class="nt">J</li>
</ul>
<ul class="2">
  <li class="nt">A</li>
  <li>B</li>
  <li class="nt">C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li class="nt">G</li>
  <li>H</li>
  <li>I</li>

CSS

ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

你可以将其用于单行注释

    <!-- This is a single line comment -->
    <section class="a" id="a">
      <h3>cric</h3>
      <p>
        Our primary objective is to bring live cricket matches to fans all around
        the world
      </p>
      <h3> It's not About winning! Its about country</h3>
      <p>
We also air documentaries specially made for the greats, lifestyle of boxers, news, and more.
      </p>
    </sec>

你也可以将其用于多行注释

    <section class="a" id="a">
      <h3>cric</h3>
      <p>
        Our primary objective is to bring live cricket matches to fans all around
        the world
      </p>
      <!-- This is a 
        multi-line 
        comment -->
      <h3> It's not About winning. It's about the country!</h3>
      <p>
        We also air documentaries specially made for the greats, the lifestyle of
        cricketers, news, and more.
      </p>
    </section>

如果它不在标签内，你也可以将注释插入到任何你想要的位置

    <section class="a" id="a">
      <h3>Watch the show</h3>
      <p>
        Our primary objective is to bring live shows to fans all around
        the world
      </p>
      <h3>Its not About the magical shows</h3>
      <p>
        We also air
        <!-- This is a comment within some text -->
        documentaries specially made for the greats, lifestyle of magicians, news,
        and more.
      </p>
    </section>
// And there you have it ? now you can comment your HTML code correctly and safely.

下一主题网页设计中的微交互

HTML 多行注释

HTML 中的注释标签

何时在 HTML 中使用注释

如何编写 HTML 单行注释

如何编写 HTML 内联注释

如何在 HTML 中编写多行注释

如何在 HTML 中注释掉标签

添加 HTML 注释的键盘快捷键

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 多行注释

HTML 中的注释标签

何时在 HTML 中使用注释

如何编写 HTML 单行注释

如何编写 HTML 内联注释

如何在 HTML 中编写多行注释

如何在 HTML 中注释掉标签

添加 HTML 注释的键盘快捷键

相关帖子

HTML 中的根元素

HTML 超链接

如何运行 HTML 程序

Web 3 将如何改变我们的生活

HTML 中的 &nbsp

如何使用 HTML 和 CSS 创建电子邮件通讯

HTML 工具提示

如何调用 HTML 中的 JavaScript 函数

HTML CSS 中的自动图片滑块

HTML 文档结构

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器