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. 学习前端页面css定位

    css元素框定位 一.相对定位: 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动.pos ...

  2. elment 中 el-table 进行校验

    脑洞大开:什么是展示数据最好的方式呢,表格,写得又快,又清晰,又明显,那么就积累一些工作中表格经常使用到的东西. 第一步:效果图: 第二步:举个例子: <template> <div ...

  3. Mac OS 10.12使用U盘重装（转）

    OS X Capitan和macOS Sierra的安装方式和下载系统的方法都是一致的,下面是OS X Capitan的安装方法: 一.准备工作: 准备一个8GB或者8G以上容量的U盘 确保里面的数据 ...

  4. JavaScript设计模式（一）

    什么是设计模式呢? 就是指对于类似的问题,我们可以用大致相同的思想.方法去解决之,而这种通用的思想.方法就是设计模式.学习设计模式可以帮助我们在遇到问题时迅速地搜索出一种清晰的思路来实现之. 第一部分 ...

  5. DotNetCore跨平台~autofac属性的自动注入

    回到目录 在使用autofac这个DI工具时,我们一般使用的是构造方法注入,而dotnetcore的标准框架里也集成了构造方法注入,而属性注入在一些场景下,表现的更为灵活,像java的spring框架 ...

  6. Bunder: What does :require => nil in Gemfile mean?

    https://stackoverflow.com/questions/12200215/bunder-what-does-require-nil-in-gemfile-mean Require ni ...

  7. python跳出多重循环

    # -*- coding=utf-8 -*- """ 如何结束多重循环,在单层循环中,可以用break跳出循环,那两层,三层呢? """ # ...

  8. PHP之string之ltrim()函数使用

    ltrim (PHP 4, PHP 5, PHP 7) ltrim - Strip whitespace (or other characters) from the beginning of a s ...

  9. C#中复制数组

    string array = new string[]{"abc", "bcd", "efg"}; string bArray = new ...

  10. 深入js之基本语法

    周末正好有空就研究了下汤姆大叔的js系列博客,虽然只是学到点皮毛,依然获益匪浅.不得不说大牛的境界岂是吾等小辈可理解. 变量: js有隐含的全局概念,意味着不声明的所有变量都是全局对象的属性. fun ...