zoukankan      html  css  js  c++  java
  • 如何正确地在XHTML文档中使用JavaScript和CSS

    在越来越多的网站中,XHTML的使用正以很快的速度替代HTML4,但是,目前一些主流浏览器对XHTML的支持还不是很好,加上一些网页制作者对XHTML和HTML4之间的差异理解不够,使得XHTML在WEB发展上进程变得缓慢。


    XHTML是XML而不是HTML

    目前,对XHTML的一个主要误解是它是HTML的另外一个版本。造成此误解的一个事实是Microsoft Internet Explorer仅支持MIME格式为text/html的XHTML而不是被推荐的application/xhtml+xml格式。

    当一个XHTML页面被以text/html的MIME格式解析时,它和HTML页面没有任何差别,而当它以text/xml或者application/xhtml+xml的MIME格式解析时,它将遵从严格的XML书写和显示规则。

    正确的XHTML格式是一个XML程序并且在书写的时候需要按照以下的严格规则:

    1.字符<和&不允许出现在XHTML文档内容中,除非它们被包含在CDATA标签中(<![CDATA[...]]>)

    2.注释标签(<!--...-->)内容中不能包含两个连续的横杠(--)

    3.包含在注释标签(<!--...-->)中的内容将被忽略


    style和script内容中的问题

    style和script标签内的内容在XHTML被以XML格式(而不是HTML格式)解析时将造成一些不同的差异。

    JavaScript中包含了XHTML中不能存在的字符

    Javascript的一些特别字符是XHTML的CDATA标签外不能存在的字符。

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

    注意:上面的示例代码并非良好的XHTML格式,因为它使用了XHTML或XML中不允许的标记"< "


    在style和script内容中使用注释

    熟悉HTML的作者通常了解,将style和script标签内容放到注释标签内,将在浏览器中隐藏这些内容,但有些浏览器却不能理解它们。

    <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>

    上面的示例说明了如何在浏览器中忽略注释标签内的内容,同时,这个示例还显示了浏览器在处理text/xml格式和application/xhtml+xml格式的内容的区别。

    Mozilla 1.1+ / Opera 7
    不应用CSS,不执行JavaScript

    Netscape 7.0x / Mozilla 1.0.x
    不应用CSS,但执行JavaScript

    Internet Explorer 5.5+
    不显示该文档.(参见:https://developer.mozilla.org/Talk:en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents)


    style和javascript内含有两个连续的横杠(--)

    在XHTML页面的JavaScript中使用注释标签进行处理时产生的另一个问题就是JavaScript中会有出现两个连续的横杠(--)的情况:


    <script type="text/javascript">
    <!--
      var i;
      var sum = 0;

      for (i = 10; i > 0; --i)
      {
        sum += i;
      }
    // -->
    </script>

    使用CDATA代替注释

    将script标签内的内容放到CDATA块中可以很好地处理注释中出现两个连续的横杠的问题,不过这将使得一些低版本的浏览器不支持它,因为它们不能理解XML。好在,我们可以通过使用JavaScript中的注释符对CDATA块进行注释以达到兼容的目的。

    <script type="text/javascript">
    //<![CDATA[
      var i = 0;

      while  (++i < 10)
      {
        // ...
      }
    //]]>
    </script>


    推荐的xhtml与html兼容处理方式

    不要在XHTML页面中直接书写style和script,一个好的替代方案是使用外部文件来书写CSS和JavaScript,然后再在XHTML中进行引入。

    这个推荐方案看起来非常不错,不管怎样,它使得页面从text/html向application/xhtml+xml转变的过程中,至少在接下来的这些年里不会出现什么问题。

    详细出处参考:http://www.jb51.net/web/16170.html

  • 相关阅读:
    HashMap和Hashtable及HashSet的区别
    Android获取系统的时间
    Android的布局属性
    ListView 在代码里设置margin
    如何用Vue自己实现一个message提示插件
    JS获取最近三个月日期范围
    css实现表单label文字两端对齐
    my utils
    Vue 路由&组件懒加载(按需加载)
    C# 通过window消息控制指定控件的scroll滚动
  • 原文地址:https://www.cnblogs.com/acafaxy/p/2086784.html
Copyright © 2011-2022 走看看