今天在xhtml中使用javascript時一直報錯,后來才發(fā)現(xiàn)在xhtml中javacript里使用'<' '&'是不合法的。
Making JavaScript Compatible with XHTML
XHTML is subject to the same syntactical rules as XML. Because of this, an
XHTML processor treats the characters < and & as markup, even if they reside inside a <script> block. Since the < and &
characters are also used by the JavaScript language, this creates a conflict. When an
XHTML processor sees these characters within the JavaScript code of a <script> block, it attempts to parse the JavaScript code as if it were markup, which causes the XHTML parser to fail.
You can get around this conflict and make all JavaScript code compatible with XHTML by placing the JavaScript code within a CDATA section. A CDATA section in XML/XHTML starts with the
characters <![CDATA[ and ends with the characters ]]>.
Any characters within the starting and ending element of a CDATA section are not treated by the XML/XHTML processor as markup, thus preventing a conflict.
Here is an example of how to declare JavaScript code within a CDATA section so that it is
compatible with XHTML:
<script type="text/javascript">
//<![CDATA[
alert("<This is compatible with XHTML>");
//]]>
</script>
Note that JavaScript source code must be placed within the opening and closing elements of the CDATA section. The CDATA section itself should be commented out with a JavaScript single-line comment // as in the example above. This is so that the JavaScript
interrupter does not interpret the CDATA markup as JavaScript, which would cause a JavaScript error.
JavaScript code that is imported into an XHTML document from an external source file is always
compatible with XHTML. So, for example, any code you place into the external file external.js and import into an
XHTML file via the src attribute of the <script> tag will be valid. Here is an example of how to import the file external.js:
<script type="text/javascript" src="external.js"></script>
在XHTML文檔中合適的使用CSS和JavaScript
XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 定義XHTML是為了把HTML 4擴展成像XML 1.0一樣的應(yīng)用程序。
在許多站點中XHTML正在迅速的替代HTML 4;然而,主流瀏覽器對完全支持XHTML方面表現(xiàn)得不足,和網(wǎng)頁設(shè)計師對HTML 4與XHTML的基本差異缺乏理解,產(chǎn)生了當(dāng)今網(wǎng)絡(luò)上的一個不斷擴大的問題。
XHTML是XML,不是HTML
其中關(guān)于XHTML的主要的誤解是,它僅僅是另外一個版本的HTML。這個誤解產(chǎn)生于這樣的事實:Microsoft® Internet Explorer只在文件以Mime類型為 text/html提交時,才支持XHTML,而標(biāo)準(zhǔn)中建議的類型其實是application/xhtml+xml。
當(dāng)一個XHTML頁面的MIME類型被提交為text/html時,它被所有的瀏覽器當(dāng)作HTML處理,就好像XHTML比起HTML來沒有任何不同。但是當(dāng)一個XHTML頁面的MIME類型被提交為text/xml或application/xhtml+xml時,它將被當(dāng)作XML文檔處理,而設(shè)計和顯示XML都是必須要遵守嚴(yán)格規(guī)則的。
真正的XHTML就是一個XML的應(yīng)用,所以創(chuàng)建XHTML時也要遵守嚴(yán)格的規(guī)則。特別是:
- 未經(jīng)過處理的<和&不允許出現(xiàn)在CDATA區(qū)域(<!CDATA...>)之外。
- 注釋(<!—— ... ——>)中不能包含雙橫線。
- 包含在注釋(<!—— ... ——>)中的內(nèi)容將被忽略。
在內(nèi)嵌的style和script中出現(xiàn)的問題
在被當(dāng)作XML而不是HTML處理時,內(nèi)嵌的style和script標(biāo)記會產(chǎn)生幾個不同的問題。
JavaScript中包含了一些在XHTML中不允許存在的字符
典型的JavaScript中包含了一些特殊字符,這些字符在XHTML中是不允許放在CDATA區(qū)域之外的。
<script type="text/javascript">
var i = 0;
while (++i < 10)
{
// ...
}
</script>
注意這個例子不是以正確格式書寫的XHTML,因為使用了未經(jīng)處理的“<”,它只能在被當(dāng)作XHTML或XML標(biāo)記的一部分時出現(xiàn)。
在內(nèi)嵌的style和script中使用注釋
熟悉HTML的設(shè)計師通常把內(nèi)嵌的style和script內(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>
這個例子舉例說明了特定的瀏覽器可以忽略注釋里的內(nèi)容。另外,這個例子還顯示了不同的瀏覽器在處理text/xml或者 application/xhtml+xml內(nèi)容時產(chǎn)生的不同問題。
- Mozilla 1.1+/Opera 7
- 不能使用CSS,也不能執(zhí)行JavaScript。
- Netscape 7.0x/Mozilla 1.0.x
- 不能使用CSS,但可以執(zhí)行JavaScript。
- Internet Explorer 5.5+
- 無法正常顯示文檔。
包含雙橫線的內(nèi)嵌style和script
另一個把JavaScript包含在XHTML文件的注釋中產(chǎn)生的問題,與在XHTML的注釋中使用雙橫線會產(chǎn)生的問題一樣。
<script type="text/javascript">
<!--
var i;
var sum = 0;
for (i = 10; i > 0; --i)
{
sum += i;
}
// -->
</script>
使用CDATA替代注釋
直接把JavaScript放入CDATA區(qū)域會在低版本不支持XML的瀏覽器中產(chǎn)生問題,不過,把JavaScript的注釋(//……)與CDATA一起使用,就能解決向下兼容的問題了。
<script type="text/javascript">
//<![CDATA[
var i = 0;
while (++i < 10)
{
// ...
}
//]]>
</script>
例子
在注釋中使用內(nèi)嵌style的CSS規(guī)則
- 例子1 - XHTML 1.0 Strict在text/html
- 這個例子舉例說明當(dāng)CSS規(guī)則包含內(nèi)聯(lián)和包含在注釋中時的XHTML在text/html的行為。這個例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+那一個都能像期望一樣應(yīng)用CSS規(guī)則。
- 例子2 - XHTML 1.0 Strict在text/xml
- 這個例子舉例說明當(dāng)CSS規(guī)則包含內(nèi)聯(lián)和包含在注釋中時的XHTML在text/xml的行為。這個例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注釋的內(nèi)聯(lián)CSS規(guī)則將被忽略。
- 例子3 - XHTML 1.0 Strict在application/xhtml+xml
- 這個例子舉例說明當(dāng)CSS規(guī)則包含內(nèi)聯(lián)和包含在注釋中時的XHTML在application/xhtml+xml的行為。這個例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注釋的內(nèi)聯(lián)CSS規(guī)則將被忽略。
使用外部文件的CSS規(guī)則
- 例子4 - XHTML 1.0 Strict在text/html
- 這個例子舉例說明當(dāng)在使用外部文件的CSS規(guī)則的時候XHTML在text/html的行為。這個例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+。
- 例子5 - XHTML 1.0 Strict在text/xml
- 這個例子舉例說明當(dāng)在使用外部文件的CSS規(guī)則的時候XHTML在text/xml的行為。這個例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。
- 例子6 - XHTML 1.0 Strict在application/xhtml+xml
- 這個例子舉例說明當(dāng)在使用外部文件的CSS規(guī)則的時候XHTML在application/xhtml+xml的行為。這個例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。
建議
不要在XHTML中內(nèi)聯(lián)style或script
用外部文件包含CSS規(guī)則和JavaScript來替換內(nèi)聯(lián)樣式和腳本是創(chuàng)建XHTML最佳方式,在向后兼容方式時,如果內(nèi)容的MIME類型從text/html向application/xhtml+xml改變時將不會被打斷。
這個建議可能看起來更強烈,可是,它是未來XHTML要打算的問題,當(dāng)XHTML在text/html向application/xhtml+xml轉(zhuǎn)移在幾年后發(fā)生。
如果你僅僅測試你的XHTML在text/html的時候,那么你可能產(chǎn)生問題,例如像:不能準(zhǔn)確的描述出主題。移動CSS和JavaScript到單獨的文件是可靠的方法,關(guān)于改變你XHTML的服務(wù)方式。
理解XHTML 1.0的HTML兼容指導(dǎo)
這個XHTML 1.0 HTML Compatibility Guidelines幫助創(chuàng)建XHTML文檔向后兼容性在那些不能理解XML的老瀏覽器。
請注意那是純粹的XHTML文檔,你不需要使用xml-stylesheet處理指導(dǎo),但應(yīng)該使用link涉及的外部文件包含CSS。
另外,附XHTML的一些規(guī)范:
1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記
以前在 HTML 中,你可以打開許多標(biāo)簽,例
如 <p> 和 <li> 而不一定寫對應(yīng)的 </p> 和 </li> 來關(guān)閉它們.但
在 XHTML 中這是不合法的.XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu),所有標(biāo)簽必須關(guān)閉.如果是單獨不成對的標(biāo)簽,在標(biāo)簽最后加一個 "/" 來關(guān)閉它.例如:
<br /><img height="80" alt="網(wǎng)頁設(shè)計師" src="
http://images/logo_w3cn_200x80.gif"&n ... 00" />
2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫
與 HTML 不
一樣,XHTML 對大小寫是敏感的,<title> 和 <TITLE> 是不同的標(biāo)簽.XHTML 要求所有的標(biāo)簽和屬性的
名字都必須使用小寫.例如:<BODY> 必須寫成 <body> .大小寫夾雜也是不被認(rèn)可的,通
常 dreamweaver 自動生成的屬性名字 "onMouseOver" 也必須修改成 "onmouseover".
3.所有的 XML 標(biāo)記都必須合理嵌套
同樣因為 XHTML 要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu),因此所有的嵌套都必須按順序,以前我們這樣寫的代碼:
<p><b></p></b>
必須修改為:
<p><b></b></p>
就是說,一層一層的嵌套必須是嚴(yán)格對稱.
4.所有的屬性必須用引號 "" 括起來
在 HTML 中,你可以不需要給屬性值加引號,但是在 XHTML 中,它們必須被加引號.例如:
<height=80>
必須修改為:
<height="80">
特殊情況,你需要在屬性值里使用雙引號,你可以用 ",單引號可以使用 ',例如:
<alt="say'hello'">
5.把所有 < 和 & 特殊符號用編碼表示
任何小于號(<),不是標(biāo)簽的一部分,都必須被編碼為 <
任何大于號(>),不是標(biāo)簽的一部分,都必須被編碼為 >
任何與號(&),不是實體的一部分的,都必須被編碼為 &
6.給所有屬性賦一個值
XHTML 規(guī)定所有屬性都必須有一個值,沒有值的就重復(fù)本身.例如:
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必須修改為:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" />
7.不要在注釋內(nèi)容中使用 "--","--" 只能發(fā)生在 XHTML 注釋的開頭和結(jié)束,也就是說,在內(nèi)容中它們不再有效.例如下面的代碼是無效的:
<!--這里是注釋-----------這里是注釋-->
用等號或者空格替換內(nèi)部的虛線:
<!--這里是注釋============這里是注釋-->
以上這些規(guī)范有的看上去比較奇怪,但這一切都是為了使我們的代碼有一個統(tǒng)一、唯一的標(biāo)準(zhǔn),便于以后的數(shù)據(jù)再利用.