mozilla
您的搜索结果

    在XHTML文档中合适的使用CSS和JavaScript

     

    XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 定义XHTML是为了把HTML 4扩展成像XML 1.0一样的应用程序。

    在许多站点中XHTML正在迅速的替代HTML 4;然而,主流浏览器对完全支持XHTML方面表现得不足,和网页设计师对HTML 4与XHTML的基本差异缺乏理解,产生了当今网络上的一个不断扩大的问题。

    XHTML是XML,不是HTML

    其中关于XHTML的主要的误解是,它仅仅是另外一个版本的HTML。这个误解产生于这样的事实:Microsoft® Internet Explorer只在文件以Mime类型为 text/html提交时,才支持XHTML,而标准中建议的类型其实是<tt>application/xhtml+xml</tt>。

    当一个XHTML页面的MIME类型被提交为<tt>text/html</tt>时,它被所有的浏览器当作HTML处理,就好像XHTML比起HTML来没有任何不同。但是当一个XHTML页面的MIME类型被提交为<tt>text/xml</tt>或<tt>application/xhtml+xml</tt>时,它将被当作XML文档处理,而设计和显示XML都是必须要遵守严格规则的。

    真正的XHTML就是一个XML的应用,所以创建XHTML时也要遵守严格的规则。特别是:

    1. 未经过处理的<tt><</tt>和<tt>&</tt>不允许出现在CDATA区域(<tt><!CDATA...></tt>)之外。
    2. 注释(<tt><!—— ... ——></tt>)中不能包含双横线。
    3. 包含在注释(<tt><!—— ... ——></tt>)中的内容将被忽略。

    在内嵌的<tt>style</tt>和<tt>script</tt>中出现的问题

    在被当作XML而不是HTML处理时,内嵌的style和script标记会产生几个不同的问题。

    JavaScript中包含了一些在XHTML中不允许存在的字符

    典型的JavaScript中包含了一些特殊字符,这些字符在XHTML中是不允许放在CDATA区域之外的。

    <script type="text/javascript">
      var i = 0;
      
      while (++i < 10)
      {
        // ...
      }
    </script>
    

    注意这个例子不是以正确格式书写的XHTML,因为使用了未经处理的“<”,它只能在被当作XHTML或XML标记的一部分时出现。

    在内嵌的<tt>style</tt>和<tt>script</tt>中使用注释

    熟悉HTML的设计师通常把内嵌的<tt>style</tt>和<tt>script</tt>内容放到注释中,这样可以在不支持样式和脚本的浏览器中隐藏它们。

    <style type="text/css">
     <!--
      body {background-color: blue; color: yellow;}
     -->
    </style>
    <script type="text/javascript">
     <!--
      var i = 0;
      var sum = 0;
     
      for (i = 0; i < 10; ++i)
      {
        sum += i;
      }
      alert('sum = ' + sum);
     // -->
    </script>
    

    这个例子举例说明了特定的浏览器可以忽略注释里的内容。另外,这个例子还显示了不同的浏览器在处理<tt>text/xml</tt>或者 <tt>application/xhtml+xml</tt>内容时产生的不同问题。

    Mozilla 1.1+/Opera 7
    不能使用CSS,也不能执行JavaScript。
    Netscape 7.0x/Mozilla 1.0.x
    不能使用CSS,但可以执行JavaScript。
    Internet Explorer 5.5+
    无法正常显示文档。

    包含双横线的内嵌<tt>style</tt>和<tt>script</tt>

    另一个把JavaScript包含在XHTML文件的注释中产生的问题,与在XHTML的注释中使用双横线会产生的问题一样。

    <script type="text/javascript">
    <!--
      var i;
      var sum = 0;
    
      for (i = 10; i > 0; --i)
      {
        sum += i;
      }
    // -->
    </script>
    

    使用CDATA替代注释

    直接把JavaScript放入CDATA区域会在低版本不支持XML的浏览器中产生问题,不过,把JavaScript的注释(//……)与CDATA一起使用,就能解决向下兼容的问题了。

    <script type="text/javascript">
     //<![CDATA[
      var i = 0;
    
      while  (++i < 10)
      {
        // ...
      }
     //]]>
    </script>
    

    例子

    在注释中使用内嵌<tt>style</tt>的CSS规则

    例子1 - XHTML 1.0 Strict在<tt>text/html</tt>
    这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在<tt>text/html</tt>的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+那一个都能像期望一样应用CSS规则。
    例子2 - XHTML 1.0 Strict在<tt>text/xml</tt>
    这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在<tt>text/xml</tt>的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。
    例子3 - XHTML 1.0 Strict在<tt>application/xhtml+xml</tt>
    这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在<tt>application/xhtml+xml</tt>的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。

    使用外部文件的CSS规则

    例子4 - XHTML 1.0 Strict在<tt>text/html</tt>
    这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在<tt>text/html</tt>的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+。
    例子5 - XHTML 1.0 Strict在<tt>text/xml</tt>
    这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在<tt>text/xml</tt>的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+
    例子6 - XHTML 1.0 Strict在<tt>application/xhtml+xml</tt>
    这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在<tt>application/xhtml+xml</tt>的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+

    建议

    不要在XHTML中内联<tt>style</tt>或<tt>script</tt>

    用外部文件包含CSS规则和JavaScript来替换内联样式和脚本是创建XHTML最佳方式,在向后兼容方式时,如果内容的MIME类型从<tt>text/html</tt>向<tt>application/xhtml+xml</tt>改变时将不会被打断。

    这个建议可能看起来更强烈,可是,它是未来XHTML要打算的问题,当XHTML在<tt>text/html</tt>向<tt>application/xhtml+xml</tt>转移在几年后发生。

    如果你仅仅测试你的XHTML在<tt>text/html</tt>的时候,那么你可能产生问题,例如像:不能准确的描述出主题。移动CSS和JavaScript到单独的文件是可靠的方法,关于改变你XHTML的服务方式。

    理解XHTML 1.0的HTML兼容指导

    这个XHTML 1.0 HTML Compatibility Guidelines帮助创建XHTML文档向后兼容性在那些不能理解XML的老浏览器。

    请注意那是纯粹的XHTML文档,你不需要使用xml-stylesheet处理指导,但应该使用<tt>link</tt>涉及的外部文件包含CSS。

    原始文档信息

    • 作者: Bob Clary
    • 最后更新时间: March 14th, 2003
    • Copyright © 2001-2003 Netscape.

     

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, Gonefish, Sheppy, Doeld
    最后编辑者: ziyunfei,