- 浏览: 147165 次
- 性别:
- 来自: 杭州
最新评论
-
luliangy:
我是直接放在URL里面的出了错,试了下放在data里面就没问题 ...
HttpURLConnection乱码问题解决 -
luliangy:
我是在服务端(webx)getBytes iso8895-1然 ...
HttpURLConnection乱码问题解决 -
cwalet:
bazhuang 写道liwanfeng 写道
data = ...
HttpURLConnection乱码问题解决 -
cl1154781231:
connection.getOutputStream(),&q ...
HttpURLConnection乱码问题解决 -
bazhuang:
liwanfeng 写道
data = new String ...
HttpURLConnection乱码问题解决
认识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">
以下是从手册上摘抄的规则:
语法:
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="获取可视高度" onclick="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="获取可视高度" onclick="getHeight()"/>
</div>
</body>
</html>
浏览器 |
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>
既然找到原因,那么我们就把上面的获取clientHeight代码修改一下:
function getHeight(){
var flag = document.compatMode == "CSS1Compat";
if(flag){
var ht = document.documentElement.clientHeight;
}
else{
var ht = document.body.clientHeight;
}
alert(ht);
}
通过以上的介绍,我们知道了JS不仅有不同浏览器的兼容性问题需要考虑,不同的页面定义也会造成返回结果的变化,所以有以下几点值得注意:
(1) 我们在编写页面的时候,都带上DOCTYPE这个声明,不要轻易的将其删除,除了使用frameset的地方,其他网页都使用transitional.dtd这种类型;
(2) 在编写js的时候,在获取页面的clientHeight,clientWidth,scrollHeight,scrollWidth,scrollLeft,scrollTop这些属性的时候,都需要增加对document.compatMode的判断,这样才可以保证我们的js有更强的兼容性。
发表评论
-
form的属性说明
2013-05-16 16:41 1530form在页面操作的时候是一个比较重要的标签了,那么这里就介 ... -
chrome开发要注意了
2012-06-13 12:49 0event.layerX and event.layerY a ... -
json格式查看器
2011-09-21 14:57 2111http://www.jiangliang.net/json/ ... -
需要认真学习html5
2011-08-25 23:00 1136http://www.mhtml5.com/resources ... -
遍历HtmlElement的自定义属性
2011-04-07 13:26 3400目前需要做一个需求,那就是需要用户提供一些自定义属性,可以定义 ... -
Q4计划完成的事情
2010-10-20 16:07 1144Q4在Javascript方面需要完成的事情列一下: 1、颜色 ... -
前端优化总结
2010-10-19 17:14 1421分析个性化推荐的耗时,可以分为如下几个阶段: (1) load ... -
Javascript培训PPT
2010-08-17 20:02 2406最近给其他同学做了一次Javascript培训,加上前面几次一 ... -
AJAX的缺陷以及解决方案
2010-07-02 13:44 1357目前我们正在考虑一个 ... -
DOM Level 1学习之一_关于Node
2010-06-08 15:26 1233今天想看看nodeType到底有几种情况,搜索到http:// ... -
eval部分替代方法
2010-05-23 23:04 1701function jsonDecode(data){ re ... -
IE6不缓存背景图的解决方案
2010-04-27 20:04 1846IE6有个bug,就是不缓存css中的背景图,每次都要去下载背 ... -
查询浏览器占有率
2010-04-19 16:22 1336我们可以在http://gs.statcounter.com/ ... -
事件的前因后果(2)
2010-01-22 22:40 12822、 认清事件的本质 要想解决这个问题,我们就需要认识一下事件 ... -
事件的前因后果(1)
2010-01-20 22:59 1037带着问题入手:我们做j2ee网站讲究分层,后台有好多方案进行分 ... -
探讨链接a
2009-12-14 19:23 3042谈谈对A的认识 在web开发中,打交道比较多的除了按钮就是a了 ... -
如何获取页面元素的某一个样式
2009-08-13 17:26 1573<!DOCTYPE html PUBLIC " ... -
0等于空字符串的问题
2008-06-06 22:42 2870今天碰到了一个非常郁闷的问题,本来是想实现一个类似于java里 ... -
js中创建Object对象的性能分析
2008-05-06 17:20 2100在javascript中创建一个对象有以下几种方式,如下: 1 ... -
屏蔽dom的上级节点的事件
2008-02-18 16:39 3863由于网页中的节点会继承上级节点的事件,可有时候这个事件继承并不 ...
相关推荐
Web 标准使您能通过最少的工作,生成可被最广大受众访问的 Web 站点。Web 标准的承诺是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作
• 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <...
DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/d
说起《水果忍者》,恐怕没几个人不认识的吧。它是 iOS、Android 等手机平台上一款极受欢迎的休闲游戏,不得不说,它简单有趣的“切水果”方式真心讨好了不少人,无论是男女老少,多少都有几个人喜欢无聊时砍几把~ ...
DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd> <!DOCTYPE ...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>runcode</title>...
一.HTML定义 超文本标记语言二....DOCTYPE html> 描述当前文件的版本信息,如果没有详细说明4.0还是x1.0 那就是5版本。...一句话:做事情要有头有尾,写...(该放P就放P)为什么要标签语义化:因为浏览器只认识标签,没有语
今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。...DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=h
不在清单上的元素都将被视为未知元素。浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)。在IE9之前的版本中,也不能对未知元素设定样式。未知元素的DOM也显示不正确,IE会在DOM中...DOCTYPE
今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。定义和用法:<sub> 标签可定义下标文本。<sup> 可定义上标文本。都属于行内元素,默认比当前字体稍小。 例子: <!DOCTYPE ...
本文以实例讲解了asp.net实现生成静态页并添加链接的方法,非常实用的功能,通过本实例可以加深读者对于asp.net下文件操作的认识。 1.创建一个静态网页模板 <!DOCTYPE ...
最近对javascript数据类型的验证又有了一个新的认识,原来可以判断得这么简单又如此全面。 我们自定义了isString,isNumber ,isDate ,isError ,isRegExp ,isBoolean ,isNull ,isUndefined ,isObject等方法。现在将...
D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起。 html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 , d3存放...
上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP、struts等,只有实现了数据绑定才能将模型层和视图层...
经过我研读了大量博客文章以及开源框架源码后,这次算是对DOM事件机制有了更新更全面的的认识。 下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ,然后在此基础上再 深入总结对事件监听的优化方案 ,...
rocket-selece 远程下拉搜索嗨,大家好我叫韩广金,是一名前端开发工程师,目前工作在北京,很高兴在这里认识大家,希望我的项目能对您的工作有一定帮助,有BUG欢迎留言,我们看到会第一时间处理项目简介rocket-...
切实引导大家多读书、乐读书、读好书,拓宽视野,引导大家从中认识“真、善、美”,树立正确的人生观、价值观,提高全民人文素养。 <td width="20%"> <p align="right" ><font color="blue"> ...