身为职业魔术师，我们不能像麻瓜一样胡闹。我们应该了解HTML，甚至知道它的父亲和祖父长什么样。前段时间有人问我“DOCTYPE的作用是什么？”。一听到这个问题，我的大脑就开始思考如何组织语言来回答他看似简单的问题。但我还是停止了思考，因为我知道我无法用口头语言来解释错综复杂的父子关系。要回答这个问题，您首先需要了解HTML的历史及其基因。今天我将抽空清理一下我的理解和我能看懂的知识，用通俗易懂的语言表达HTML家族的历史和故事。1.ML是姓氏吗？ML的全称是MakeLov*。不，再来一次。它是标记语言。翻译成中文就是标记语言的意思。根据维基百科的解释，“标记语言”使用标准标记来解释纯文本文档的内容，从而提供有关文档结构或文档应如何呈现的信息。说人类语言就是用一些标准格式的词（语言）来描述一个人（文档）的外貌（渲染信息）。所以全家基本离不开ML（markuplanguage）这两个字母。我们来看看它们的名字：GML、SGML、HTML、XML、XHTML、HTML5。怎么样，这样看，他们的名字是不是好记多了？下面我将基于HTML一一介绍他的战队成员。详情请参考其他技术文章。这里只是简单介绍一下。2.HTMLIHTML中文全称为HypertextMarkupLanguage。1.0版于1993年6月作为互联网工程任务组(IETF)的工作草案发布。它是迄今为止浏览器世界中最受支持的标记语言。正是它的诞生，催生了一批又一批的世界顶级富豪，也深刻改变了人们的生活方式和阅读方式。在此向无数Web先辈的努力致敬。关于HTML的更多介绍这里不再赘述。有兴趣的可以去百度百科或者维基百科。3.父亲——SGMLSGML是由一群人（ISO）创造的，这里不讨论这群人。有兴趣的可以参考维基百科。这里我们只谈SGML本身。SGML翻译成中文就是StandardGeneralizedMarkupLanguage，再加上GeneralizedStandards这四个字，瞬间就高大上了。SGML是HTML和XML的共同父亲。它起源于1969年IBM公司开发的文档描述语言GML，是HTML的鼻祖。我们稍后会介绍它的爷爷。SGML的优点是：高稳定性、高可移植性、高完整性。其缺点是：复杂度高，成本高。也就是说，ISO出品的东西，稳定性是绝对有保证的，而且还可以跨平台使用。文档也很完整。据说文档有500多页。但它的缺点正是因为它的稳定性和完整性，导致了高度复杂的特征，其相对推导是成本高的巨大缺陷。也就是说，如果一个人想要接手或使用它，就必须先制定它的DTD（文件格式定义）。这个DTD的制定相当复杂和昂贵。您可以简单地想象每次都编写一个新的DTD标准。SGML文件是以为此开发解析工具（浏览器）为代价的。4.爷爷——GMLGML（GeneralizedMarkupLanguage）由CharlesGoldfarb、EdwardMosher和RaymondLorie于1969年和1970年代开发（Goldfarb使用姓氏的缩写来缩写GML）。GML是用来搞IBM的文档合成工具，也是这个工具的主要组成部分。但是随着计算机的发展，这种语言变得相对落后和单一，于是诞生了儿子SGML一统天下。5.兄弟——XMLHTML的这个兄弟相当有竞争力，直到今天仍然被广泛使用。在先辈们的努力下，1998年2月10日，一群人类W3C（WorldWideWebonsortium，万维网联盟）公布了XML1.0标准，于是XML诞生了。XML的中文全称为ExtensibleMarkupLanguage，是为传输和存储数据而设计的。XML很重要且易于学习。今天的数学标记语言MathML和ScalableVectorGraphicsSVG都使用XML作为描述语言。HTML和它的兄弟XML最大的区别就是它的兄弟的标签可以自己创建，而且数量没有限制，类似于孙悟空的猴毛，而HTML的标签是固定的，数量有限。6.Son——HTML5HTML经过了一系列的修改，现在的HTML泛指HTML4.01。现在它的儿子HTML5是HTML的第五次修订。它的主要目标是对互联网进行语义化处理，使其能够更好地被人和机器阅读，同时为嵌入各种媒体提供更好的支持。HTML5本身不是一种技术，它是一种标准。它使用的技术已经非常成熟。前端技术界通常所说的HTML5，其实是HTML、CSS3、JavaScript、浏览器API的组合包。一个古老的公式可以解释这个问题：HTML5≈HTML+CSS3+JavaScript+浏览器API。需要注意的是，一些不懂技术的人所说的H5，指的是移动端的落地页。或营销页面。两者必须分开。7.侄子——XHTML中文全称ExtensibleHypertextMarkupLanguage。表达方式其实和HTML类似，但是比HTML更严格。它看起来很像HTML，但为什么它是XML的儿子呢？可能吗？在继承关系上，HTML继承自标准通用标记语言（SGML）。XHTML继承自可扩展标记语言(XML)，而XML继承自SGML。所以按理说侄子可能只是长得像。XHTML1.1是XHTML的最后一个独立标准，2.0正处于草案阶段。因为HTML5的出现，XHTML在非主流行业中还处于尴尬的地位。也许对于XML来说，HTML5是别人的孩子。8.神奇的世界——浏览器你可以把浏览器想象成一个神奇的世界。ML、CSS、JS是这个魔法世界的基础魔法，人是这个世界的魔法师。浏览器世界支持标准和兼容的渲染模式。标准模式下，JS引擎的渲染方式和解析方式运行在浏览器支持的最高标准。在兼容模式下，页面以轻松的向后兼容方式显示，模拟旧浏览器的行为以防止旧站点工作。人类的祖先一直在试图控制和掌握它们，甚至设计它们的规范，但它就像一个黑匣子，永远有你探索不到的角落。总有人觉得自己对这三种法术已经精通了，这个魔法世界并不是一成不变的。魔法世界有它自己的规则。人类总是需要学习新的魔法，却永远摆脱不了这三种基本法术。9.DTD——自报名称DTD的全称是文档类型定义（DTD，DocumentTypeDefinition）。在解析网页时，浏览器将使用这些规则根据文档自报告名称(DTD)检查页面的有效性并采取适当的操作。它还会影响浏览器的渲染模式（工作模式）。DTD的概念来自HTML之父SGML。每个SGML文档都应该有相应的DTD。对于XML文档，并不是特别需要DTD，格式良好的XML也不需要DTD。DTD有以下四个组件：元素、属性、实体、注释。由于DTD限制较多，使用不便，最近逐渐被XMLSchema所取代。10、最后，在介绍了以上历史知识和错综复杂的关系之后，我们终于回到了最初的问题。DOCTYPE的作用是什么？IE5.5引入了文档模式的概念，这个概念是通过使用文档类型（DOCTYPE）开关来实现的。声明位于HTML文档的第一行，标记之前。告诉浏览器的解析器使用什么文档标准来解析这个文档。缺少或格式错误的DOCTYPE会导致浏览器世界以兼容模式呈现。但是为什么HTML5只需要写而不引入DTD呢？HTML5其实并不是基于SGML的，所以不需要引用DTD，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照应该的方式运行）。HTML4.01是基于SGML的，所以需要引用DTD来告知浏览器世界所使用的文档类型，以便浏览器世界选择正确的渲染模式。最后用一张家谱图来结束全文。全文结束，如果觉得文笔不错，请点个赞，感谢阅读。特别提示：我的第一篇内容已经转移到微信公众号平台“歪脖子围城”，想第一时间看到最新文章的朋友可以关注一下。
