如何正確地在XHTML文檔中使用JavaScript和CSS
發(fā)布時(shí)間:2009-05-19 18:37:03 作者:佚名
我要評(píng)論

可擴(kuò)展性超文本標(biāo)記語(yǔ)言XHTML1.0第2版定義XHTML可以將HTML4.0轉(zhuǎn)換為XML1.0格式。
在越來(lái)越多的網(wǎng)站中,XHTML的使用正以很快的速度替代HTML4,但是,目前一些主流瀏覽器對(duì)XHTML的支持還不是很好,加上一些網(wǎng)頁(yè)制作者對(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頁(yè)面被以text/html的MIME格式解析時(shí),它和HTML頁(yè)面沒(méi)有任何差別,而當(dāng)它以text/xml或者application/xhtml+xml的MIME格式解析時(shí),它將遵從嚴(yán)格的XML書(shū)寫(xiě)和顯示規(guī)則。
正確的XHTML格式是一個(gè)XML程序并且在書(shū)寫(xiě)的時(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)容中的問(wèn)題
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>
上面的示例說(shuō)明了如何在瀏覽器中忽略注釋標(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+
不顯示該文檔.(參見(jiàn):https://developer.mozilla.org/Ta ... _in_XHTML_Documents )
style和javascript內(nèi)含有兩個(gè)連續(xù)的橫杠(--)
在XHTML頁(yè)面的JavaScript中使用注釋標(biāo)簽進(jìn)行處理時(shí)產(chǎn)生的另一個(gè)問(wèn)題就是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ù)的橫杠的問(wèn)題,不過(guò)這將使得一些低版本的瀏覽器不支持它,因?yàn)樗鼈儾荒芾斫釾ML。好在,我們可以通過(guò)使用JavaScript中的注釋符對(duì)CDATA塊進(jìn)行注釋以達(dá)到兼容的目的。
<script type="text/javascript">
//<![CDATA[
var i = 0;
while (++i < 10)
{
// ...
}
//]]>
</script>
推薦的xhtml與html兼容處理方式
不要在XHTML頁(yè)面中直接書(shū)寫(xiě)style和script,一個(gè)好的替代方案是使用外部文件來(lái)書(shū)寫(xiě)CSS和JavaScript,然后再在XHTML中進(jìn)行引入。
這個(gè)推薦方案看起來(lái)非常不錯(cuò),不管怎樣,它使得頁(yè)面從text/html向application/xhtml+xml轉(zhuǎn)變的過(guò)程中,至少在接下來(lái)的這些年里不會(huì)出現(xiàn)什么問(wè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頁(yè)面被以text/html的MIME格式解析時(shí),它和HTML頁(yè)面沒(méi)有任何差別,而當(dāng)它以text/xml或者application/xhtml+xml的MIME格式解析時(shí),它將遵從嚴(yán)格的XML書(shū)寫(xiě)和顯示規(guī)則。
正確的XHTML格式是一個(gè)XML程序并且在書(shū)寫(xiě)的時(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)容中的問(wèn)題
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>
上面的示例說(shuō)明了如何在瀏覽器中忽略注釋標(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+
不顯示該文檔.(參見(jiàn):https://developer.mozilla.org/Ta ... _in_XHTML_Documents )
style和javascript內(nèi)含有兩個(gè)連續(xù)的橫杠(--)
在XHTML頁(yè)面的JavaScript中使用注釋標(biāo)簽進(jìn)行處理時(shí)產(chǎn)生的另一個(gè)問(wèn)題就是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ù)的橫杠的問(wèn)題,不過(guò)這將使得一些低版本的瀏覽器不支持它,因?yàn)樗鼈儾荒芾斫釾ML。好在,我們可以通過(guò)使用JavaScript中的注釋符對(duì)CDATA塊進(jìn)行注釋以達(dá)到兼容的目的。
<script type="text/javascript">
//<![CDATA[
var i = 0;
while (++i < 10)
{
// ...
}
//]]>
</script>
推薦的xhtml與html兼容處理方式
不要在XHTML頁(yè)面中直接書(shū)寫(xiě)style和script,一個(gè)好的替代方案是使用外部文件來(lái)書(shū)寫(xiě)CSS和JavaScript,然后再在XHTML中進(jìn)行引入。
這個(gè)推薦方案看起來(lái)非常不錯(cuò),不管怎樣,它使得頁(yè)面從text/html向application/xhtml+xml轉(zhuǎn)變的過(guò)程中,至少在接下來(lái)的這些年里不會(huì)出現(xiàn)什么問(wèn)題。
相關(guān)文章
JavaScript應(yīng)用程序設(shè)計(jì):使用Node HTML5和現(xiàn)代JavaScript類(lèi)庫(kù)打造穩(wěn)健
本書(shū)帶領(lǐng)專(zhuān)業(yè)JavaScript開(kāi)發(fā)人員領(lǐng)略創(chuàng)**應(yīng)用程序的所有必要步驟,介紹用現(xiàn)實(shí)示例應(yīng)用程序幫助你掌握相關(guān)的概念。學(xué)習(xí)如何創(chuàng)建JavaScript應(yīng)用程序,進(jìn)而同提供更好的用戶體2016-11-03CSS插件工具箱-使用JAVASCRIPT和HTML5編寫(xiě)的100個(gè)CSS動(dòng)態(tài)網(wǎng)站插件 PDF
本書(shū)包含了100個(gè)可用于創(chuàng)建動(dòng)態(tài)Web內(nèi)容的現(xiàn)成CSS插件。所有這些插件都配有HTML例子和顯示最終效果的屏幕快照。2014-07-31使用純css禁用html中a標(biāo)簽無(wú)需JavaScript
時(shí)至今日,依然沒(méi)有找到使用純css禁用a標(biāo)簽的辦法,難道真的必須要借助JavaScript嗎?其實(shí)不然,方法有很多,下面為大家介紹下通過(guò)js、jquey以及css來(lái)實(shí)現(xiàn)禁用a標(biāo)簽2014-05-13使用javascript和HTML5 Canvas畫(huà)的四漸變色播放按鈕效果
這篇文章主要介紹了使用javascript和HTML5 Canvas畫(huà)的四漸變色播放按鈕效果,需要的朋友可以參考下2014-04-10使用html5+css3來(lái)實(shí)現(xiàn)slider切換效果告別javascript+css
提到slider,過(guò)去一直都是用css+js來(lái)配合實(shí)現(xiàn)相關(guān)的切換效果。聽(tīng)過(guò)大家一直討論使用html5+css3的實(shí)現(xiàn)方式,自己卻一直沒(méi)有動(dòng)手實(shí)現(xiàn)過(guò)。好吧,這次我有時(shí)間來(lái)玩下css3了,感2013-01-08使用HTML,CSS,JavaScript開(kāi)發(fā)Android應(yīng)用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已經(jīng)擁有所需的工具開(kāi)發(fā)Android應(yīng)用程序。本動(dòng)手本書(shū)展示了如何使用這些開(kāi)源web標(biāo)準(zhǔn)設(shè)計(jì)和建造,可適應(yīng)任何Android設(shè)備的應(yīng)用程序 -2011-06-17- 這篇文章主要介紹了在HTML中使用JavaScript實(shí)例代碼,需要的朋友可以參考下2017-08-03