为什么要用<!DOCTYPE>声明

实例:

我们经常会看到类似这样的代码:

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>

注解:可以看到最上面有一行关于“DOCTYPE”(文档类型)的声明,它就是告诉浏览器,使用哪种规范来解释这个文档中的规范。你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式(各个浏览器在怪异模式下对各个元素渲染时有差异,因此会导致同一个样式在不同浏览器上看到的效果不同)。

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:

<!DOCTYPE html>

HTML 元素和文档类型(Doctype)

请参阅这个 HTML 元素表,其中列出了每种元素会出现在哪个文档类型中

提示和注释

注释:<!DOCTYPE> 声明没有结束标签。

提示:<!DOCTYPE> 声明对大小写不敏感。

提示:请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档!

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

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

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 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

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

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

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

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

总结

(编写HTML时)声明文档类型:

<!DOCTYPE html>

这样声明的好处:

  • 你可以轻松的写下这个doctype,而不用担心会写错;
  • 它是向后兼容的(因为HTML5的doctype就是这样写的),并且现代浏览器都认识它。

疑问:没有指定dtd将会开启浏览器的怪异模式?

这种说法是错的!正确的说法应该是没有定义doctype才会开启怪异模式,也就是说你只需要定义就可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型dtd。

回顾一下:

所有的浏览器都有两种模式:怪异模式和严格模式(也有人叫标准模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。

关于两种模式,你需要知道以下几点:

  1. 在标准化之前写的页面是没有doctype的,因此没有doctype的页面是在怪异模式下渲染的
  2. 反过来说,如果web开发人员加入的doctype,说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会按照标准来渲染。
  3. 任何新的或者未知的doctype都会开启严格模式(标准模式)。
  4. 每个浏览器都有自己的方式来激活怪异模式。

你可以看看这个清单:http://hsivonen.iki.fi/doctype/

注意:你可以根本不需要根据你选择的doctype来验证你的页面,只要doctype标签存在就足以开启严格模式(标准模式)了。如果仍感到怀疑,那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。

我们只需要一小段JavaScript代码就可以得到答案,它就是:

mode=document.compatMode;

这个代码可以用来判断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑,如果你表示怀疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11

时间: 2024-10-16 02:15:42

为什么要用<!DOCTYPE>声明的相关文章

网页的!DOCTYPE声明及对网页起何作用

一.DOCTYPE说明   -   TOP 要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分:除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效,也就是说如果没有这个DOCTYPE声明将会导致CSS失效-css无效,特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示. DOCTYPE声明 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. 查看很多使用XHTML标准开发的网站,第一行就是: <!DOCTYPE html

doctype声明、浏览器的标准、怪异等模式

doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//

&lt;!DOCTYPE&gt; 声明 引发的错误

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 在写模板的时候,因为最近开始给每个文件添加注释,无意中将注释写在文件的第一行.导致页面在IE模式下错位. 这是因为 文档声明 强制在第一行,否则视为 错误文档.IE模式下,会自动降低浏览器到IE7的模式下进行渲染,以变支持. 由于使用了bootstrap框架,在IE7下面是不支持的.结果就是一系列的悲剧. <!DOCTYPE> 声明 引发的错误,布布扣,bubuko.com

DOCTYPE声明的作用是什么?严格模式与混杂模式如何区分?

HTML语言已经存在太久了,目前必然会有一些不同版本的文档存在,为了能够让浏览器清楚你的文档的版本类型和风格,需要在文档的起始用DOCTYPE声明制定当前文档的版本和风格.如果在网页中提供了版本信息,则可以有利于验证页面中的代码是否符合当前的版本和风格 在严格模式即标准模式中,浏览器根据贵干呈现页面:在混杂模式中,页面以向后兼容的方式显示,以防老站店无法工作 如果HTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现,对于HTML4.01文档包含严格DTD的DOCTYPE常常导致页面

DOCTYPE声明作用及用法详解

一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工作.事实上,为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示(虽然呈现方式可能有所区别).这是什么原因呢?事实上,假如严格遵循最新标准,会完全破坏那些页的生存基础.对于任何希望有所作为的浏览器来说,这当然是令人无法接受的. 浏览器呈现模式 现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网

doctype声明 过渡transitional 严格strict 框架frameset

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本. 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来. 要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分:除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效. XHTML 1.0 提供了三种DTD声明可供选择: * 过渡的(T

HTML&lt;!DOCTYPE&gt; 声明的作用

在html页面中,下面这行代码究竟有何用呢? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在一次页面重构过程中,看到静态页的第一行有这么一段代码,其后紧跟一大片空白,在删除空白的时候不小心删掉了这行代码,然后.... 原来显示正常的页面,瞬间凌乱了,字体样式

常见HTML的!DOCTYPE声明

HTML或者XHTML版本 !DOCTYPE声明 HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> HTML 4.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

HTML&#160;常见的 DOCTYPE 声明

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML.DTD (文档类型定义) 规定了标记语言的规则,这样浏览器才能正确地呈现内容. HTML5 不基于 SGML,所以不需要引用 DTD. HT