HTML - Comments

原创

admin 4个月前 (08-07) 阅读数 21 #HTML

HTML - 注释

HTML注释是不可执行的代码行，不会在网页上显示，用于添加注释或说明。在HTML代码中添加注释是一种良好的实践，特别是在复杂文档中，可以指示文档的各个部分，并为查看代码的任何人提供其他说明。

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>

多行注释

您可以使用特殊的开始标签来注释多行，这些标签放在第一行之前和最后一行之后，如下面的示例所示。

示例

<!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>标签的注释

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

示例

<!DOCTYPE html>
<html>
<head>
   <title>使用注释标签</title>
</head>
<body>
   <p>这不是<comment>不是</comment>Internet Explorer。</p>
</body>
</html>

注释脚本代码

如果HTML文档包含JavaScript或VbScript，并且在浏览器上打开此页面，某些旧版本的浏览器可能无法正常工作。建议将脚本代码放在适当的HTML注释中，以便旧浏览器可以正常工作。

示例

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

注释样式表

要在<style>标签内注释CSS脚本，我们需要使用/*符号作为起点，*/符号作为终点。

示例

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