认识DOCTYPE

iteye_6844

于 2009-12-24 17:04:11 发布

阅读量109

点赞数

分类专栏： javascript 文章标签： Chrome Firefox 浏览器 XHTML IE

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

认识DOCTYPE

带着问题入手：想获取浏览器可视高度，为什么利用document.body.clientHeight有时候会失效，上网搜索之后使用document.documentElement.clientHeight能解决，但有时候也会出问题。

当我们打开一个网页的源代码，一般我们会看到第一行都是<!DOCTYPE……，这样的文字，DOCTYPE后面的文字会有所差别，这个东西到底有什么用处呢？

这篇文章就来说说这个DOCTYPE。

1、通过搜索引擎，我们可以搜索到DOCTYPE的一些介绍，但总是怕别人讲的不全或者有问题，那就请访问http://www.w3.org/QA/2002/04/valid-dtd-list.html，这是W3C组织的官方网站上的介绍，里面很详细的列出了可供定义的DOCTYPE，我们一般用到的是如下3个：

<!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">

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

DOCTYPE描述主要就是告诉浏览器使用什么dtd来解析html代码，否则就会使用浏览器默认的来解析，会造成不同浏览器的显示样式不同。

以下是从手册上摘抄的规则：

语法：

HTML 顶级元素可用性 "注册//组织//类型标签//定义语言""URL"

可能值：

- 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

- 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL。

- 注册：指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。

- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETF IETF。 W3C W3C。

- 类型：指定公开文本类，即所引用的对象类型。 DTD 默认。DTD。

- 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。

- 定义：指定文档类型定义。

　　Frameset 框架集文档。

　　Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。

　　Transitional 包含除 frameSet 元素的全部内容。

- 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。

- URL：指定所引用对象的位置

为了获得正确的DOCTYPE声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果doctype声明指定的是html dtd，但文档包含的是xhtml 1.0 strict标记，同样是不恰当的。

2、DOCTYPE的用法，DOCTYPE描述都是放在页面的开始位置。

让我们来看一个例子：

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>test DOCTYPE</title>
 </head>
<style>
#test{
	border:1px dashed windowtext;
	height:20px;
	width:30px;
	padding:10px;
	margin:auto;
}
</style>
 <body>
  <div id="test">

  </div>
 </body>
</html>

这段代码在ie、firefox和chrome中打开的效果是，div居中。

但我们把DOCTYPE这段描述删除，看看效果如何。在firefox和chrome中效果没有变化，而在ie中就会发现div就在左边了，而并没有居中。当我们把margin:auto放到搜索引擎中进行搜索的时候，会有一堆人回答你用这个可以让div居中，但他们不会告诉你要使这个有效果的前提是有DOCTYPE。

但在ie中也会有情况是没有DOCTYPE才会起作用，我们看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>test DOCTYPE</title>
 </head>
<style>
#test{
	cursor:col-resize;
	height:200px;
	width:300px;
	position:absolute;
}
</style>

 <body>
  <div id="test">

  </div>
 </body>
</html>

本来的目的是想把test这个div上的鼠标手势修改为col-resize，但在ie中却发现不起作用，但我们把DOCTYPE描述删除掉之后就会发现生效了，而在Firefox中始终都有效。

修改方法如下：

（1）删除DOCTYPE描述；

（2）当然这里我们也可以保留DOCTYPE，在样式中增加background-color:#FFFFFF;就可以看到效果，而默认的background-color是transparent；

（3）position删除。

第2种解决方法在某些环境下不可行，div下面有一个背景图，那这个div设置了背景色就会影响效果；第3种方法基本上不考虑，设置这个position大部分时候都是程序所需。

这个大家可以在访问https://tools.alibaba-inc.com这些平台的首页的时候，那个分隔条拖动就是这个情况，我的解决方法是删除DOCTYPE。

3、transitinal.dtd、strict.dtd、frameset.dtd的区别

只是在写html标签的时候区别不是很大，我也就介绍一下对js代码的影响，由于现在的浏览器对html代码的容错能力很强，即使有语法错误也不会给与提示。

(1)frameset.dtd，如果我们的页面需要使用到frameset的话，需要使用这个dtd，否则都不允许使用；

(2)strict.dtd，严格的控制，使用这种模式之后，所有表现层的标签都不允许使用了，例如：br,b,i这些都属于表现层的标签。但目前的浏览器容错能力很强，不会强制报错，还是会正常的显示；

(3)transitional.dtd，过渡期控制，在strict的基础上兼容老的标签。

现在的浏览器解析html的时候，strict.dtd和transitional.dtd基本上没什么差别，如果严格按照W3C的约定去做的话，估计大部分网页在这种浏览器下都会变形，市场机会完全失去。

