按照W3C的定义,HTML中的注释以<!–开头,以–>结尾,但是真相并不仅仅如此。HTML是由SGML(标准通用标记语言)衍生而来,而在SGML中注释的定义如下:
一个注释以<!开头,以>结尾。注释中可以包含零个或多个注释块,每个注释块以–开头,并以–结尾。并且,注释块之间可以包含空格。
因此,以下注释都是正确的:
<!--Hello--> <!--Hello-- --World--> <!----> <!>
用正则表达式来表示的话,/<!(–[^-]*–)?(\s*–[^-]*–)*>/能够匹配的注释都是正确的。因此,下边这种诡异的注释虽然是一个正确的SGML注释,但是按照W3C的定义来说就不正确了。
<!--Hello---->World-->
反过来,下边两种注释是正确的W3C注释,但是却不是正确的SGML注释,因为包裹注释块的–没有配对。
<!---- >--> <!------>
然后问题就来了。Firefox按照SGML的标准来解释注释的。而IE、Chrome、Opera按照W3C的标准来解释注释。所以<!–Hello—->World–>这种注释在Firefox下正常,但是在其它浏览器下会把World–>显示在页面里。反过来,<!——>在其它浏览器里正常,但是Firefox下会把<!——>显示在页面里,因为Firefox认为这不是一个注释。另外,对于<!—- >–>来说,Firefox会认为<!—- >才是注释,把后边的–>显示出来,IE和Chrome下这个是一个正确的注释,而Opera会“智能”地认为<!—- >–>中间的空格是不小心多出来的,所以“好心”地把空格去掉后,把不适注释部分的–>给显示出来。
由于注释中间的中划线在各种浏览器中的表现如此不一致,因此为了避免种种意想不到的惊喜,最直接的做法就是避免在注释中包含中划线。
有的同学或许要问,这个或许是一个不错的知识,可是和我们的日常开发有什么关系呢?那么请看下边这段html:
<!--<a href="Sedan'>http://www.alibaba.com/products/used_cars/--1217----------------6-5574,.html">Sedan <span>(79727)</span></a>-->
在我们的网站里这种链接很常见,而且href的value是模板变量生成的。因此,如果我们在模板里这么写:
<!--<a href="${Url}">${Name}<span>(${num})</span></a>-->
可能觉得不会有问题,但是最后生成的页面在Firefox下就会把注释部分显示成下边这样:
Sedan (79727)-->
这个例子作为理由来讲的确很不充分,毕竟没有谁会用HTML注释来删掉页面里不需要的内容,但是说不定以后的什么时候这些关于注释的知识会在各位的工作中派上用场,这就是豆知识。
PS:如果有同学对HTML注释特别感兴趣,可以继续阅读本文的参考文献:
本文链接:http://www.zjispdip.cn/tech/web/2011/8695.asp
出处:Alibaba.com UED
责任编辑:bluehearts
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|