关于HTML中的DOCTYPE

Vapaus Qi2024-06-162024-07-15

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>

在前端开发中这是我们最常见到的html模板。我们知道，在html5中，我们需要在第一行标注<!DOCTYPE html>。这篇文章主要介绍下<!DOCTYPE html>的前后今生。

`<!DOCTYPE html>`

HTML 的起源

HTML（超文本标记语言）由蒂姆·伯纳斯-李（Tim Berners-Lee）在 1991 年发明，最初是为了简化信息在互联网中的发布与分享。随着 HTML 规范的不断更新和扩展，Web 浏览器的行为也变得越来越复杂。早期的 HTML 文档通常不需要 <!DOCTYPE> 声明，浏览器根据自己的规则解析这些文档。

标准化的需求

随着 Web 技术的发展，不同浏览器之间的行为差异导致了严重的兼容性问题。为了统一浏览器的解析行为，W3C（万维网联盟）在 1994 年发布了 HTML 2.0，并引入了 <!DOCTYPE> 声明，用以定义文档的 DTD（文档类型定义）。

什么是 `<!DOCTYPE>`

<!DOCTYPE> 是 HTML 文档的文档类型声明，告知浏览器使用哪种 HTML 版本来解析文档。它是 SGML（标准通用标记语言）的一部分，用来定义文档的结构。<!DOCTYPE> 声明决定了文档的渲染模式，包括标准模式、怪异模式以及近标准模式。

渲染模式

渲染模式决定了浏览器如何解释 CSS 和盒模型等。主要有三种渲染模式：

标准模式（Standards Mode）：浏览器严格遵循 W3C 和 WHATWG 的标准，呈现出符合现代 Web 标准的行为。
怪异模式（Quirks Mode）：模仿早期浏览器的行为，保留了许多历史遗留的渲染问题，以支持旧网页。怪异模式会导致盒模型的解析方式与标准模式不同。
近标准模式（Almost Standards Mode）：介于标准模式和怪异模式之间，解决了与表格单元格垂直对齐相关的问题，但在其他方面与标准模式基本一致。它在处理一些兼容性问题时提供了灵活性。

不同版本 HTML 中的 `<!DOCTYPE>` 写法

HTML 2.0 (1995)

HTML 2.0 是第一个被广泛接受的 HTML 规范，文档类型定义如下：

1	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

PUBLIC：指明这是一个公共的 DTD。
“-//IETF//DTD HTML 2.0//EN”：描述了 DTD 的发布者（IETF），版本号（HTML 2.0），以及语言（英语）。

HTML 3.2 (1997)

1 2	//HTML 3.2 引入了一些新功能，如表格和图像映射，<!DOCTYPE> 声明为： HTML 3.2 引入了一些新功能，如表格和图像映射，<!DOCTYPE> 声明为：

-//W3C：表示由 W3C 发布。
HTML 3.2 Final：说明这是最终版本的 HTML 3.2。

HTML 4.01 (1999)

HTML 4.01 引入了三种文档类型：严格、宽松和框架集。不同类型有不同的 <!DOCTYPE> 声明。

严格模式（Strict Mode）：适用于严格遵循 HTML 规范的文档，不允许使用过时的 HTML 元素和属性。

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

宽松模式（Transitional Mode）：允许使用一些过时的 HTML 元素和属性，以保证向后兼容。

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

框架集模式（Frameset Mode）：允许使用元素，适用于包含框架的页面。

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

HTML 5 (2014)

HTML5 取消了复杂的 DTD 声明，统一使用简洁的：

1 2	<!DOCTYPE html>

唯一的作用是启用标准模式。更早期的 HTML 标准中，DOCTYPE 会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。

<!DOCTYPE html>