Question

轻松对待我。我只是在学习HTML。

累计到http://www.w3.org/TR/html-markup/syntax.html#comments以及我见过的许多其他网站，例如http://www.w3schools.com/tags/tag_comment.asp

他们说HTML评论为，!与下一个破折号之间没有空格。

然而，我在下面说明，只有当我写<! -- test -->时，内部的东西才会被忽略。请注意<!和--

之间添加的空格

这是HTML代码

<!DOCTYPE HTML>
<html>
    <head>
     <style type="text/css">   
<!-- td {border: 1px solid gray;} -->
    </style>
</head>
<body>

<table>
  <tr>   <td>      test   </td>  </tr>
</table>

</body>
</html>

现在在你运行它之前，桌子是否应该有边框？

如果text / css中的东西真的被注释掉了，那么表格不应该有边框，对吗？但确实如此。我在linux mint 14下的chrome版本24.0.1312.52上尝试了这个，还有firefox 18.0

现在我将线路更改为

 <! -- td {border: 1px solid gray;} -->

现在注意额外的空间。然后表格显示没有预期的边框。当我实际删除整行时会发生同样的情况：

<!DOCTYPE HTML>
<html>
    <head>
     <style type="text/css">   
     </style>
</head>
<body>

<table>
  <tr>   <td>      test   </td>  </tr>
</table>

</body>
</html>

问题：评论还是<! -- text -->？

Answer 1

CSS不接受HTML 条评论。相反，CSS使用/* comment */来评论行。试试吧。

Answer 2

字符串<! --不会注释掉任何内容。相反，在CSS中它是一个语法错误，并且CSS error processing规则暗示在这种情况下所有样式表都被忽略。

字符串）在某些上下文中被允许和忽略（跳过）。因此，样式表

<!-- td {border: 1px solid gray;} -->

被视为

{border: 1px solid gray;}

您可以使用W3C CSS Validator进行检查。在第一种情况下，使用空格会报告错误，并且不会报告有效的CSS规则。在第二种情况下，不会报告错误，并且规则显示为有效。

在CSS中，评论始终以/*开头，以*/结尾。

的特殊规则的原因是很久以前（我们正在讨论Netscape 1仍在使用的时间），有些浏览器无法识别{ {1}}元素。这意味着他们忽略了style和<style>标记并处理了它们之间的内容，就好像它是普通的HTML内容一样。这会导致样式表在这些浏览器的页面内显示。为防止这种情况，要“隐藏样式表”，样式表将包装在HTML注释分隔符之间。旧的浏览器然后忽略了</style>元素的内容。但是，必须在CSS规范中添加一个特殊规则以允许分隔符。

这是古老的历史，但旧的习惯占上风，甚至从其他人的代码中复制而不理解他们的意思。没有理由长时间“隐藏样式表”，这个技巧现在已成为潜在的风险（由于可能干扰XHTML规则或人们的混淆和打字错误）。

因此，切勿在CSS中使用style（或<!--）。

Answer 3

我已经看到人们在CSS样式块中使用  来实现兼容性目的。

在这种情况下，不支持 CSS 的旧版浏览器会将其注释掉以避免错误。

<style type="text/css">   
<!-- td {border: 1px solid gray;} -->
</style>

将被解释为

<style type="text/css">
</style>

不支持 CSS 的旧版浏览器。这样浏览器避免了潜在的错误。

在现代浏览器中，CSS样式块中的  将被忽略。

<style type="text/css">   
<!-- td {border: 1px solid gray;} -->
</style>

将被解释为

<style type="text/css">
td {border: 1px solid gray;}
</style>

支持CSS的浏览器

。

为什么“<！ - - ”会注释掉一个样式规则，但“<！ - ”不会？ - >

3 个答案: