HTML发展史
GML
GML是一个标记语言，通过特定的标识包裹数据，使得计算机能够识别和处理信息。在GML的基础上，SGML被开发出来，它是一种极为严格的文件描述语言
SGML由语法定义、DTD以及文件实例这三个部分构成，由于SGML的规范非常严格，文档达到了500多页，因此它被认为难以学习、使用和实现，基于这些原因，人们在SGML的基础上发展出了其他更易用的标记语言
HTML
1991年，html1.0问世，基于GML和SGML的html抛去了前两者的臃肿，继承了 SGML 的很多优点
HTML最大的特点是简单性和跨平台性。它只使用了 SGML 中很少的一部分标记，例如 HTML4.0中只定义了 70 余种标记，为了便于在计算机上实现，HTML 规定的标记是固定的，即 HTML 语法是不可扩展的
从HTML1一直到HTML5，它们之间最大的差别就是支持的元素不同
| 元素 | HTML5 | HTML4 | XHTML |
|---|---|---|---|
| a | yes | yes | yes |
| p | yes | yes | yes |
| button | yes | yes | yes |
| body | yes | yes | yes |
| article | yes | no | no |
| details | yes | no | no |
| dir | no | yes | no |
| font | no | yes | no |
| thead | yes | yes | no |
| … | … | … | … |
XML
随着 Web 应用的不断发展，HTML 的局限性也越来越明显地显现了出来，如 HTML 无法描述数据、可读性差、搜索时间长等，为了解决这些问题，人们重新改进了SGML 使之适应现在的网络需求，1998年W3C公布XML1.0标准，标志着 XML 的诞生
XML的设计旨在通过简化 SGML，使其能够在 Web 上像 HTML 那样被服务、接收和处理
XML 不仅仅是一种标记语言，它还提供了一种强大的方式来存储、搜索和共享数据，最重要的是，由于 XML 的基本格式已经标准化，即使在不同系统或平台之间本地或通过互联网共享或传输 XML 数据，接收方也能够解析数据，很长一段时间，XML都作为网络传输的标准数据格式
DTD
我们前面一直在提到一个词，叫做DTD，DTD即标记语言的规则，最早可以追溯到SGML，我们通过引入DTD就能知道当前HTML的版本，以及当前HTML语法是否规范
DTD 是一种保证文档格式正确的有效方法，可以通过比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。一个DTD文档包含：元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则
文档声明
HTML 文档通常以文档声明开始，该声明的作用是帮助浏览器确定其尝试解析和显示的 HTML 文档类型
<!DOCTYPE html>
文档声明必须是 HTML 文档的第一行、且顶格显示，对大小写不敏感。因为任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 IE9 或更早期的浏览器触发怪异模式
文档声明并非一个 HTML 标签。它是一条“信息”，告知浏览器期望的文档类型
在HTML5出现之前，文档声明中都需要引入DTD文件，所以我们可以看到那些文档声明都很长
-
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
在HTML5出现之后，我们就不需要在文档声明后添加DTD了，因为HTML5不再基于SGML
渲染模式
根据HTML文档声明的不同，浏览器会采取不同的渲染模式
在W3C标准出台之前，浏览器对网页的渲染没有统一的规范，这导致了不同浏览器之间的差异性，为了确保网站能在各种浏览器中正确显示，开发者不得不根据每个浏览器的特定规则来编写代码，哪怕这些代码是不符合W3C规范的
随着W3C标准的推出，浏览器对网页的渲染终于有了统一的标准，各大浏览器开始逐步采纳这一新标准。然而，这引出了一个问题：如何确保旧网页仍能正常浏览？因为在W3C标准发布之前，许多网页都是基于旧的渲染方式编写的，若按新标准渲染，可能会导致页面显示不正常。为了解决这一问题，浏览器保留了旧的渲染模式，以便不同的网页可以根据其需要选择不同的渲染模式
具体而言，浏览器会有三种渲染模式
- 怪异模式/混杂模式
这个模式是指浏览器用自己的方式解析代码 - 标准模式/严格模式
这个模式是指浏览器用W3C的标准解析代码 - 接近标准模式/几乎标准模式
在这个模式下只会有少数怪异行为被实现
怪异模式渲染的区别
不同于标准模式，怪异模式会有以下不同的渲染行为
- 盒模型
怪异模式下的盒模型包含padding和border - 行内元素宽高
怪异模式下我们可以直接设置行内元素的宽高 - 水平居中失效
怪异模式下我们通过margin:0 auto来使元素水平居中的行为失效 - …