HTML 30 年进化史！

文章转载自公众号  CSDN ， 作者 司徒正美

作者 | 司徒正美

责编 | 伍杏玲

本文经授权转自CSDN（ID：CSDNnews）

随着近年来，前端框架战争的白热化，战斗溢出到后端、移动端、小程序端等层面……大家似乎不像以前那么关注底层，HTML、JavaScript、CSS 被一些更高级的语言所转译，成为了前端的汇编语言。

或许在许多年后，培训公司将会教授新人：TypeScript 怎么写，Sass 怎么写，JSX 怎么写，这时可能会出现 jQuery 时代的荒诞问题——jQuery 与JavaScript 哪一个更快？这是一种悲哀，也是时代的进步吧。正如我们开心敲着电脑，不用关心底层的芯片是如何运作的。这是文明建立在极度脆弱的生态下的至高产品。

而我们浏览的复杂页面的底层是 HTML+CSS+JavaScript 构建的，其中HTML 是基础中的基础，但它经常被人所忽视。要不想页面文明轻易湮灭，我们需认真封存这部分知识，就像亚述人把他们的知识楔入到泥板中一样。

HTML 的前身 SGML

战争驱动文明发展，互联网是美国军队为了快速传送情报而发明的。如果单纯传送文字，当时的电报就可以实现，但显然像地图上的图像信息，电服就不行了。这时候需要一种语言来组织这些文字与影像，最好还能存在交互性。交互虽然不能实时，但总好过没有。于是学者们找到当时最流行的文档描述语言 SGML。

SGML 是国际上定义电子文档和内容描述的标准。它源于 1969 年 IBM 公司开发的文档描述语言 GML，GML 主要用来解决不同系统中文档格式不同的问题。后经过多年发展，1986 年经 ISO 批准为国际标准 ISO8897，并被称为 SGML。

它有许多 HTML 的特征，如内容与样式分离。在 SGML 中，标记分两种：一种用来描述文档显示的样式，称为程序标记；另一种用来描述文档中语句的用途，称为描述标记。一个 SGML 文件通常分三个层次：结构、内容和样式。结构为组织文档的元素提供框架，内容是信息本身，样式控制内容的显示。正因为如此，它的使用范围很广，被许多大型公司用来创建和发布信息。诸如布告、技术手册、章节目录、设计规范、各种信函等，都可以用它来设计描述。

但是 SGML 有致命的缺憾，并且它的优点成为了它的缺点。SGML 设计精良，规范严谨，导致了其复杂性也高，在军情紧急的情况下，需要快速交换情报，不能慢吞吞写好每个标签，因为当时每秒几个比特的网速也是一个问题。

因此它需要裁减，于是有了HTML。

http://info.cern.ch/ 世界第一个网站，非常简洁。

浏览器大战对 HTML 的影响

当时大家原本要的是一个精简版的 SGML，但最终他们得到的一个完全不同的东西。

这要从解析网页的浏览器说起，Web 之父 Tim Berners Lee 设计的浏览器WorldWidWeb 过于简单，于是让商业浏览器有可乘之机。

在刚开始时，浏览器商还是按照 W3C 的制定的规则，如 Mosia、Netscape，但微软介入之后就发生改变。微软制定自己的浏览器语法与标准，于是导致了两套标准的出现。

在规划中，HTML 也是一门严谨的语言，是高度有组织性、规范化、模块化。例如，规范化是有一个文档类型声明 DOCTYPE 来指明它怎么解析的。模块化，是说各种标签其实也是有组强性的，几个几个地划分地不同的族群，合起来实现一个功能，最著名的是表单与表格。

但是后来出现了一些意外，一些用来装饰用的标签（s、b、i、u、font）因为 CSS 的出现，被人们诉之败作，渐渐被边缘化与废弃。一些用来模拟 Excel 功能的标签（table、tbody、tr）被人们用来布局，弄得页面难以维护。

在 CSS 标准化时代，又矫枉过正，硬生生地用 DIV 来模拟表格。一些用来实现广告功能的标签，导致会有满屏飘动、不让用户关闭的乱象。在这几个大事故中，许多标签就是被胡乱使用或边缘化。

我个人认为最大原因是 W3C 没能自己开发一个浏览器，一直倚重某一个方，导致造成 HTML 的失控。

HTML 在语法上设计得非常简单易学。

HTML 标签是包在小括号里面，没有人规定标签名是大写还是小写。开标签中，标签名旁边有一些属性，这些属性的属性值没有人规定它是否能引号，引号是单引号还是双引号，没有规定标签是否一定要闭合。

