Spiga

慎用 XHTML 标签的自关闭写法

2007-06-14 08:15 by Cat Chen, 4536 visits, 网摘, 收藏, 编辑

我们都知道XHTML里面的img标记应该这样写:<img alt="" src="" />,这种写法也就是所谓的自关闭,在XML中是完全合法的写法。如果你熟悉XML相关的开发,可能也就习惯于这种写法,想着XML中任何不含子节点的元素都可以这样写,那么XHTML中没有内容的标签也都可以这样写。XHTML中理论上当然允许任何标签以自关闭的方法来书写,然而浏览器兼容性却带来了新问题,那就是IE无法正确识别某些标签的自关闭写法。

请尝试输入以下XHTML代码并在IE中浏览:<p>hello <script type="text/javascript" /> world</p>,你会发现只能看到前面的hello而不见后面的world,这事情让人挺无法解释的吧。可能有不少人都曾经遇到过这个问题,并且花了几个小时在上面都找不到合理的解释。

解释源自另外一段类似的代码:<p>hello <textarea /> world</p>,你在IE中看看其显示效果,能够得到合理的解释了吗?我们能够看到前面的hello正常显示了,而后面的world则显示在textarea里面,这证明IE并没有正确识别textarea标签已经自关闭了,而是当它没有关闭,并将后面的内容识别为textarea内部的内容。

这时候我们就明白前面那段代码为什么看不到后面的world了,因为它被当作script的一部分来识别了。这就说明了,在我们使用XHTML时并不能好像XML那样随意的使用自关闭的写法,只有少数原本不需要关闭的标签可以用自关闭的写法,其他标签即使没有任何内容最好也用成对的关闭写法。

最后需要提醒大家的是,其实弱智的parser不仅仅IE有,很多地方都可能碰到由于parser不严谨而引起的问题,所以我们在书写XHTML的时候还是要迁就一些老HTML继承下来的习惯,不能好像真的XML那样自以为符合标准了就随意写。不信?那么再试一个吧:<p>hello <br></br> world</p>,留意IE与Opera中的显示效果。

Update: 有部分读者认为我举的例子是不符合XHTML规范的,那么请先阅读XHTML规范Empty Elements一节的中文翻译如下:“空元素必须要么有一个结束标记,要么以/>结束,例如<br/>或<hr></hr>。请参考HTML兼容性标准以获取关于确保向后兼容HTML4浏览器的信息。”可以看得到,规范中也给出了<hr></hr>这样的例子,说明<br></br>的写法是符合XHTML规范的,只是没有兼容HTML4标准。那么到底XHTML是否兼容HTML4呢?我们来看Compatibility Issues一节,中文翻译如下:“虽然并没有要求XHTML1.0文档兼容现有的浏览器,但在实践中这并不难做到。”因此,XHTML是没有规定文档必须向下兼容,我给出的例子都是合法的XHTML文档片断,当出现在完整的XHTML里面时也全部能通过W3C Markup Validation Service的验证。

Update again: 其实我写这篇文章的目的不是为了强调只符合XHTML规范就行了,也不是强调符合XHTML同时兼容HTML4就够了,而是应该考虑更多需要兼容的情况。例如你的CMS中允许用户提交HTML,提交的HTML经过SgmlReader或者其他方法格式化为XHTML,同时或许还做了其它XML处理,这时候就有可能将用户提交的<textarea></textarea>转换为<textarea />,这种情况下你需要通过跟踪调试找出问题并不容易,因为XML处理并没有违反任何规范,每一步的处理都是符合语义的。另外最好不要把<br />写成<br/>,因为确实有些弱智的parser仅仅因为少了一个空格就无法正确识别。

0
0
(请您对文章做出评价)
« 上一篇:探索 ASP.NET Futures (Part 3 - Client Diagnostics)
» 下一篇:从 Dynamic Data Control 回归普通的 Data Control
Add your comment

