无涯教程-HTML - 注释注释是一段代码，任何网络浏览器都将忽略它，最好在HTML代码中添加注释，尤其是在复杂的文档

注释是一段代码，任何网络浏览器都将忽略它，最好在HTML代码中添加注释，尤其是在复杂的文档中，以指示文档的各个部分的主要内容。注释可帮助您和其他人理解您的代码并提高代码的可读性。

HTML注释位于<!-...->标签之间。因此，任何带有<!-...->标签的内容都将被视为注释，并且将被浏览器完全忽略。

<!DOCTYPE html>
<html>
<head>  <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

这将产生以下输出，而不会显示作为注释一部分给出的内容-

有效与无效注释

注释不会嵌套，这意味着不能将注释放入另一个注释中。其次，双破折号序列“-”可能不会出现在注释中，除非作为结束->标签的一部分。您还必须确保在开始注释字符串中没有空格。

在此，给定的注释是有效的注释，将被浏览器擦除。

<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!--   This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

这将产生以下输出-

但是，下一行不是有效的注释，将由浏览器显示。这是因为在左尖括号和感叹号之间有一个空格。

<!DOCTYPE html>
<html>
<head>

<title>Invalid Comment Example</title>
</head>
<body>
< !--   This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

这将产生以下输出-

多行注释

到目前为止，无涯教程已经看到了单行注释，但是HTML也支持多行注释。

您可以用特殊的开始标签<!-和结束标签->注释多行，如下文中的示例所示，该标签放在第一行和最后一行的末尾。

<!DOCTYPE html>
<html>
<head>

<title>多行注释</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
  </span><span class="tag">&lt;p&gt;</span><span class="pln">Document content goes here.....</span><span class="tag">&lt;/p&gt;</span><span class="pln">

</body>
</html>

这将产生以下输出-

有条件的注释

条件注释仅在Windows上的Internet Explorer(IE)中有效，但其他浏览器将忽略它们。从Explorer 5开始支持它们，您可以使用它们为IE的不同版本提供条件说明。

<!DOCTYPE html>
<html>
<head>

<title>有条件的注释</title>
  </span><span class="com">&lt;!--[if IE 6]&gt;
     Special instructions for IE 6 here
  &lt;![endif]--&gt;</span><span class="pln">

</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>

您会遇到需要根据Internet Explorer的不同版本应用不同的样式表的情况，在这种情况下，条件注释会很有帮助。

使用注释标签

很少有浏览器支持<comment>标签来注释HTML代码的一部分。

注意-HTML5中已弃用<comment>标签。不要使用此元素。

<!DOCTYPE html>
<html>
<head>
<title>使用注释标签</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>

如果您使用的是IE，那么它将产生以下输出-

但是，如果您不使用IE，那么它将产生以下输出-

注释脚本代码

尽管您将学习HTML的JavaScript，但是在单独的教程中，但是必须在此处进行说明，如果您在HTML代码中使用Java Script或VB Script，则建议将该脚本代码放入适当的HTML注释中，以便浏览器可以正常工作。

<!DOCTYPE html>
<html>
<head>
<title>注释脚本代码</title>
  </span><span class="tag">&lt;script&gt;</span><span class="pln">
     </span><span class="pun">&lt;!--</span><span class="pln"> 
        document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="str">"Hello World!"</span><span class="pun">)</span><span class="pln">
     </span><span class="com">//--&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head>
<body>
<p>Hello , World!</p>
</body>
</html>

这将产生以下输出-

注释样式表(CSS)

尽管您将在单独的教程中学习如何将样式表与HTML结合使用，但是在此处必须注意，如果您在HTML代码中使用级联样式表(CSS)，则建议将该样式表代码放入适当的HTML注释中这样旧的浏览器才能正常运行。

<!DOCTYPE html>
<html>
<head>
<title>注释样式表</title>
  </span><span class="tag">&lt;style&gt;</span><span class="pln">
     </span><span class="com">&lt;!--
        .example {
           border:1px solid #4a7d49;
        }
     //--&gt;</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">

</head>
<body>
<div class="example">Hello , World!</div>
</body>
</html>

这将产生以下输出-

无涯教程-HTML - 注释

有效与无效注释

多行注释

有条件的注释

使用注释标签

注释脚本代码

注释样式表(CSS)

参考链接