但我们去研究js的时候，会发现有没有定义DOCTYPE在某些js中产生的结果会不一样，请看例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>获取可视高度</title>
  <style>
  .info{
	background-color:#ad6a9e;
	padding:10px;
	color:#444444;
  }
  </style>
  <script>
function getHeight(){
	var ht = document.body.clientHeight;
	alert(ht);
}
  </script>
 </head>

 <body>
  <div class="info">
  中新网12月24日电 据国家气象局网站消息，受强冷空气影响，未来三天，中国大部地区自西向东将迎来一次寒潮天气过程，西北地区东部偏北地区、西北地区北部和中东部、内蒙古大部、华北、东北、黄淮、江淮等地将先后出现5～7级，阵风8级偏北风；冷空气前锋过后，上述大部地区的气温将下降8～12℃，其中内蒙古中部和东南部、陕西北部、山西北部、河北北部、辽宁西部、吉林西部的气温将下降14～16℃，部分地区降温幅度可达16～18℃。内蒙古东北部、东北地区等地的部分地区有大雪或暴雪。受另一股冷空气影响，25日，新疆北部将有5～6级、山口地区8～9级大风，气温在24日回升的基础上，将下降4～8℃。
  <input type="button" value="获取可视高度" οnclick="getHeight();"/>
  </div>
 </body>
</html>

ie6、firefox、chrome浏览器的最终结果如下：

浏览器	IE6	firefox 3.0.16	chrome
结果	96	97	100

显然这个不是我们想要的可视高度，倒像是这个网页中的内容高度。

那我们把DOCTYPE删除之后，再看看结果如何：

浏览器	IE6	firefox 3.0.16	chrome
结果	726	709	805

这3个值就是我们最终想要的浏览器的可视高度了。

但删除DOCTYPE不就违背了w3c的原则了么，那有没有办法不删除DOCTYPE，也同样可以获得正确的结果，我们来看下面这段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>获取可视高度</title>
  <style>
  .info{
	background-color:#ad6a9e;
	padding:10px;
	color:#444444;
  }
  </style>
  <script>
function getHeight(){
	var ht = document.documentElement.clientHeight;
	alert(ht);
}
  </script>
 </head>

 <body>
  <div class="info">
  中新网12月24日电 据国家气象局网站消息，受强冷空气影响，未来三天，中国大部地区自西向东将迎来一次寒潮天气过程，西北地区东部偏北地区、西北地区北部和中东部、内蒙古大部、华北、东北、黄淮、江淮等地将先后出现5～7级，阵风8级偏北风；冷空气前锋过后，上述大部地区的气温将下降8～12℃，其中内蒙古中部和东南部、陕西北部、山西北部、河北北部、辽宁西部、吉林西部的气温将下降14～16℃，部分地区降温幅度可达16～18℃。内蒙古东北部、东北地区等地的部分地区有大雪或暴雪。受另一股冷空气影响，25日，新疆北部将有5～6级、山口地区8～9级大风，气温在24日回升的基础上，将下降4～8℃。
  <input type="button" value="获取可视高度" οnclick="getHeight()"/>
  </div>
 </body>
</html>

就是把document.body修改为document.documentElement，测试的结果如下：

浏览器	IE6	firefox 3.0.16	chrome
结果	726	709	805

和上面的结果一致，测试通过。

那我们应该找到一种方法可以解决没有DOCTYPE以及有DOCTYPE都可以正确返回结果的，兼容性做到最好。

请看如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>compatMode</title>
 </head>

 <body>
  <script>
  document.write(document.compatMode);
  </script>
 </body>
</html>

保留DOCTYPE，页面显示的结果是CSS1Compat；而删除了DOCTYPE之后，看到的结果是BackCompat，由此我们可以得到结论，应该就是这个document.compatMode影响了我们的clientHeight结果。

既然找到原因，那么我们就把上面的获取clientHeight代码修改一下：

function getHeight(){
	var flag = document.compatMode == "CSS1Compat";
	if(flag){
		var ht = document.documentElement.clientHeight;
	}
	else{
		var ht = document.body.clientHeight;
	}
	
	alert(ht);
}

这样测试结果，不论是否删除，我们都可以获得正确的clientHeight，同样的clientWidth也是如此操作。

通过以上的介绍，我们知道了JS不仅有不同浏览器的兼容性问题需要考虑，不同的页面定义也会造成返回结果的变化，所以有以下几点值得注意：

（1）我们在编写页面的时候，都带上DOCTYPE这个声明，不要轻易的将其删除，除了使用frameset的地方，其他网页都使用transitional.dtd这种类型；

（2）在编写js的时候，在获取页面的clientHeight，clientWidth，scrollHeight，scrollWidth，scrollLeft，scrollTop这些属性的时候，都需要增加对document.compatMode的判断，这样才可以保证我们的js有更强的兼容性。