在XHTML文檔中合適的使用CSS和JavaScript

 在XHTML文檔中合適的使用CSS和JavaScriptXHTML™ 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，而標准中建議的類型其實是application/xhtml+xml。

當一個XHTML頁面的MIME類型被提交為text/html時，它被所有的浏覽器當作HTML處理，就好像XHTML比起HTML來沒有任何不同。但是當一個XHTML頁面的MIME類型被提交為text/xml或application/xhtml+xml時，它將被當作XML文檔處理，而設計和顯示XML都是必須要遵守嚴格規則的。

真正的XHTML就是一個XML的應用，所以創建XHTML時也要遵守嚴格的規則。特別是：

未經過處理的<和&不允許出現在CDATA區域（<!CDATA...>）之外。 
注釋(<!—— ... ——>)中不能包含雙橫線。 
包含在注釋(<!—— ... ——>)中的內容將被忽略。 
在內嵌的style和script中出現的問題 
在被當作XML而不是HTML處理時，內嵌的style和script標記會產生幾個不同的問題。

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+ 
無法正常顯示文檔。 
包含雙橫線的內嵌style和script 
另一個把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>例子 
在注釋中使用內嵌style的CSS規則 
例子1 - XHTML 1.0 Strict在text/html 
這個例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在text/html的行為。這個例子支持Netscape 7.x，Mozilla，Opera 7和Internet Explorer 5.5+那一個都能像期望一樣應用CSS規則。 
例子2 - XHTML 1.0 Strict在text/xml 
這個例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在text/xml的行為。這個例子支持Netscape 7.x，Mozilla，Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x，Mozilla和Opera同意包含在注釋的內聯CSS規則將被忽略。 
例子3 - XHTML 1.0 Strict在application/xhtml+xml 
這個例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在application/xhtml+xml的行為。這個例子支持Netscape 7.x，Mozilla，Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x，Mozilla和Opera同意包含在注釋的內聯CSS規則將被忽略。 
使用外部文件的CSS規則 
例子4 - XHTML 1.0 Strict在text/html 
這個例子舉例說明當在使用外部文件的CSS規則的時候XHTML在text/html的行為。這個例子支持Netscape 7.x，Mozilla，Opera 7和Internet Explorer 5.5+。 
例子5 - XHTML 1.0 Strict在text/xml 
這個例子舉例說明當在使用外部文件的CSS規則的時候XHTML在text/xml的行為。這個例子支持Netscape 7.x，Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。 
例子6 - XHTML 1.0 Strict在application/xhtml+xml 
這個例子舉例說明當在使用外部文件的CSS規則的時候XHTML在application/xhtml+xml的行為。這個例子支持Netscape 7.x，Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。 
建議 不要在XHTML中內聯style或script 用外部文件包含CSS規則和JavaScript來替換內聯樣式和腳本是創建XHTML最佳方式，在向後兼容方式時，如果內容的MIME類型從text/html向application/xhtml+xml改變時將不會被打斷。

這個建議可能看起來更強烈，可是，它是未來XHTML要打算的問題，當XHTML在text/html向application/xhtml+xml轉移在幾年後發生。

如果你僅僅測試你的XHTML在text/html的時候，那麼你可能產生問題，例如像：不能准確的描述出主題。移動CSS和JavaScript到單獨的文件是可靠的方法，關於改變你XHTML的服務方式。

理解XHTML 1.0的HTML兼容指導 
這個XHTML 1.0 HTML Compatibility Guidelines幫助創建XHTML文檔向後兼容性在那些不能理解XML的老浏覽器。

請注意那是純粹的XHTML文檔，你不需要使用xml-stylesheet處理指導，但應該使用link涉及的外部文件包含CSS。