为什么要用<!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-08-03 01:14:15

为什么要用&lt;!DOCTYPE&gt;声明的相关文章

&lt;!DOCTYPE html&gt;声明下div高度100%的问题

在使用HTML代码创建网页,如果声明了<!DOCTYPE html>,并且在代码中有div设置了高度为100%,可能会出现显示不正常的情况.比如下面这个代码: <!DOCTYPE HTML> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type=&q

&lt;!DOCTYPE html&gt;声明下div高度100%

问题:在HTML页面中声明,页面中div属性设置100%页面显示不正常 body { max-width: 720px; margin: 0 auto; } .case { background-color: #68CDD5; height: 100%; } 页面中case为最大的div的class,设置了height:100%,页面并未正常显示,蓝色部分并未铺满整个页面. 原因:在HTML5标准要求高度或宽度设置成百分比时,参照的是父标签. 解决: 标签的父标签是,标签的高度也需要定义,很多人

!DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写

html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要.一.概述 - TOP 让CSS样式表生效,DOCTYPE声明是必须的,音乐放松椅以前TABLE布局的网页可能DOCTYPE可以省略也可以正常显示.但在DIV CSS布局中虽然DOCTYPE就一段代码却至关重要,影响CSS样式是否生效.少了DOCTYPE html声明有的CSS样式仍是生效,但有的CSS样式是失效的.所以DOCTYPE是必不可少的.二.DOCTYPE简写 - TOP 以前HTML4版本

doctype声明的重要性-------这绝对是ie的坑, 与angular无关, 我错怪你啦

今天开发一个页面,  自己写页面, 自己实现功能. 因为以往需求都没有要求兼容ie9, 所以并未发现此坑. 今天就记录下来. 贴图对比 ie9 chrome 如图, ie9界面显示错误. 起初以为是angular 1.3 不支持ie9, 思路一直围绕着ie9的兼容性问题在想解决方法. 实在没有法子,  就跑去问我们老大...原来都是 <!doctype html> 惹的祸. 看见这原因  杀了自己的冲动都有了啊. 所以, 我来记录自己的愚蠢了. 以后, 再犯就是傻逼啊 <!doctype

关于&lt;!DOCTYPE html&gt;

1.定义 DOCTYPE标签是一种标准通用标记语言的文档类型声明,目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 2.作用 声明文档的解析类型(document.compatMode),避免浏览器的怪异模式. document.compatMode: BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面. CSS1Compat:标准模式

HTML5 声明兼容IE的写法

<!DOCTYPE html> <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <![endif]--> <!--[if IE 7]> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <![endif]--&g

Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前.如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明.确定了正确的Doctype,xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css).既然它是一种声明,它的责任就是告诉浏览器文档使用哪种html或者xhtml规范.为了获取正确的Doctype声明,关键就是让dtd与文档所遵循的标准对应.例如:假定文档遵循的是xhtml

DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义

DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果,开始以为书写顺序不对,于是调整书写顺序,还是不行,最后找到了我认为最没什么用处的第一行才发现真正起作用的竟然是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http//www.w3.org

&lt;!DOCTYPE html&gt;作用

document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. <!DOCTYPE html>标签 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C