如何正確地在XHTML文檔中使用JavaScript和CSS

字號(hào):


    可擴(kuò)展性超文本標(biāo)記語言XHTML1.0第2版定義XHTML可以將HTML4.0轉(zhuǎn)換為XML1.0格式。
    在越來越多的網(wǎng)站中,XHTML的使用正以很快的速度替代HTML4,但是,目前一些主流瀏覽器對(duì)XHTML的支持還不是很好,加上一些網(wǎng)頁制作者對(duì)XHTML和HTML4之間的差異理解不夠,使得XHTML在WEB發(fā)展上進(jìn)程變得緩慢。
    XHTML是XML而不是HTML
    目前,對(duì)XHTML的一個(gè)主要誤解是它是HTML的另外一個(gè)版本。造成此誤解的一個(gè)事實(shí)是Microsoft Internet Explorer僅支持MIME格式為text/html的XHTML而不是被推薦的application/xhtml+xml格式。
    當(dāng)一個(gè)XHTML頁面被以text/html的MIME格式解析時(shí),它和HTML頁面沒有任何差別,而當(dāng)它以text/xml或者application/xhtml+xml的MIME格式解析時(shí),它將遵從嚴(yán)格的XML書寫和顯示規(guī)則。
    正確的XHTML格式是一個(gè)XML程序并且在書寫的時(shí)候需要按照以下的嚴(yán)格規(guī)則:
    1.字符<和&不允許出現(xiàn)在XHTML文檔內(nèi)容中,除非它們被包含在CDATA標(biāo)簽中(<![CDATA[...]]>)
    2.注釋標(biāo)簽(<!--...-->)內(nèi)容中不能包含兩個(gè)連續(xù)的橫杠(--)
    3.包含在注釋標(biāo)簽(<!--...-->)中的內(nèi)容將被忽略
    style和script內(nèi)容中的問題
    style和script標(biāo)簽內(nèi)的內(nèi)容在XHTML被以XML格式(而不是HTML格式)解析時(shí)將造成一些不同的差異。
    JavaScript中包含了XHTML中不能存在的字符
    Javascript的一些特別字符是XHTML的CDATA標(biāo)簽外不能存在的字符。
    <script type="text/javascript">
    var i = 0;
    while(++i < 10){
    //...
    }
    </script>
    注意:上面的示例代碼并非良好的XHTML格式,因?yàn)樗褂昧薠HTML或XML中不允許的標(biāo)記"< "
    在style和script內(nèi)容中使用注釋
    熟悉HTML的作者通常了解,將style和script標(biāo)簽內(nèi)容放到注釋標(biāo)簽內(nèi),將在瀏覽器中隱藏這些內(nèi)容,但有些瀏覽器卻不能理解它們。
    <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>
    上面的示例說明了如何在瀏覽器中忽略注釋標(biāo)簽內(nèi)的內(nèi)容,同時(shí),這個(gè)示例還顯示了瀏覽器在處理text/xml格式和application/xhtml+xml格式的內(nèi)容的區(qū)別。
    Mozilla 1.1+ / Opera 7
    不應(yīng)用CSS,不執(zhí)行JavaScript
    Netscape 7.0x / Mozilla 1.0.x
    不應(yīng)用CSS,但執(zhí)行JavaScript
    Internet Explorer 5.5+
    不顯示該文檔.(參見:https://developer.mozilla.org/Ta ... _in_XHTML_Documents )
    style和javascript內(nèi)含有兩個(gè)連續(xù)的橫杠(--)
    在XHTML頁面的JavaScript中使用注釋標(biāo)簽進(jìn)行處理時(shí)產(chǎn)生的另一個(gè)問題就是JavaScript中會(huì)有出現(xiàn)兩個(gè)連續(xù)的橫杠(--)的情況:
    <script type="text/javascript">
    <!--
    var i;
    var sum = 0;
    for (i = 10; i > 0; --i)
    {
    sum += i;
    }
    // -->
    </script>
    使用CDATA代替注釋
    將script標(biāo)簽內(nèi)的內(nèi)容放到CDATA塊中可以很好地處理注釋中出現(xiàn)兩個(gè)連續(xù)的橫杠的問題,不過這將使得一些低版本的瀏覽器不支持它,因?yàn)樗鼈儾荒芾斫釾ML。好在,我們可以通過使用JavaScript中的注釋符對(duì)CDATA塊進(jìn)行注釋以達(dá)到兼容的目的。
    <script type="text/javascript">
    //<![CDATA[
    var i = 0;
    while (++i < 10)
    {
    // ...
    }
    //]]>
    </script>
    推薦的xhtml與html兼容處理方式
    不要在XHTML頁面中直接書寫style和script,一個(gè)好的替代方案是使用外部文件來書寫CSS和JavaScript,然后再在XHTML中進(jìn)行引入。
    這個(gè)推薦方案看起來非常不錯(cuò),不管怎樣,它使得頁面從text/html向application/xhtml+xml轉(zhuǎn)變的過程中,至少在接下來的這些年里不會(huì)出現(xiàn)什么問題。