盒子
盒子

DOCTYPE（文档类型）的作用是什么？

2019.06.16 sjn_hoho 每天一道面试题

之前印象

DOCTYPE 唯一接触过的就是<!DOCTYPE html>,完全不知道这个还有什么作用的，而且这些一般都是cli直接生成的，根本就没在意过。😂

深入了解

DOCTYPE的作用

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

删除<!DOCTYPE>会发生什么？

在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视<!DOCTYPE>

常见的DOCTYPE声明

HTML5

1
<!DOCTYPE html>

HTML 4.01 Strict

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

1
<!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）。

1
<!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，但允许框架集内容。

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

XHTML 1.0 Strict

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

1
<!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 来编写标记。

1
<!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，但允许框架集内容。

1
<!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 支持）。

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

了解之后

虽然明白了DOCTYPE的作用，但是又引发了新的知识点，XHTML是个啥啊？DTD又是个啥？？

XHTML

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。
啊？既然目标取代HTML，咋没声音了呢？原来历史的故事是这样的：
首先先认识3个组织：IETF (Internet Engineering Task Force) 互联网工程任务组，W3C (World Wide Web Consortium 万维网联盟、web领域中，最具权威和影响力的国际中立性技术标准机构，WHATWG（Web Hypertet Application Technology Working Group） 超文本应用技术工作组、是由浏览器厂商组成的。

1991年Tim Berners Lee这个人编写了一个HTML的文档。1995年11月IETF发表了HTML2.0.1994年，Tim Berners Lee成立了W3C组织，成文了web标准的制定者，随后相继发表了HTML3.2和HTML4.0，HTML4.01.随后W3C在HTML中引入了XML，成为了XHTML。W3C闭门造车的作风引起了各大浏览器厂商的不满。于是各大浏览器厂商联合起来成立了WHATWG组织，在HTML的基础上进行拓展，致力于研发HTML5.W3C继续研发XHTML，但是走向了困境。于是Tim Berners Lee决定采用HTML5，同时继续研发XHTML，知道2009年，W3C宣布终止XHTML2.0的研发，开始一心一意的研究HTML5。HTML5是W3C和WHATWG博弈的结果。

DTD

文档类型定义（DTD）可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。DTD 可被成行地声明于 XML 文档中，也可作为一个外部引用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0"?>
<!DOCTYPE note [
  <!ELEMENT note (to,from,heading,body)>
  <!ELEMENT to      (#PCDATA)>
  <!ELEMENT from    (#PCDATA)>
  <!ELEMENT heading (#PCDATA)>
  <!ELEMENT body    (#PCDATA)>
]>
<note>
  <to>George</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Don't forget the meeting!</body>
</note>

以上 DTD 解释如下：
!DOCTYPE note (第二行)定义此文档是 note 类型的文档。

!ELEMENT note (第三行)定义 note 元素有四个元素：”to、from、heading,、body”

!ELEMENT to (第四行)定义 to 元素为 “#PCDATA” 类型

!ELEMENT from (第五行)定义 from 元素为 “#PCDATA” 类型

!ELEMENT heading (第六行)定义 heading 元素为 “#PCDATA” 类型

!ELEMENT body (第七行)定义 body 元素为 “#PCDATA” 类型

通过 DTD，您的每一个 XML 文件均可携带一个有关其自身格式的描述。

通过 DTD，独立的团体可一致地使用某个标准的 DTD 来交换数据。

而您的应用程序也可使用某个标准的 DTD 来验证从外部接收到的数据。

您还可以使用 DTD 来验证您自身的数据。