首页 > WIKI维基 > > 正文

COMMENT IN HTML

日期:2016-10-07 16:53:48编辑作者:新葡京线上娱乐
按照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注释特别感兴趣,可以继续阅读本文的参考文献

相关文章

HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/wiki/2016106.html

新葡京线上娱乐:信息化软件和图形界面 Ⅱ

信息化软件设计就是图形设计这就像我要求软件做很多事情。但它没有什么高深的奥妙──没有对复杂现象的模拟,没有对外部世界的映射,当然也 ..

发布日期:2016-10-30 详细>>

HTML5设计原则

Be conservative in what you send; be liberal in what you accept &ndash;The Robustness principle对于自己输出要严格 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/wiki/201687.html

详解VS 2016中的顺序图

对于Visual Studio2016Beta2中的顺序图,下面会从SequenceDiagram的定义开始讲起。然后是逐一分析VisualStudio2016顺序图的应用与实例。希 ..

发布日期:2016-10-10 详细>>

信息化软件和图形界面 Ⅰ

魔术墨水——信息化软件和图形界面 part1暴长的文章,一根筋的就给翻译了,还是没翻完,有人看得话就找时间翻完,翻译水平很业余,见谅。 ..

发布日期:2016-10-30 详细>>

网站统计: