分享
 
 
 

在XHTML文档中合适的使用CSS和JavaScript

王朝html/css/js·作者佚名  2008-09-24
窄屏简体版  字體: |||超大  

在XHTML文档中合适的使用CSS和JavaScript

XHTML™ 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。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有