1.定义

DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

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

2.作用

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

3.使用方式

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">

关于<!DOCTYPE html>的更多相关文章

  1. 关于<meta NAME="keywords" CONTENT="">

    昨天终于以实习身份入职一家小创业公司,今天让我多看看别人的网页怎么写的,发现了一个以前都没关注过的东西. <meta name="keywords" content=&quo ...

  2. 转 ：meta name的含义：<META http-equiv=Content-Type content="text/html; charset=gb2312">

    meta是什么?meta其实是html语言head区的一个辅助性标签.在几乎所有的网页里,我们都可以看到类似下面这段html代码:<META http-equiv=Content-Type co ...

  3. HTML <meta> 标签 遇到<meta http-equiv="refresh" content="0; url=">详解

    页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用中, ...

  4. 转 【<meta name="description" content=">】作用讲解

    今天在看别人写的网站代码,发现类似<meta name="Keywords" content="" >.<meta name="De ...

  5. <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>

    <meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...

  6. 关于<meta http-equiv="X-UA-Compatible" content="IE=edge" />问题

    我在做网页过程中都是在火狐浏览器下进行的,可是有一次我在IE浏览器下打开时却发现我设置的style.css中的大部分样式都失效率了,这个问题足足困扰了我两天,终于在百度的帮助下找到了答案,原来在网页的 ...

  7. 优先使用最新版本的IE 和 Chrome 内核 1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    兼容模式 优先使用最新版本的IE 和 Chrome 内核 1 <meta http-equiv="X-UA-Compatible" content="IE=edge ...

  8. 论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...

  9. meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

     <meta name="viewport" content="width=device-width,initial-scale=1.0">   c ...

  10. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明

    X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE> ...

随机推荐

  1. sort函数详解（史上最完整QAQ）

    1.sort 使用:#include <algorithm>   using namespace std; 作用:排序 时间复杂度:n*lg(n) 实现原理:sort并不是简单的快速排序, ...

  2. java四行代码实现图片下载

    如下: InputStream in = new URL("http://www.updown/thumbnail.jpg).openStream(); Path temp = Paths. ...

  3. dubbo SPI设计

    SPI 全称为 Service Provider Interface,是一种服务发现机制.SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时, ...

  4. Ubuntu里面vi编辑器在编辑文本时 如何在所有行行首或行尾插入字符

    例如:我这里是在每一行行首插入new :%s/^/new 在20,50行首插入new :20,50s/^/new 在每一行行尾插入@@ :%s/$/@@ 在20到50行行尾插入## :20,50s/$ ...

  5. Mac下像Windows那样带有预览图的快速切换-HyperSwitch

    这东西是免费的,他家还出了一个HyperDock的收费软件. 下载:https://bahoom.com/hyperswitch/get 离线版本:(链接: https://pan.baidu.com ...

  6. Memcahe安装与配置

    1.先启动Memcahe服务 (1)通过Memcahe文件夹下的memcahe.exe程序启动 (2)将Memcahe加到Windows服务中去 为了方便使用,大多数情况下,是使用第二种方式,来启动M ...

  7. Java的三个基础排序算法（其余将在以后补充）

    第一个:冒泡排序算法 原理:相邻的两个值进行比较,如果前面的比后面的大就交换位置 eg:假设有5个元素的一个array 第一次:会比较4次,将最大的值放在最右边 第二次:会比较3次,又排出剩余4个元素 ...

  8. 设置npm的镜像源

    将npm的镜像源设置为淘宝镜像源 1.执行命令修改镜像源地址:npm config set registry https://registry.npm.taobao.org 2.重新加载修改后的地址: ...

  9. 安装php readline扩展报错 Please reinstall libedit

    现象:configure: error: Please reinstall libedit – I cannot find readline.h解决办法:安装 Editline Library (li ...

  10. Disable Nvidia in Lenovo Y470 Debian wheezy

    1.add the apt-key as 'root' (! don't do this as 'sudo' ) $ su root $ wget -O - http://suwako.nomanga ...