关于验证:嵌套的HTML注释是否可行?

Are nested HTML comments possible?

根据标题; 是否可以在有效的HTML中嵌套注释? 看下面的例子......

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p>
some text
</p>

  <!-- comment 1

    <p>
commented out html
</p>

    <!-- comment 2

      // are nested html comment allowed?

    end of comment 2 -->

    <p>
more commented out html
</p>

  end of comment 1 -->

<p>
some more text
</p>

看来不是,有人知道如何让嵌套注释工作吗?


TL; DR:不幸的是,不,这是不可能的(而且永远不会)。

简短回答:

HTML评论并不是很多人认为的。 HTML是SGML的一种形式,其中注释由双短划线( - ... - )分隔。

因此,在开口括号( <! - - > )之后的一对尖括号内的任何一对双短划线都带有感叹号。该规范说它比我更好:http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4

这就是为什么这样的评论(我们可能已经做过一次或另一次)是一个坏主意:

1
<!-- ------------------ HEADER BEGINS HERE -------------------- -->

真相:我太懒了,不能告诉你上面的标签污染代表了多少评论,但它至少是10。

I got less lazy: This so-called"comment" actually consists of 10 comments,
three words outside any comment (i.e., just bad SGML), and the
beginning of a comment that is not terminated. It's a real mess:

1
2
3
<kbd><!</kbd><kbd>--</kbd>1<kbd>--</kbd><kbd>--</kbd>2<kbd>--</kbd><kbd>--</kbd>3<kbd>--</kbd><kbd>--</kbd>4<kbd>--</kbd><kbd>--</kbd>5<kbd>--</kbd>
HEADER BEGINS HERE
<kbd>--</kbd>6<kbd>--</kbd><kbd>--</kbd>7<kbd>--</kbd><kbd>--</kbd>8<kbd>--</kbd><kbd>--</kbd>9<kbd>--</kbd><kbd>--</kbd>10<kbd>--</kbd> <kbd>--</kbd><kbd>></kbd>

当然,由于每个浏览器选择如何解释规范的差异,它并不那么简单。

这是一篇很好的文章解释它:

http://weblog.200ok.com.au/2008/01/dashing-into-trouble-why-html-comments.html

答案很长:为什么我们弄错了

我们大多数用HTML长大的人(没有深入研究它的SGML))已经开始相信字符串 <! - 开始发表评论,字符串 - > 结束评论。

实际上, <!> 在HTML文档中划分了一个SGML声明,例如我们在页面顶部看到的DOCTYPE声明。在SGML声明中,注释由双短划线分隔。因此,HTML评论

1
<!-- this is a comment -->

我们大多数人都会相信解析像这样 <! - 这是一个注释 - > 实际上解析如下:
<! - this是comment - > 。除了注释之外,它是一个空的SGML声明。

因为HTML是SGML的一种形式,所以这种"声明中的注释"用作HTML注释。

出于兴趣,这里有一大块纯SGML,它显示注释在SGML中的作用:这个属性列表定义包含对每一行的注释:

1
2
3
4
5
6
7
8
9
10
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  media       %MediaDesc;    #IMPLIED  -- for rendering on these media --
>


嵌套注释时,将" -"替换为" - -"。取消嵌套时,请反转该过程。它不是将始终结束现有的HTML评论。


使用template标签。阻止所有评论和其他HTML显示的最快方法。

1
2
3
4
5
6
7
8
9
10
<template>
    <!-- first paragraph-->
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <!-- second paragraph-->
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</template>

    <!-- third paragraph-->
    Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.sunt in culpa qui officia deserunt mollit.