35 条回复

  1. #1楼 浪子      2007-06-14 08:29
    上次写SmartScripts的时候,也碰到了。
    先使用<script src='boot.js'/>
    <script>
    #using
    </script>

    竟然读不到#using,晕死我了。

    后面问了老赵,才知道是这个问题。
    改成<script src='boot.js'></script>
    <script>
    #using
    </script>
    就OK了。

    这种小问题还真是晕啊
      回复  引用  查看    
  2. #2楼 太阳神2007-06-14 08:43
    就是搞笑的问题,看来HTM这块还有蛮多可以学习的东西了。
      回复  引用    
  3. #3楼[楼主] Cat Chen      2007-06-14 08:48
    补充一点,那就是不仅仅你自己的代码要避免出现<textarea />,还要防止用户提交的HTML中的<textarea></textarea>在服务器端经XML Parser处理后重新输出时变成了<textarea />。后者在调试过程中更难发现。
      回复  引用  查看    
  4. #4楼 若寒      2007-06-14 08:51
    先顶一个。
    <scripte type="text/javascript" />中,多了个e.
    :)
      回复  引用  查看    
  5. #5楼 禾口王[未注册用户]2007-06-14 09:04
    能不能先搞清楚,你那些的<textarea /> <script /> 标签是不是符合html规范的?html解释引擎能不能认识这些标签?让img标签加上一个/ ,目的是把没有成对匹配的html标签,让它们能符合xml规范。 而不是要你自创的<textarea />。
      回复  引用    
  6. #6楼 ZergTant[未注册用户]2007-06-14 09:48
    请先搞清楚概念,有些标签是独立的当然要自关闭了,有些不是而且必须成对出现
    您觉得您的<br></br>
    这个东西符合w3c的xhtml规范么?

      回复  引用    
  7. #7楼 妞妞[未注册用户]2007-06-14 09:52
    太可笑了,发这篇文章证明作者对html很无知,很多人都被你忽悠了,大家别上当,能自动关闭的标签w3c组织已经规定出来了,如img,br,hr等都是自动关闭的标签,而且xhtml规定了img不能有</img>这样的标签。

    鄙视作者,不懂乱发文章,建议多看看web标准方面的文章,建议把文章删除,别误倒了很多初学者~
      回复  引用    
  8. #8楼 卖糕的      2007-06-14 09:53
    这个人应该没有搞过html,xhtml是要向下兼容html的,你那些写法根本没办法兼容。
      回复  引用  查看    
  9. #9楼 lly365[未注册用户]2007-06-14 09:57
    佩服作者的无知!

    XHTML是这样说的:形如br, img, hr这样在HTML没有闭合的标签,在XHTML才要加上闭合标签. 不是见标签就能自闭合.

    作者真幽默.
      回复  引用    
  10. #10楼 木野狐      2007-06-14 10:06
    上次我也遇到类似的问题,我是想当然的写了 <div />
    自己想明白後,本来也想写随笔的。
      回复  引用  查看    
  11. #11楼 木野狐      2007-06-14 10:07
    楼上几位朋友未免不够厚道。
    没有人能有时间读遍所有的标准,不知道是正常的。
      回复  引用  查看    
  12. #12楼[楼主] Cat Chen      2007-06-14 10:32
    @禾口王
    @ZergTant
    @妞妞
    @卖糕的
    @lly365
    很感谢你们的回复,我已经仔细查阅了XHTML规范,并且确定上述所有写法都是符合XHTML的,而且XHTML并不要求必须兼容HTML4。详细请阅读主贴的update部分。
      回复  引用  查看    
  13. #13楼 阿毅[未注册用户]2007-06-14 11:24
    @Cat Chen
    我没看XHTML规范,一直以为必须是遵循XML基础上又遵循HTML规范。所以从来不敢把HTML里要求成对出现的在XHTML里单个“自关闭”。
      回复  引用    
  14. #14楼 匿名用户[未注册用户]2007-06-14 13:02
    :<p>hello <textarea></textarea> world</p>,
      回复  引用    
  15. #15楼 ZergTant[未注册用户]2007-06-14 20:17
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    </head>

    <body>
    <p>hello <textarea /> world</p>,
    </body>

    </html>

    这行代码能通过?
    我测试的怎么通不过


    Error Line 10 column 20: required attribute "rows" not specified.
    <p>hello <textarea /> world</p>,The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.



    Error Line 10 column 20: required attribute "cols" not specified.
    <p>hello <textarea /> world</p>

      回复  引用    
  16. #16楼[楼主] Cat Chen      2007-06-14 21:27
    @ZergTant
    非常抱歉,我在update里说的确实还有不准确的地方,请使用:
    <textarea cols="5" rows="5" />

    我测试的时候刚刚开始也遇到了你所说的这个问题,你可以看到它的提示是“缺少textarea必须的cols”属性。实际上,如果你熟悉XHTML的话你就应该知道cols和rows是textarea的必须属性。
      回复  引用  查看    
  17. #17楼 文[未注册用户]2007-06-15 09:08
    单标签才是你那样关闭的 比如IMG BR
    对于成对的标签你也那样强行关闭????!!!!


    居然这种文章还上首页 无语

    把你的HTML页面拿到W3C校验完毕无错了再分析
      回复  引用    
  18. #18楼[楼主] Cat Chen      2007-06-15 09:14
    @文
    根据XHTML标准,确实可以把成对的标签自关闭,并且不兼容HTML4并不违反XHTML标准。在符合XHTML标准的情况下,这些标签也确实能通过校验,这个我在update里已经说清楚了。
      回复  引用  查看    
  19. #19楼 钢盅郭子      2007-06-15 11:02
    我的确遇到过<script />在IE中无效的问题

    所幸这样的问题是有限个

    呵呵
      回复  引用  查看    
  20. #20楼 yzx110[未注册用户]2007-06-16 17:31
    跟我的问题类似

    可以看看我的 <div />和<div></div>的异同
    http://hi.baidu.com/yzx110/blog/item/6589a96478369cf1f73654bb.html

      回复  引用    
  21. #21楼 阿郎      2007-06-16 23:21
    有些html标签是不能自闭合的 起码script是不行的
    如<SCRIPT src="*.js" type="text/javascript"></SCRIPT>才是正确的
      回复  引用  查看    
  22. #22楼[楼主] Cat Chen      2007-06-16 23:46
    @阿郎
    准确来说,是理论上可以,但实际上不兼容。
      回复  引用  查看    
  23. #23楼 Axu[未注册用户]2007-06-17 19:47
    支持楼主
    学习
      回复  引用    
  24. #24楼 tspa[未注册用户]2007-07-18 11:29
    <br></br>
    ?
    这是空标签. 你能这样写吗.
    <br />


    <script></script>
    哪有这样的<script /> 这个并不是空标签啊..


    writer html级别的规范还没理解清楚?其实这些都是个人书写规范问题.
    xhtml里
    比如:<img src="**" />
    当**里是绝对url的时候 此以http://开头属性值在结尾处必须添加"/".
    xhtml里规范了这条. 所以在结尾处添加的"/",请不要看作img这个空标签的关闭标签.
      回复  引用    
  25. #25楼 随风流月      2007-08-03 17:34
    Internet Explorer 的 Parser 比较弱,很多 CSS2/3 的特性都不支持。XHTML 理论上向下兼容,不过碰上 IE 还真没办法。所以才有很多 CSS Hack。
      回复  引用  查看    
  26. #26楼 随风流月      2007-08-04 13:52
    @tspa
    好的,A 怎么办?呵呵。
      回复  引用  查看    
  27. #27楼[楼主] Cat Chen      2007-08-04 19:59
    @tspa
    XHTML规范没有规定你所说的src为绝对地址时就应该符合某些规则。

    其实我也觉得不可能有这样的规定,因为src的目标可以是URL,甚至是URI,XHTML作为一个尽可能向前兼容的规范是不可能细致去规定src为绝对地址这样一种非常非常特殊的情况。
      回复  引用  查看    
  28. #28楼 LikeCode      2007-12-21 12:16
    该死的IE,上次我就被那个
    <script type="javascript" src="xxx.js" />给搞死了.
    要head加了这行,IE页面就空白,在FF就正常,那次真整死我了,搞了一个早上才发现是这个问题.

    该死的IE!诺大一个软件公司开发的浏览器BUG如此之多!
      回复  引用  查看    
  29. #29楼[楼主] Cat Chen      2007-12-21 13:07
    @LikeCode
    呵呵……Microsoft只认为最终用户是客户,程序员最近几年才受到越来越多的重视。
      回复  引用  查看    
  30. #30楼 pingpingta[未注册用户]2008-03-06 09:59
    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

    用了一个JS文件。实在不知怎么通过验证了。
      回复  引用    
  31. #31楼[楼主] Cat Chen      2008-03-06 10:11
    @pingpingta
    应该是写了