上一篇:用好超级链接标记—A >>
正确使用XHTML的冒险以及解决办法
请注意这不是一篇讨论支持或反对使用xhtml的文章。我只是写下我所知道的潜在的易犯错误,并且让你自己来决定自己的选择:html 4.01,为所有浏览器伺服为text/html的xhtml 1.0或者为能够处理其的浏览器伺服为application/xhtml+xml而其他浏览器则伺服为text/html的xhtml 1.0。否则有些东西会完全不一样。
每当我遭遇到它们发生的场合,我开始了解一个又一个的问题。有些情况下我必须花很多时间来查找问题并且在找到解决办法之前求助于其他人。但我在其中学到不少东西,我将把我已经使用xhtml后应该知道的都告诉你。
注意我这里提及的问题只会发生在能正确处理application/xhtml+xml mime类型的用户代理中,而因此xhtml被作为xml。这也可能是这里不提及xhtml的早期使用的原因——很少有人使用这样的浏览器,所以几乎不会有人因只伺服为text/html的xhtml所烦忧。
今天,实际上把xhtml伺服为application/xhtml+xml正慢慢变得平常。我所知道的理由有两个:
1. 使用firefox,mozilla,opera。safari和其他兼容xhtml浏览器的人数增加了很多,所以你不再仅仅为自己和伙伴这样做。嗯。或许你就这样做,当将影响更多人。
2. 在web开发者之间,对xhtml的真正面目是什么的觉醒越来越多了。使用xhtml已经有多次多时的热烈的讨论,尤其是伺服为text/html的时候。如果你参与了任何一次讨论,你知道我在说什么。
假如你,像我,决定实现某些类型的content negotiation和在传送xhtml的时候使用正确的媒体类型,你需要知道什么能(和将)在你发布的文档中发生,并且知道怎样避免问题的发生。对于对content negotiation同进行content negotiation的脚本例子有兴趣的读者,我推荐你阅读content negotiation和serving up xhtml with the correct mime type(本站早有翻译:使用正确的mime类型伺服xhtml)。还有很多这种类型的文章,但这是我读到的最精彩的两篇。
每一个基本的教程都有一些html和xhtml的明显区别:元素和属性名字使用小写,属性值总要用引号。不要使用简化属性,确保所有的元素都有结束标签和没有不正确的嵌套等等。但是,当xhtml伺服为application/xhtml+xml时还需要知道更多东西。
良构是必须的
文档必须是良构(well-formed)的xml(跟合法的(valid)xhtml不必然相同)。对错误没有妥协,没有机会。如果文档不良构,符合标准的浏览器(当前我知道mozilla,firefox,netscape,camino,opera,safari和omniweb——相当多的浏览器除了ie)将会显示一条错误信息和在某种方式或其他方式上中止处理文档。
此外,这还意味着不再未编码的“&”号。
xml声明可能是必须的
如果要使用除了utf-8或者utf-16字符编码,xml声明是必须的除非http头已经提供编码。
在http头中是否要指定字符编码有些模糊,architecture of the world wide web, volume one: media types for xml如此陈述
总体上,不应该在协议头为xml数据指定字符编码因为数据本身已描述。
另一方面,xhtml 1.0, second edition: character encoding说:
为了让文档使用指定的字符编码,最好的办法是保证web服务器发送正确的头。
就是说,在xml声明中指定字符编码是好的习惯:
<?xml version="1.0" encoding="utf-8"?>
只有五个实体是安全的
只有五个预定义的实体(<、>、&、 "和')的支持是有担保的。其他的可能完全被忽略或者直接输出。比如,如果xhtml文档包含如 或者”的实体,safari会生成。直接地。opera反而选择忽略未知的实体,同时mozila家族会认得这些实体并且就像html中“如果文档引用公共的映射浏览器伪dtd目录中的标识符并且没有单独声明的文档” 来处理。
使用utf-8字符编码是备受推荐的最好实践,让你(几乎)可以使用你需要键入文档的任意字符,不需要实体或者字符编号。如果你不能或不愿使用utf-8,数字式的字符编号是可以支持和安全使用的。
sgml式注释的内容可能会被忽略
sgml注释(html风格注释, <!-- 注释 -->)可能会(并且会)被浏览器当作注释,就算是在script或者style元素内部使用。
在html中,普遍地把sript和style块的内容装入注释中,为的是在不认识script或者style元素的浏览器中隐藏他们,并且在页面上把其内容生成平白文本。
在xhtml中,这样做会引起浏览器忽略掉注释里的任何内容。
在老旧的浏览器中隐藏script和style元素的实践是退回到1990年代中期的一个习惯。我的经验是,有如此表现的浏览器是十分罕见的,所以你可以安全地忽略它们,并且停止在脚本和样式中装入sgml式注释,就算你使用的是html。
脚本和样式元素的内容也被当作xml
样式和脚本元素是pcdata(parsed character data,解析字符数据)块,不是cdata(character data,字符数据)块。因此,在其内看起来像xml的任何东西都会被当作xml来解析,并且会引发错误除非是良构的。
为了在stylee或者script块中使用<、&或者--,你需要用cdata部分来包裹其内容:
1. <script type="text/javascript">
2. <![cdata[
3. ...
4. ]]>
5. </script>
在cdata部分内,你可以任何顺序的字符,它们不会被当作xml来解析(除了结束cdata部分]]>。)
需要以text/html发送的文档中,cdata部分的起始和结束标签需要注释掉,以便在不能处理cdata部分的浏览器中隐藏:
1. <script type="text/javascript">
2. // <![cdata[
3. ...
4. // ]]>
5. </script>
1. <style type="text/css">
2. /* <![cdata[ */
3. ...
4. /* ]]> */
5. </style>
如果要确保够老的浏览器隐藏cdata部分,需要使用更为复杂的方法,像在ian hickson的sending xhtml as text/html considered harmful中描述的那样:
1. <script type="text/javascript">
2. <!--//--><![cdata[//><!--
3. ...
4. //--><!]]>
5. </script>
1. <style type="text/css">
2. <!--/*--><![cdata[/*><!--*/
3. ...
4. /*]]>*/-->
5. </style>
一个更好的办法可能是在发送text/html的文档前使用content negotiation脚本来删除任何cdata部分。
当然,最聪明和安全的途径是把所有的css和javascript都移动到外部文件中,但不总是现实的做法。
没有会自动补全的元素
在html中,假如表格的tbody元素漏写的话浏览器会自动补全,而xhtml不会。如果你没有清楚地添加tbody,它就不会出现。在编写css选择器和javascript的时候请铭记在心。
用document.write编写的脚本不再工作
在xhtml中使用javascript,document.write不会工作。ian hickson在why document.write() doesn’t work in xml(本站早已翻译:为什么document.write在xml中不工作)解释了原因。你需要使用document.createelementns()代替。关于更多可以在experts exchange中的论坛主题中找到。
这也是google adsense不在xhtml中工作的原因之一。那些希望以application/xhtml+xml伺服xhtml并且使用google广告的人,这儿有一个解决办法:simon jessey的 making adsense work with xhtml(本站早有翻译:使google广告adsense在xhtml中工作)。尽管有点麻烦,但还是工作了(我在这里也使用了),同时被google所认可。
引入样式元素
在xhtml中,为了兼容定义css规则的xml方法,你应该使用xml样式表声明(访问 xhtml 1.0, second edition: referencing style elements when serving as xml的xml样式表声明和associating style sheets with xml documents的xml-stylesheet处理说明)。要载入外部css文件,我们需要使用style元素,同时应该使用xml样式表声明来引入样式元素。为此,使用id属性给style元素一个分解的标识符,然后在xml样式表声明中引入该标识符:
1. <?xml-stylesheet href=”stylesheet1.css” type=”text/css”?>
2. <?xml-stylesheet href=”#stylesheet2” type=”text/css”?>
3. <!doctype html
4. public “-//w3c//dtd xhtml 1.0 strict//en”
5. “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>
6. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
7. <head>
8. <title>xml stylesheet declaration</title>
9. <style type=”text/css” id=”stylesheet2”>
10. @import “stylesheet2.css”;
11. </style>
12. </head>
我不知道在实际中究竟有多必要,比且不使用xml样式表声明的话会有什么问题。或许有人会指点我的。
css的应用规则有些不一样
css应用到body的性质(property)并不应用到xhtml的整个文档。最值得注意的是应用背景颜色或者图片。在html中,应用到body元素的背景将会覆盖整个页面。在xhtml中,你必须同时样式化html。在juicy studio的 css body element test中有这个行为的演示。
在xhtml中作为css规则的元素和属性名字是大小写敏感的(而且必须是小写的)。避免问题最简单的办法是,不管在html,xhtml还是css中所有东西都保持小写。
有挑战,但不是不可能
当我开始为兼容的浏览器伺服xhtml为application/xhtml+xml时,在作出决定前假如我能读到想这篇一样的文章,或许我的头痛可以减轻不少。我甚至考虑使用html 4.01 strict。虽然如此,我还是从经验中学到不少,而学习总是一个好东西。
正确地使用真正的xhtml,十分希望这篇文章能为你提供一些更有用的信息,并且可以为是否需要走这条路提供更多有根据的决定。
html和xhtml可能比我在这里提到的还有更多地不同,所以在这里把你在使用application/xhtml+xml的xhtml时遇到的问题提出来,如果你知道任何的错误或者忽略,务必告诉我。
更易阅读格式请点击http://neoone.51.net/tech/perils.php
()
下一篇:制作虚线效果的水平线 >>
相关文章:
- · CorelDraw教程《翠鸟》
- · 体验CorelDraw12智能绘图工具
- · CorelDRAW 12的“捕捉”功能
- · CorelDRAW绘制立体包装盒
- · 运用CD中的仿制功能绘制酒瓶造型
- · 用CorelDRAW设计彩色平面布置图
- · CorelDRAW大幅面打印三步曲
- · 春雨下的浪漫—设计一把心爱的雨伞
- · CD 里段落文字如何转曲线
- · CorelDRAW 12绘束小花送给她
- · CorelDRAW轻松绘制螺旋削皮
- · 蕾羽卡通造型设计系列
- · 点阵图在矢量软件CD中的应用技巧(技巧篇)
- · 教你用CorelDRAW绘制米老鼠
- · 形状编辑与交互式设置——花蝴蝶
- · 线条基础训练——笔记本制作
- · CorelDRAW创建啫喱文字
- · CorelDRAW变形工具应用实例
- · CorelDRAW 12循序渐进(18)-应用滤镜
- · CorelDRAW 12循序渐进(17)-位图处理
- · CorelDRAW 12循序渐进(16)-透镜效果
- · CorelDRAW 12绘制金钱宝藏
- · CorelDRAW 12循序渐进(15)-交互式工具组
- · CorelDRAW 12循序渐进(14)-交互式填充工具
- · CorelDRAW 12循序渐进(13)-制作文本效果
- · 标识设计动感文字变形特效
- · CorelDRAW 12循序渐进(12)-文本处理
- · CorelDRAW 12循序渐进(11)-符号功能
- · 标志的空间设计
- · CorelDRAW 12循序渐进(10)-对象的编辑
- · CorelDRAW实例:齿轮绘制(5)
- · CorelDRAW实例:齿轮绘制(4)
- · CorelDRAW实例:齿轮绘制(3)
- · CorelDRAW实例:齿轮绘制(2)
- · CORELDRAW中快捷键的应用和设置
- · CorelDRAW实例:齿轮绘制(1)
- · 图像格式入门:色彩配对与Gamma值校正
- · 真刀真枪实战CorelDRAW10(7)
