codecamp

如何将你的网站升级至 XHTML ?

首先我们为什么要将网站升至XHTML,因为XHTML是一种更加严格和更加纯净的HTML版本,它是由XML和HTML组合而成的,XML是用来装载数据的,标签必须被正确地标记,而HTML是用来显示数据的,因此将两者的长处结合起来,就有了XHTML。在一般的网站中,有部分的代码没有按照HTML的规则也依旧可以运行,这样子不利于文档的维护,导致不良的文档结构形式,而XHTML是W3C的一种标准,它的目标就是逐渐替代HTML版本的,而且现代的浏览器完全支持XTHML,现在以及以后的发展趋势也会以XHTML为准,所以将网站升至XHTML是一种必然的趋势。


为了将站点从 HTML 转换为 XHTML,你首先应该熟悉前几章讲解的 XHTML 语法规则


从 HTML 转换为 XHTML的具体步骤:

  1. 添加文件类型说明
  2. 小写的标签和属性名
  3. 给所有属性加上引号
  4. 空标签:<hr> , <br>  <img>
  5. 验证站点


仔细地遵循W3C的兼容性准则,用户代理(Web浏览器)应该能够像HTML或XHTML一样轻松地解释文档。


一、添加文件类型说明


将下面的文件类型声明复制到文档的首行:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意:本站 (W3Cschool) 使用的是严格的 DTD。对于初学者来说,我们可以使用transitional(过渡)类型的,因为使用strict(严格)类型可能就显得有点"严格"了。


关于文件类型声明的一点提示

如果你希望将页面验证为正确的 XHTML,那么页面中必须含有文件类型声明。

需要注意的是,根据不同的文件类型声明,新式的浏览器对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明,那么它会按照“恰当”的方式来处理文档。如果没有了DOCTYPE,文档或许以不同的方式显示出来。


二、小写的标签和属性名


由于 XHTML 对大小写敏感,同时也由于 XHTML 仅接受小写 HTML 标签和属性名,因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。我们一直在自己的网站使用小写字母,因此基本上,替换功能没有太多地派上用场。


三、给所有属性加上引号


由于 W3C XHTML 1.0 标准中要求所有的属性值都必须加引号,所以,如果以前没有注意到这个细节,你需要逐页地对网站进行检查。这是一项费时的工作,所以绝不要再忘记为属性值加引号了。


四、空标签:<hr> , <br> 和 <img>


在 XHTML 中是不允许使用空标签(Empty tags)的。<hr><br> 标签应该被替换为 <hr /><br />。

这样做又产生了一个新问题,Netscape 会误读 <br/> 标签。我们不清楚原因所在,不过将之改为 <br />后就没有问题了。认识到这一点后,你需要再一次通过搜索和替换功能对标签进行更改。

其他一些标签(比如 <img> 标签)也会碰到上述同样的问题。不要使用闭合标签来关闭 <img>,而是要在标签的末端添加 / >


五、验证站点


做完所有这一切以后,使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证:XHTML Validator。接下来,可能还会有少数的错误被发现,逐一对这些错误进行(手工地)修正。我们的经验是,最容易犯的错误是在列表中漏掉了 </li> 标签。

我们应该使用转换工具吗(比方说 TIDY)?对,我们本可以使用 TIDY。

Dave Raggett 的 HTML TIDY是用来清理HTML代码的免费工具。在处理那些由专门的 HTML 代码编辑器和转换工具生成的难以阅读的HTML代码方面,TIDY 还是做得很棒的。同时,它可以帮助你发现站点中哪些地方需要投入更多精力,使得对于残疾人士,网页具有更强的易用性。

我们没有使用 Tidy 是出于什么原因呢?当我们开始创建这个网站时,我们已经对 XHTML 非常地熟悉。当时我们已经知道使用小写标签以及为属性加引号。所以在网站测试的过程中,我们只是简单地通过 W3C 的 XHTML 验证器进行了测试,并修正了少许的错误。更重要的是,我们已经学到了很多关于编写 Tidy 式 HTML 代码的知识。


注意:


  1. XHTML文件的开始要声明DTD。
  2. 你需要为你的<html>标签添加一个命名空间。
    关于DTD和命名空间的内容请参照XHTML教程——XHTML DTD
  3. 所有的标签和标签的属性都必须小写,属性值可以大写。
  4. 属性值必须用引号括起来。单引号双引号均可。
  5. 所有的标签都必须被关闭,空标签也不例外。关闭空标签的方法如下:
    HTML中的<br />要写成<br/>。注意,后面加了一个空格” “和一个反斜杠”/“。
  6. 如果你使用的是strict.dtd。也就是最严格的XHTML,那么许多定义外观的属性都将不被允许。
    例如你为图片添加链接的同时想去掉边框。不可以再使用<img src="..."border="0">,而是必须通过CSS来实现。我们推荐您在使用strict.dtd时,舍弃所有的定义外观属性,而完全使用CSS来定义页面外观。
  7. 每个图片都应该提供alt文本。

课外阅读


如果您希望更深入的理解利用 XHTML 对页面进行结构化的知识,请阅读《XHTML 结构化》。


XHTML DTD三种文件类型声明
如何从XHTML迁移到HTML
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

XHTML 测验

XHTML 参考手册

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }