DOCTYPE是什么鬼?文档模式又是什么鬼?
2015-05-12 00:01
204 查看
!DOCTYPE
!DOCTYPE是什么:在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档(比如HTML或XHTML规范);
!DOCTYPE声明不属于 HTML 标签;tag; 它是一条指令,告诉浏览器编写页面所用的标记的版本。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(html 5简化了这种声明,意在告诉浏览器使用统一的标准即可, 这个统一的标准去哪里找啊,www.w3.org)。
常见的DOCTYPE如下:
HTML4.01 strict:不允许使用表现性、废弃元素(如font)以及frameset。声明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML4.01 Transitional:允许使用表现性、废弃元素(如font),不允许使用frameset。声明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML4.01 Frameset:允许表现性元素,废气元素以及frameset。声明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML1.0 Transitional:允许使用表现性、废弃元素,不允许frameset,文档必须是结构良好的XMl文档。声明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset,文档必须是结构良好的XML文档。声明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML 5: <!doctype html>
HTML5中的!doctype是不区分大小写的;
我的DW默认的声明模板是下面这样的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我的webstrom中默认的模板是这样的:
<!DOCTYPE html>
现代的浏览器需要不同模式, 既要呈现久远的HTML界面, 不至于界面结构混乱不堪, 也需要呈现W3C标准的界面:
1:标准的显示方式就是---标准模式(strict),
2:不标准的显示方式---怪异模式(没定义doctype或者doctype错误等等情况,都会让界面进入quirk模式),
3:既可以显示标准的,也能够显示不标准的(过渡类型的文档类型定义transitional);
规范和时间线
HTML规范和时间线:规范 | 推荐 |
HTML 3.2 | 1997年1月14日 |
HTML 4.0 | 1998年5月24日 |
HTML 4.01 | 1999年12月24日 |
规范 | 草案/提议 | 推荐 |
XHTML 1.0 | 2000 年 1 月 26 日 | |
XHTML 1.0 修订版 | 2002 年 8 月 1 日 | |
XHTML 1.1 | 2001 年 5 月 31 日 | |
XHTML Modules | 2001 年 4 月 10 日 | |
XHTML Modules 1.1 | 2006 年 7 月 5 日 | |
XHTML Basic | 2000 年 12 月 19 日 | |
XHTML Basic 1.1 | 2006 年 7 月 5 日 | |
XHTML Events | 2003 年 10 月 14 日 | |
XHTML Events 2 | 2007 年 2 月 16 日 | |
XHTML Print | 2006 年 9 月 20 日 | |
XHTML Media Types | 2002 年 8 月 1 日 | |
XForms 1.0 | 2003 年 10 月 14 日 | |
XForms 1.0 (SE) | 2006 年 3 月 14 日 | |
XForms 1.1 | 2007 年 2 月 22 日 | |
XHTML 2.0 | 2006 年 7 月 26 日 | |
XLink | 2001 年 6 月 27 日 | |
HLink | 2002 年 9 月 13 日 |
一般来说 !DOCTYPE后面会有一个包含命名空间的html标签:
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns是XHTML namespace的缩写。
作用:由于xml允许定义自己的标记,但你定义的标记和其他人定义的标记有可能相同,但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生,xml采用名字空间声明,允许你通过一个网址来识别你的标记。
XHTML是HTML先xml过度的标记语言,它需要符合xml文档规则,因此,也需要定义名字空间,又因为XHTML1.0不能自定义标识,所以,它的名字空间都相同,就是:http://www.w3.org/1999/xhtml
额外资料:文档模式
参考自:打开文档模式也回影响到文档类型, <meta http-equiv="X-UA-Compatible">与<!DOCTYPE>结伴影响文档模式 ;
所有IE浏览器在默认情况下(<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>均没有),是采用怪异模式(Quirks);当有<!DOCTYPE>时,均采用浏览器版本对应的标准模式(如IE8就采用IE8标准模式,IE11就采用IE11标准模式)。
现在要注意的是,当出现<meta http-equiv="X-UA-Compatible">时,文档模式将会如何呢?我们首先了解一下IE11下它的content属性值范围吧,具体范围如下:
IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge
1. IE=5:表示采用怪异模式;
2. IE=7等纯数字的值:表示采用对应IE版本的标准模式,即使不是以<!DOCTYPE>作为文档第一行,文档模式依旧使用标准模式;
3. IE=EmulateIE7等含EmulateIE字符串的值:表示采用模拟对应IE版本的模式,如果是以<!DOCTYPE>作为文档第一行则采用该版本的标准模式,否则采用怪异模式。
4. IE=Edge:表示采用浏览器自身版本的文档模式,如IE11,以<!DOCTYPE html>作为文档第一行则采用IE11标准模式,否则采用怪异模式。
IE的怪异模式:
IE进入backCompat的模式的方式,常见的原因有
1:DOCTYPE写错了,
2:DOCTYPE没有写,
3:DOCTYPE前面有别的字符;
....
实例:
_____ <!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <style> body{ margin:0; padding:0; width:1000px; padding:200px; } </style> <body> <div id="div0"></div> <script> function getStyle(el, prop) { return el.currentStyle[prop]; }; var node = document.createElement("div"); node.innerHTML = document.compatMode ;// document.body.appendChild( node ); node = document.createElement("div"); node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth; document.body.appendChild( node ); </script> </body> </html>
IE兼容模式开启的话, 相对于当前的界面会以IE5.5的方式进行渲染,如果IE浏览器以IE5.5的方式进行解析, 会导致以下问题;
盒模型:
在怪异模式下,盒模型为IE盒模型而非标准模式下的W3C 盒模型:在 IE 盒模型中, box width = content width + padding left + padding right + border left + border right, box height = content height + padding top + padding bottom + border top + border bottom。 而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。
图片元素的垂直对齐方式:
对于
inline元素和
table-cell元素,在 IE Standards Mode 下 vertical-align 属性默认取值为
baseline。而当
inline元素的内容只有图片时,如
table的单元格
table-cell。在 IE Quirks Mode 下,
table单元格中的图片的
vertical-align属性默认为
bottom,因此,在图片底部会有几像素的空间。
<table>元素中的字体:
CSS 中,描述
font的属性有
font-family,
font-size,
font-style,
font-weigh,上述属性都是可以继承的。而在 IE Quirks Mode 下,对于
table元素,字体的某些属性将不会从
body或其他封闭元素继承到
table中,特别是
font-size属性。
内联元素的尺寸:
在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的
width和
height属性,能够影响该元素显示的大小尺寸。
元素的百分比高度:
CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。
当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。
元素溢出的处理:
在 IE Standard Mode 下,
overflow取默认值
visible,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展
box来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。
有关文档模式的参考资料:open
相关文章推荐
- doctype(文档类型)的作用是什么?
- JS判断doctype文档模式-document.compatMode
- doctype(文档类型)的作用是什么?
- doctype(文档类型)的作用是什么?
- 如何理解DocType? 什么是严格模式与混杂模式?如何触发这两种模式?
- doctype(文档类型)的作用是什么?
- Doctype的作用和如何区分严格模式和混杂模式,有什么意义
- HTML页面的文档模式:DOCTYPE 与浏览器模式分析
- doctype(文档类型)的作用是什么?
- 文档模式DOCTYPE
- doctype(文档类型)的作用是什么?
- 为什么要加入<!doctype html>这个文档声明——IE怪异模式
- doctype(文档类型)的作用是什么?
- 文档类型DTD,DOCTYPE和浏览器模式
- doctype(文档类型)的作用是什么?
- doctype(文档类型)的作用是什么?
- JX8NET游戏 Doctype文档声明的严格模式和混杂模式
- doctype(文档类型)的作用是什么?
- 文档类型、DOCTYPE切换和浏览器模式
- xml约束模式的作用。简述什么是格式良好但无效的xml文档,什么是有效的