`
bazhuang
  • 浏览: 147165 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

认识DOCTYPE

阅读更多

认识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标记,同样是不恰当的。

 

2DOCTYPE的用法,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>

 

 

这段代码在iefirefoxchrome中打开的效果是,div居中。

但我们把DOCTYPE这段描述删除,看看效果如何。在firefoxchrome中效果没有变化,而在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-colortransparent

 3position删除。

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

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

 

 3transitinal.dtdstrict.dtdframeset.dtd的区别

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

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

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

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

 

现在的浏览器解析html的时候,strict.dtdtransitional.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="获取可视高度" onclick="getHeight();"/>
  </div>
 </body>
</html>

 

 

ie6firefoxchrome浏览器的最终结果如下:

浏览器

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="获取可视高度" onclick="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的时候,在获取页面的clientHeightclientWidthscrollHeightscrollWidthscrollLeftscrollTop这些属性的时候,都需要增加对document.compatMode的判断,这样才可以保证我们的js有更强的兼容性。

 

分享到:
评论

相关推荐

    DOCTYPE和XHTML的相关认识

    Web 标准使您能通过最少的工作,生成可被最广大受众访问的 Web 站点。Web 标准的承诺是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作

    解读html5关于html5的应用与认识

    • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:&lt;!DOCTYPE html&gt;。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 &lt;html&gt; 中使用 xmlns 或 xml:lang 标记。 &lt;...

    整体认识mybatis和mybatis的体系结构1

    DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/d

    水果忍者HTML5+JS源码

    说起《水果忍者》,恐怕没几个人不认识的吧。它是 iOS、Android 等手机平台上一款极受欢迎的休闲游戏,不得不说,它简单有趣的“切水果”方式真心讨好了不少人,无论是男女老少,多少都有几个人喜欢无聊时砍几把~ ...

    WEB标准学习,认识两种网页声明的含义

    DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd&gt; &lt;!DOCTYPE ...

    HTML教程,认识optgroup元素

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;title&gt;runcode&lt;/title&gt...

    自己整理的一些HTML的基础知识,如果能够帮助到你们,我就很开心啦

    一.HTML定义 超文本标记语言二....DOCTYPE html&gt; 描述当前文件的版本信息,如果没有详细说明4.0还是x1.0 那就是5版本。...一句话:做事情要有头有尾,写...(该放P就放P)为什么要标签语义化:因为浏览器只认识标签,没有语

    html标签:sub标记和sup标记

    今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。...DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&gt;&lt;html xmlns=h

    如何让IE9以下版本(ie6/7/8)认识html5元素

    不在清单上的元素都将被视为未知元素。浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)。在IE9之前的版本中,也不能对未知元素设定样式。未知元素的DOM也显示不正确,IE会在DOM中...DOCTYPE

    html sub标记和sup标记

    今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。定义和用法:&lt;sub&gt; 标签可定义下标文本。&lt;sup&gt; 可定义上标文本。都属于行内元素,默认比当前字体稍小。 例子: &lt;!DOCTYPE ...

    asp.net实现生成静态页并添加链接的方法

    本文以实例讲解了asp.net实现生成静态页并添加链接的方法,非常实用的功能,通过本实例可以加深读者对于asp.net下文件操作的认识。 1.创建一个静态网页模板 &lt;!DOCTYPE ...

    javascript数据类型验证方法

    最近对javascript数据类型的验证又有了一个新的认识,原来可以判断得这么简单又如此全面。 我们自定义了isString,isNumber ,isDate ,isError ,isRegExp ,isBoolean ,isNull ,isUndefined ,isObject等方法。现在将...

    D3.js 从P元素的创建开始(显示可加载数据)

    D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起。 html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 , d3存放...

    AngularJS1.X学习笔记2-数据绑定详解

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP、struts等,只有实现了数据绑定才能将模型层和视图层...

    这次一定彻底弄懂DOM事件机制

    经过我研读了大量博客文章以及开源框架源码后,这次算是对DOM事件机制有了更新更全面的的认识。 下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ,然后在此基础上再 深入总结对事件监听的优化方案 ,...

    rocket-select:可以远程搜索下拉的js插件

    rocket-selece 远程下拉搜索嗨,大家好我叫韩广金,是一名前端开发工程师,目前工作在北京,很高兴在这里认识大家,希望我的项目能对您的工作有一定帮助,有BUG欢迎留言,我们看到会第一时间处理项目简介rocket-...

    java web 编程技术

    切实引导大家多读书、乐读书、读好书,拓宽视野,引导大家从中认识“真、善、美”,树立正确的人生观、价值观,提高全民人文素养。 &lt;td width="20%"&gt;&nbsp; &lt;p align="right" &gt;&lt;font color="blue"&gt; ...

Global site tag (gtag.js) - Google Analytics