任何编程语言都会有注释,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>