从HTML 到XHTML

1条评论

从HTML 到XHTML

XHTML是什么

编写WordPress系统时主要使用的是XHTML脚本语言。XHTML 1.0(目前使用最广泛的版本)在2000年已经成为W3C推荐标准,在XHTML 2.0 发布前,XHTML 1.0仍然可作为过渡工具。八年后,XHTML 2.0仍未现身。因此本文档中的XHTML仅针对XHTML 1.0。

XHTML与HTML非常相似,两者都源于一种名为SGML的语言。尽管如此,XHTML还来自于XML,XML是一种比HTML语法规则更严谨的脚本语言,而XHTML继承了XML的这一特征。XHTML与HTML的主要区别在于,XHTML使用了新的MIME类型,并添加了一些新的句法规则,这些规则将在下文中提到。

为什么要使用XHTML

WordPress从所有内部函数中输出XHTML,因此所有主题以及大多数插件使用的都是XHTML脚本。因此如果要使用WordPress平台,就应该多学习一些XHTML相关知识。

XHTML与HTML的区别

HTML仍然与XHTML有很大相关性,熟悉HTML的人了解到这一点都会很高兴。HTML与XHTML的主要差别在于,XHTML更加强调网页制作人员编程时的一致性与所编代码的可读性。两者也存在若干句法与语法上的差别,此外,XHTML还废除了一些HTML标签。如果用户熟悉掌握HTML,会发现从HTML转换到XHTML其实很容易,而且新的XHTML规则会让使用者成为更优秀的开发人员。

如何编写XHTML代码

以下是一份XHTML主要要求速查表,其中也列出XHTML与HTML的不同之处。注意:这不是完整XHTML语言参照,详细信息请查看这里

考虑到清晰度问题,以下示例省略了若干代码。

所有标签、属性以及值都必须使用小写字母

正确用法:

<a href="www.kilroyjames.co.uk" >  

错误用法:

<A HREF="www.kilroyjames.co.uk" >  

所有属性值都必须放在引号内

正确用法:

<a href="www.kilroyjames.co.uk" >  

错误用法:

<a href=www.kilroyjames.co.uk >  

所有标签都必须进行适当嵌套

正确用法:

<em>this emphasis just keeps getting <strong>stronger and stronger</strong></em>  

错误用法:

<em>this emphasis just keeps getting <strong>stronger and stronger</em></strong>  

所有XHTML文件都必须带有DOCTYPE定义

DOCTYPE是一个必须显示在每个XHTML文件起始处的强制代码段,DOCTYPE通知浏览器如何翻译文档。

DOCTYPE标签的规则:

  • DOCTYPE标签必须是文档中的第一个标签
  • DOCTYPE标签不是XHTML文件的一部分,不必为该标签添加结束斜线
  • DOCTYPE应指向一个名为DTD、具有有效定义的文件,该文件可通知浏览器如何读取文档
  • 正确写入DOCTYPE标签,否则文档将被引爆*(文档被分裂成一小块一小块被叫做“tag soup”的HTML代码)并失效。

*这不是开玩笑

有效的XHTML文件包括三种:Strict(严格类型), Transitional(过渡类型), Frameset(框架类型)。文件可以被验证为“strict”,但“strict”类型中不允许出现一些老式标签和属性,这时可以使用“Transitional”类型。

注意:用WordPress验证"Strict"类型时可能会出错,因为从2.6.2版本起,一些内部生成的<form>元素仍然使用"name"属性,如<input name="my_button" /> ,而在Strict DTD中这是不被允许的。

还有一点需要注意,Transitional DTD会让大多数浏览器脱离“标准”模式。浏览器不在标准模式下时,需要花费更多精力来使网站在不同浏览器上保持一致显示。由于DOCTYPE标签的细节知识更为复杂深奥,这里不做多余解释,你只需要记住,应该用下面任一种代码,最好是前一种(Strict类型)来达到最佳效果:

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

 

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

 

HTML标签必须包含XMLNS属性

用户无需了解"XML namespace"属性,只需要知道在所有XHTML文件中该属性都必须出现。如何编写该属性:

<html xmlns="http://www.w3.org/1999/xhtml">  

 

