任何编程语言都会有注释,HTML也不例外,HTML注释是任何网络浏览器都会忽略的一段代码,即不会在用户浏览中显示出来。

在 HTML 代码中添加注释是一种很好的做法,尤其是在复杂的文档中,以指示文档的各个部分,并向查看代码的任何人添加任何其他注释。注释可以帮助您和其他人理解您的代码并提高代码的可读性。

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

示例

<!DOCTYPE html>
<html>

   <head>  <!-- 头部开始 -->
      <title>这是文档的标题</title>
   </head> <!-- 头部结束 -->
	
   <body>
      <p>这是文档的内容.....</p>
   </body>
	
</html>

测试一下

有效与无效注释

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

示例

这里,给定的注释是有效的注释,将不在浏览器中显示内容.

<!DOCTYPE html>
<html>

   <head>
      <title>验证注释示例</title>
   </head>
	
   <body>
      <!--  这是一个有效的注释 -->
      <p>这是文档的内容.....</p>
   </body>
	
</html>

测试一下

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

<!DOCTYPE html>
<html>

   <head>  
      <title>这是无效的注释的例子</title>
   </head>
	
   <body>
      < !--   这不是一个注释 -->
      <p>这是文档的内容.....</p>
   </body>
	
</html>

测试一下

多行注释

到目前为止,我们已经看到了单行注释,但 HTML 也支持多行注释。

您可以通过放置在第一行和最后一行的末尾,如下面给定的示例所示。

示例

<!DOCTYPE html>
<html>

   <head>  
      <title>多行注释</title>
   </head> 
	
   <body>
      <!-- 
        这是一个多行注释的例子

    换一行注释的内容 

        -->
      
      <p>这是文档的内容.....</p>
   </body>
	
</html> 

条件注释

条件注释仅在 Windows 上的 Internet Explorer (IE) 中有效,但会被其他浏览器忽略。从 Explorer 5 开始支持它们,您可以使用它们向不同版本的 IE 发出条件指令。

示例

<!DOCTYPE html>
<html>

   <head>  
      <title>条件注释的例子</title>

      <!--[if IE 6]>
         此处针对 IE 6 的特别说明
      <![endif]-->
   </head> 
   
   <body>
      <p>这是文档的内容.....</p>
   </body>
	
</html>

测试一下

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

使用注释标记

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

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>使用注释标记</title>
   </head>
	
   <body>
      <p>这 <comment>不是</comment> Internet Explorer.</p>
   </body>
	
</html>

测试一下

注释脚本代码

如果您在 HTML 代码中使用 Java Script 或 VB Script,那么建议将该脚本代码放在正确的 HTML 注释中,以便旧浏览器可以正常工作。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>注释脚本代码的例子</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

测试一下

注释样式表

如果您在 HTML 代码中使用级联样式表 (CSS),那么建议将该样式表代码放在正确的 HTML 注释中,以便旧浏览器可以正常工作.

示例

<!DOCTYPE html>
<html>

   <head>
      <title>注释样式表的例子</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

测试一下