可能当初是有规定的，但无法遵循。浏览器需要最快地将内容呈现给用户，但当时的网速不太可能，于是浏览器大厂允许用户可以不用闭合标签，不用严格括起属性值，也能跑起页面。这种纵容在当时成了优势，被其他浏览器争相模仿。

此外，还有更厉害的传输优化，比如页面源码是这样的：

实际在 IE6~8 的控制台下看到的源码是这样，通过大写化与对布尔属性的特殊处理，一点点地减少传输内容。

在 Google 早期的首页中，html、head、body 标签是刻意省略掉，因为它知道浏览器会支持这样残缺的页面。在自然界中，这是不可想象的，残缺的东西会被淘汰。

对于 HTML 的失控，W3C 决定开发另一种标签语言，于是 XML 诞生了。但 XML 出现得太晚了，无力回天。它一直作为数据的传输载体而存在，而不是描绘界面用。它其实是能描绘界面的，两个明证是 SVG 语言，及安卓里面的 XML 模板。

HTML 的版本

HTML 发布以来，迭代过许多版本，现在是小步快跑的第 5 版，但 HTML5 已经不是 W3C 所规范的了，是由一个浏览器大厂们组成的俱乐部 WHATWG 发布的。

下面是一个简单的路线图：

不存在 HTML1.0， 各自为战

HTML2.0，从 1995 年 11 月到 2000 年；

HTML3.2,  从 1996 年 1 月到现在；

HTML4.0，从 1997 年 12 月到现在；

HTML4.01，从 1999 年 12 月到现在；

XHTML 1.0，从 2000 年 1 月 20 日到现在；

HTML5.0，从 2014 年 10 月 29 日到现在。

可以看出几个断层，HTML1.0 还没有准备好时，大家就争先抢后地开始做，于是当时相当地混乱。

早期的浏览器包括了：Tim Berners 的 WorldWideWeb 浏览器，兼具浏览器和编辑器功能，但只能运行在NeXTStep操作系统上；CERN的一位数学实习生 Nicola Pellow 开发出 Line-mode 浏览器，能运行在 UNIX 和 MS-DOS 上；Erwise 是第一个带图形界面的浏览器，支持搜索网页中的单词，由四名芬兰大学生开发，在 1992 年发布；加州伯克利的 Pei-Yuan Wei 在1992 年 4月发布了 ViolaWWW，这个浏览器受到了 Mac 程序 HyperCard 的启发，但他没有 Mac 只能接触到 UNIX 机器，1992 年夏天，斯坦福线性加速器中心物理学家 Tony Johnson 为斯坦福的物理学家发布了图形浏览器 Midas；与此同时，CERN 的 Nicola Pellow 和 Robert Cailliau 发布了第一个Mac浏览器 Samba；基于 Viola和 Midas 的 Mosaic 在 1993 年发布；堪萨斯大学发布了 Lynx；康奈尔大学法学院学生 Tom Bruce 发布了 Cello。——节选自《被遗忘的早期浏览器》

HTML3.0时，改了又改，那时五大浏览器的四个玩家已经全场（IE、Netscape、Opera、Safari），要满足四家的喜好非常难。这也是目前还在支持的早期标准。

XHTML 是 W3C 最后一次赌博，想用 XML 的规范来修正 HTML 一直以来松散的编写形式，即要来闭合的地方必须闭合，属性值必须要括起来，废弃的标签不能再使用，还要求对 script 标签的内容使用 CDATA 包裹起来，DOCTYPE 变得很长……它们还专门编写一个网站给大家做校正：

https://validator.w3.org/

下面这段 XHTML 标准模式代码，符合 W3C XHTML 语法，能够执行（保存为 itworks.xhtml 文件，用 Firefox 打开）：

test

if(1<2)

{

alert('a');

}

]]>

xhtml,It works.

俗话说，由俭入奢易，由奢入俭难。用户不习惯，如果写的页面不合格，浏览器不解析，意味着用户会跑去竞争对手中。因此这闹剧草草收场了。浏览器商也看到自己的能量所在，把 HTML 的规范制定收归手中。

HTML的模块介绍

在语义化时代，人家过于关注于单个标签所表示的意思，而忽略了组件是分群体的。只不过有的群体是弱联连，可以混杂其他标签，加之浏览器的自动纠错功能导致人们对它们的误解。这些群体我称之为模块。

我稍微归纳一下，当然在 W3C 的 HTML5.2 中它们也有另一套划分。那套划分很奇怪，某一种标签可能归类到多个类别中。

https://www.w3.org/TR/html52/dom.html#content-models

文档模块

文档模块就是、、、