如何正確地在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