XHTML 1.0 Transitional WEB标准产生的有关问题 _Web前端

XHTML 1.0 Transitional WEB标准产生的问题

曾经流行一时的HTML标记语言已经被官方认为过时了，将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML规则书写，那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器，跨设备以及跨平台的一致性支持。

XHTML有如下两个主要目标：

将文档的结构（使用XHTML标记语言）和表现（使用CSS）分开
将HTML作为一种XML书写

对于第一个目标，W3C删除了一些HTML的标记以及属性，例如<font>和bgcolor，因为这些标记或属性并不是文档结构中的一部分，而只是用来描述文档应该如何被显示，因此应该定义在CSS文件中而不是HTML中。同样，某些特定的标记内容并不一定要显示成特定的样子。比如，<h1>标记里内容显示的字号完全可能小于<p>里的内容，这些取决于CSS中的定义。当然，<h1>一般用于显示一篇文档的标题信息，它的重要程度一般也应该高于<p>中的内容，所以通常的浏览器都会以一个较大的字号来显示。

对于第二个目标，XHTML将严格遵守XML的严格语法。可以说XHTML是HTML依照XML语法重构的结果。换句话说，当你编写XHTML文档的时候，其实是在编写一份特化了的XML文档。XML文档有着比HTML严格多了的语法，这些将在本文稍后部分讨论。

XHTML有三个版本：

XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset

XHTML 1.0 Transitional包含HTML4.01的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML开发者更容易的接受并使用XHTML。

XHTML 1.0 Strict就是严格版本的XHTML了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS控制页面的显示而不是使用<font>，bgcolor之类的标记或属性。

XHTML 1.0 Frameset用于把文档分割成几个桢以显示不同的内容。（XHTML 1.0 Transitional和Strict?页面不允许包含<frameset>?标记）。

这里不再赘述更多有关XHTML的介绍，如果感兴趣，可以使用Google或者MSN Search找到很多相关资料或是详细介绍。也欢迎在本贴下留下您的评论与问题，让我们共同探讨。接下来是一些书写XHTML的基本规则。

一个XHTML页面必须是一个组织完善的并且合法的XML文档。XHTML 1.0 recommendation?的第四部分详细介绍了HTML与XHTML的若干不同点，正力柱来最为重要的有如下十条：

页面必须包含一个合法的XHTML DOCTYPE。

一个合法的XHTML页面必须再起其他内容出现前包含XHTML DOCTYPE定义。当你在Visual Studio 2005或者Microsoft Visual Web Developer中创建一个新的ASP.NET页面时。一个合法的XHTML 1.0 Transitional DOCTYPE已经被自动加入到页面当中了。下面是四种标准的XHTML DOCTYPE：

XHTML 1.0 Transitional

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

XHTML 1.0 Strict

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

XHTML 1.0 Frameset

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

XHTML 1.1

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">?

不同的XHTML DOCTYPE也将决定浏览器将如何显示某些特定的内容，这些将会在今后几篇文章中讨论。

页面的根节点必须指定XHTML的命名空间。

<html>标记必须指定一个默认的命名空间。例如一个XHTML 1.0 Transitional页面应该有如下声明：

<html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en"?lang="en">?

所有的标记以及属性名称必须为小写字母。

XML语法是大小写敏感的，所以<div>与<DIV>是不同的标记，当然，只有<div>是合法的XHTML标记。

属性值必须书写于一对引号内。

引号可以为双引号，也可为单引号。如下声明是不合法的：

<a?href=Page.aspx>Link</a>?

?

这里缺少了包围Page.aspx的引号，应当如下书写：

<a?href="Page.aspx">Link</a>?

?

Visual Studio 2005?和Visual Web Developer可以自动把属性值用引号括起来。这一功能可以在Tools,?Options,?Format中设定。

所有非空的标记必须成对出现。

也就是说，单独的<p>或者<br>都是不合法的，需要有相应的闭合标记。
这里特别要说明的是常用的<br>标记。满足XHTML语法的换行标记应该为<br></br>或者简写为<br />，然而在一些浏览器中会把<br></br>中的</br>视为错误拼写的<br>标签，并尝试加以更正为另一个<br>，这样就造成了两个换行。为了避免这些不必要的麻烦，推荐书写为<br />。同样需要注意的是有些浏览器不能识别<br/>（注意'/'前没有空格），所以不要忘记在'/'前加上一个空格。

标记不可以重叠。

标记可以嵌套，但是不能重叠。如下声明是合法的：

<b><i>This?is?bold?and?italic</i></b>?

?

而如下包含重叠的声明是不合法的：

<i><b>This?is?bold?and?italic</i></b>?

属性不可以简写。

所有的属性必须指定值。例如一种常见的写法

<input?type="checkbox"?checked?/>

在XHTML中是不合法的，因为checked属性没有值与其对应。应该改写成

<input?type="checkbox"?checked="checked"?/>

使用id属性，而不是name属性。

在HTML中，name属性可以用来标识identify?<a>,?<applet>,?<form>,?<frame>,?<iframe>,?<img>和?<map>标记。XHTML 1.0 Strict和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。

属性值中空格的处理。
属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如如下两个属性的值相同：
<input?value="HTML?is?out"?/>
<input?value="???HTML????????is
???? out????"?/>
<script>和<style>标记的内容必须被包围在CDATA段中。

例如：

<script?type="text/javascript">?
<![CDATA[?
function?func(a,?b)?
{
if?(a?<?b)?
???return?true;?
}?
]]>?</script>

注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会被误认为是另一个XHTML标记的开始，引起一些不必要的错误。

需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用JavaScript注释来避免：

<script?type="text/javascript">?
/*?<![CDATA[?*/
function?func(a,?b)?
{
?if?(a?<?b)?
???return?true;?
}?
/*?]]>?*/
</script>

或者

<script?type="text/javascript">?
//?<![CDATA[?
function?func(a,?b)?
{
????if?(a?<?b)?
??????return?true;?
}
//?]]>
</script>?

当然，最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。

附：

问题一、标准模式下document.body.clientHeight 与 document.body.srcollTop取不到需要的值的问题

在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0

解决办法：使用document.documentElement 代替document.body

问题二、CSS定义在 loose.dtd和xhtml1-transitional.dtd下无效的问题：
如：

body{
SCROLLBAR-FACE-COLOR: #f2f2f2;?
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;?
SCROLLBAR-SHADOW-COLOR: #999999;?
SCROLLBAR-3DLIGHT-COLOR: #999999;?
SCROLLBAR-ARROW-COLOR: #999999;?
SCROLLBAR-TRACK-COLOR: #ff0000;?
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

解决办法就是

html,body{
SCROLLBAR-FACE-COLOR: #f2f2f2;?
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;?
SCROLLBAR-SHADOW-COLOR: #999999;?
SCROLLBAR-3DLIGHT-COLOR: #999999;?
SCROLLBAR-ARROW-COLOR: #999999;?
SCROLLBAR-TRACK-COLOR: #ff0000;?
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

出处：http://www.techmango.com/blog/article.asp?id=403