文件应由HTML,HEAD, TITLE与BODY标签以适当方式组成

在HTML中即使不用以上标签也可以编写网页,但在XHTML中则无法实现。XHTML必须包含以上标签,并且标签应以适当方式嵌套排列,如下所示(忽略DOCTYPE):

<html xmlns="http://www.w3.org/1999/xhtml">   
 <head>    
  <title></title>   
</head>      

<body>    
 <p>         
   See how the TITLE must be placed in the document HEAD – the TITLE is considered 
to be a "required child" element of the HEAD.
 Notice that the HEAD must also appear before the document BODY. 
Notice also how both the HEAD and the BODY must be contained
 within the HTML tag. Again, HEAD and BODY are "required child"
 elements of the HTML tag. Finally, notice that this text is 
written within a <p>paragraph</p> tag; in XHTML you may 
not write text directly in the BODY tag without using a suitable 
container tag, such as <p> or <div>.    
  </p>   
 </body>  
</html>  

所有标签都应闭合,包括单个标签

<p>Mary had a little lamb  
<p>It's fleece was white as snow  

以上代码省略了结尾的</p>标签,是无效XHTML代码。以下是正确代码形式:

<p>Mary had a little lamb</p>  
<p>It's fleece was white as snow</p>  

在XHTML中即使单个标签也应闭合——任何标签都不例外。

<p>   
 Mary had a little lamb <br>   
 It's fleece was white as snow  
</p>  

<br>标签未闭合,因此以上代码也是错误的。要闭合类似<br> 以及<hr>等单个标签,只需要在后括号前添加一条左斜线,如:<br />以及<hr />(可空格)。更正以上代码:

<p>   
 Mary had a little lamb <br/>   
 It's fleece was white as snow  
</p>  

这样就是正确的XHTML代码了。

不允许属性简写

在HTML中属性可以连串表示,如<dl compact>,感觉像是关键字,这被称为属性简写(attribute minimisation)。在XHTML中这是不被允许的,必须明确表示属性和值,如:

<dl compact="compact">  

ID与NAME属性

HTML中允许交替使用ID和NAME属性。XHTML废除了NAME属性。因此任何情况下需要使用NAME属性时都要用ID属性来替代,如:

正确的HTML代码形式:

<input type="submit" name="s" value=" Search " >  

正确的XHTML代码形式:

<input type="submit" id="s" value=" Search " />  

在HEAD中声明STYLE

XHTML不允许在文件正文中声明STYLE,所有STYLE声明都应该在文件的HEAD中完成。

实体引用

将所有&的文字标记写为&amp,否则XHTML会将其视为实体引用的一部分,如 &reg; 是符号®的实体引用。因此M&S是无效的XHTML代码,因为&S不是实体引用,必须写成:M&amp;S。

总结

上文中提到过,这不是详细参照,但足够让用户了解XHTML并迅速上手了。祝你好运!

XHTML的不足

大多数人没有意识到要能够熟练操作XHTML还需要使用新的MIME 类型 "application/xhtml+xml"。通过MIME类型的描述,服务器会将它们发送的多媒体数据的类型告诉浏览器。例如,发送JPG图像时会带有一个"image/jpeg"MIME类型,而发送HTML文件时MIME类型为"text/html"。发送XHTML文件时若MIME类型为"text/html",会导致文件按HTML格式被解析并验证,而不是想象中的XHTML格式。因此使用XHTML时必须标注正确的MIME类型,否则就相当于使用不标准的HTML。为避免这一问题出现并输出标准代码,可以使用 XHTML to HTML wordpress 插件

HTML 5

为了解决XHTML发展中看似棘手的问题(主要是XHTML2无法兼容XHTML、HTML之前的版本以及MIME类型),HTML5,这个由Mozilla (Firefox), Apple (Safari), Opera, Microsoft (Internet Explorer) 以及一些其它互联网核心公司共同支持的、XHTML强大的竞争对手,传承了HTML 4.01的成功并成为非常受欢迎的脚本语言。

2008年1月,HTML5被批准为W3C拟定推荐标准,几年后它将成为真正的W3C推荐标准。

外部资料

#1
学习了!!