PHP小码农

Appearance

发展历史与版本 ​

本节将带你回顾 HTML 从诞生至今三十多年的发展历程，包括各个版本的重要特性和里程碑事件。了解这段历史有助于你理解 HTML 为什么是今天的样子，以及 HTML5 为何如此重要。

前置知识

阅读本节前，建议先了解：HTML 能做什么

基础概念 ​

HTML 的历史可以追溯到 1989 年。在瑞士日内瓦的欧洲核子研究中心（CERN），一位名叫蒂姆·伯纳斯-李（Tim Berners-Lee）的科学家发明了万维网（World Wide Web），并创建了 HTML 作为构建网页内容的标记语言。

从那时起，HTML 经历了多次版本迭代：从最初简单的标签集，到 XHTML 的严格规范化尝试，再到 HTML5 的全面革新。当前 HTML 已进入 Living Standard（活标准） 模式，由 WHATWG 组织持续维护和演进。

时间线概览 ​

时间版本/事件里程碑
1989万维网概念提出Tim Berners-Lee 在 CERN 提出万维网提案
1991HTML 标签（未编号）最初的 18 个 HTML 标签定义
1993HTML+ 草案首次尝试规范化 HTML
1995HTML 2.0第一个正式标准（RFC 1866）
1997HTML 3.2W3C 首个推荐标准，引入表格、applet
1997HTML 4.0引入 CSS 样式表、脚本支持、无障碍
1999HTML 4.01经典版本，广泛使用超过十年
2000XHTML 1.0基于 XML 的严格 HTML 语法
2001XHTML 1.1更严格的模块化设计
2004Web Applications 1.0WHATWG 开始独立推进 HTML 演进
2008HTML5 第一份草案W3C 和 WHATWG 联合发布
2012HTML5 候选推荐标准趋于稳定
2014HTML5 正式推荐W3C 发布 HTML5 推荐标准
2017HTML 5.1增量更新版本
2019HTML Living StandardW3C 和 WHATWG 联合采用活标准模式
2021HTML 5.2最后一版的快照标准
至今Living StandardWHATWG 持续更新，不再有"6.0"

早期阶段（1989 - 1995） ​

HTML 的诞生 ​

1989 年 3 月，Tim Berners-Lee 向 CERN 提交了一份名为 "Information Management: A Proposal"（信息管理：一个提案） 的文档，描述了一个使用超文本链接不同文档的信息系统。这个提案就是万维网的雏形。

到 1990 年底，Berners-Lee 已经实现了三个关键技术：

  • HTML（HyperText Markup Language）：用于创建和格式化网页内容
  • HTTP（HyperText Transfer Protocol）：用于传输网页数据的通信协议
  • URL（Uniform Resource Locator）：用于定位网络资源的地址系统
html
<!-- 1991 年 Tim Berners-Lee 编写的第一个网页的简化版 -->
<h1>World Wide Web</h1>
<p>The WorldWideWeb (W3) is a wide-area hypermedia information retrieval
   initiative aiming to give universal access to a large universe of documents.</p>

<!-- 当时可用的标签非常有限 -->
<dl>
  <dt>What's out there?</dt>
  <dd>Pointers to other information.</dd>
</dl>
<ul>
  <li><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">The Project</a></li>
</ul>

HTML 2.0 ​

1995 年，IETF 发布了 HTML 2.0（RFC 1866），这是 HTML 的第一个正式标准规范。它定义了：

  • 基本文本格式化标签：<h1> 到 <h6>、<p>、<b>、<i>、<tt>
  • 链接标签：<a>
  • 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
  • 图片标签：<img>
  • 表单标签：<form>、<input>、<select>、<textarea>
  • 表格标签：<table>（在后续修订中添加）
html
<!-- HTML 2.0 时代的典型页面 -->
<title>My Home Page</title>
<h1>Welcome to My Home Page</h1>
<p>This is a paragraph of text.</p>
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>
<a href="http://info.cern.ch/">Visit CERN</a>

HTML 4 时代（1997 - 1999） ​

HTML 3.2（1997 年 1 月） ​

HTML 3.2 是 W3C 发布的第一个 HTML 推荐标准。它在 HTML 2.0 的基础上增加了许多重要特性：

新增特性说明
表格增强支持更复杂的表格布局
applet 标签嵌入 Java 小程序（已废弃）
更多样式属性bgcolor、color、face 等展示属性
脚本支持<script> 标签的初步引入
sub/sup上标和下标
div 和 span通用容器元素
html
<!-- HTML 3.2 典型页面：大量内联样式属性 -->
<body bgcolor="#FFFFFF" text="#000000">
  <font face="Arial, sans-serif" size="4" color="#333333">
    <h2>欢迎使用我的网站</h2>
  </font>
  <table border="1" cellpadding="5" cellspacing="0" width="600">
    <tr bgcolor="#CCCCCC">
      <td><b>名称</b></td>
      <td><b>描述</b></td>
    </tr>
    <tr>
      <td>HTML 3.2</td>
      <td>引入了表格和样式属性</td>
    </tr>
  </table>
</body>

警惕内联样式

HTML 3.2 引入的大量展示属性（如 bgcolor、font、align）在现代 HTML 中已经废弃。应使用 CSS 来控制样式。

HTML 4.0（1997 年 12 月） ​

HTML 4.0 是一次重大飞跃，它开始将内容和展示分离：

  • 废弃展示标签：推荐不再使用 <font>、<center>、<b> 等纯展示标签
  • 引入 CSS：推荐使用样式表来控制页面表现
  • 引入脚本：正式支持 JavaScript，通过 <script> 和事件属性
  • 无障碍支持：增加无障碍属性（如 tabindex、accesskey）
  • 国际化：引入 lang 属性和字符编码声明

HTML 4.01（1999 年 12 月） ​

HTML 4.01 对 HTML 4.0 进行了小幅修订和错误修正，它包含三种文档类型声明（DOCTYPE）：

html
<!-- 严格型：不包含任何废弃元素和属性 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- 过渡型：包含废弃元素，便于从旧版迁移 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!-- 框架型：用于包含框架的页面 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>HTML 4.01 示例</title>
  <!-- 使用 CSS 样式表，而非内联属性 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>HTML 4.01 时代</h1>
  <p>这个时代的 HTML 开始与 CSS 协作。</p>
</body>
</html>

HTML 4.01 成为了 Web 长期使用的稳定标准，在 HTML5 出现之前一直是大部分网站使用的版本。

XHTML 的兴衰（2000 - 2009） ​

XHTML 1.0（2000 年 1 月） ​

XHTML（eXtensible HyperText Markup Language）试图将 HTML 推向 XML 的严格规范：

  • 标签必须闭合：<p> 必须有 </p>
  • 标签和属性必须小写：<DIV> 是不合法的
  • 属性值必须用引号包裹：width=100 不合法，必须是 width="100"
  • 所有属性必须有值：<input checked> 不合法，必须是 checked="checked"
  • 文档必须是格式良好的 XML：符合 XML 解析规则
html
<!-- XHTML 1.0 严格型文档 -->
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>XHTML 示例</title>
  <style type="text/css">
    body { margin: 0; padding: 20px; }
  </style>
</head>
<body>
  <h1>XHTML 严格语法</h1>
  <p>所有标签必须正确闭合。</p>
  <br />   <!-- 自闭合标签必须有斜杠 -->
  <img src="photo.jpg" alt="示例图片" />
  <input type="text" name="username" />
</body>
</html>

XHTML 的失败 ​

XHTML 2.0 的开发在 2009 年被 W3C 正式放弃，主要原因包括：

问题说明
语法过于严格一个未闭合的标签就导致整个页面无法显示（XML 的严格解析）
兼容性问题浏览器对 XHTML 的支持不一致，大多数网站仍以 HTML 方式提供
发展缓慢XHTML 2.0 追求完美，导致标准推进极其缓慢
与实际脱节网页内容以 HTML 风格编写，浏览器以 HTML 方式解析（"tag soup"）
Flash 的冲击多媒体需求被 Flash 满足，HTML 标准化似乎不再紧迫

历史教训

XHTML 的失败告诉我们：Web 标准必须向后兼容。一个新标准如果不能处理现有的大量"不完美"网页，就很难被广泛采用。

HTML5 的诞生与革命（2004 - 至今） ​

WHATWG 的崛起 ​

2004 年，苹果、Mozilla 和 Opera 三家公司的代表在 W3C 关于 Web 标准方向的研讨会上提出了一份名为 "Web Applications 1.0" 的提案，主张扩展 HTML 以支持现代 Web 应用的需求，而非转向 XHTML 2.0 的严格路线。W3C 拒绝了这个提案。

于是这三家公司成立了 WHATWG（Web Hypertext Application Technology Working Group），开始独立推进 HTML 的演进。这个工作组后来得到了所有主流浏览器厂商的支持。

HTML5 里程碑 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 时代的网页</title>
</head>
<body>
  <!-- 语义化标签 -->
  <header>
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>HTML5 带来的新能力</h1>

      <section>
        <h2>原生多媒体</h2>
        <video controls width="400">
          <source src="demo.mp4" type="video/mp4">
        </video>
      </section>

      <section>
        <h2>Canvas 绑图</h2>
        <canvas id="myCanvas" width="400" height="200">
          你的浏览器不支持 Canvas
        </canvas>
      </section>

      <section>
        <h2>本地存储</h2>
        <p>Web Storage 和 IndexedDB 让网页可以离线存储数据。</p>
      </section>

      <section>
        <h2>地理定位</h2>
        <p>通过 Geolocation API 获取用户位置信息。</p>
      </section>

      <section>
        <h2>表单增强</h2>
        <input type="email" placeholder="邮箱">
        <input type="date">
        <input type="range" min="0" max="100">
      </section>

      <section>
        <h2>可折叠内容</h2>
        <details>
          <summary>点击展开</summary>
          <p>HTML5 原生支持折叠展开。</p>
        </details>
      </section>
    </article>
  </main>

  <footer>
    <p>HTML5 让 Web 更强大。</p>
  </footer>
</body>
</html>

HTML5 核心新增特性 ​

特性类别具体内容
语义化标签<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>
多媒体<video>、<audio>、<source>、<track>
图形<canvas>、<svg>
表单增强新输入类型（email、date、range 等）、placeholder、required、pattern
本地存储Web Storage（localStorage / sessionStorage）、IndexedDB
离线应用Service Worker、Application Cache（已废弃）
通信WebSocket、Server-Sent Events
地理定位Geolocation API
拖放Drag and Drop API
Web Workers多线程 JavaScript 执行
History API无刷新页面导航

HTML5 的 DOCTYPE 简化 ​

对比 DOCTYPE 声明的变化：

html
<!-- HTML 4.01 的 DOCTYPE（冗长） -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 的 DOCTYPE（更加冗长） -->
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 的 DOCTYPE（简洁） -->
<!DOCTYPE html>

HTML Living Standard 模式 ​

从快照到活标准 ​

传统标准制定采用"版本快照"模式——每隔几年发布一个版本（HTML 4.0、HTML 4.01、HTML 5.0、HTML 5.1、HTML 5.2）。这种方式的问题是：标准更新太慢，跟不上 Web 的发展速度。

2019 年，W3C 和 WHATWG 达成协议，联合采用 HTML Living Standard 模式：

  • 不再有"HTML 6"：HTML 将持续演进，没有下一个大版本号
  • 浏览器驱动：新特性由浏览器实现先行，然后写入标准
  • 持续更新：WHATWG 的 HTML 规范是一个持续更新的活文档
  • 向后兼容：新特性不会破坏现有网页
html
<!-- Living Standard 模式下，持续新增的特性示例 -->

<!-- 2020 年左右加入：dialog 元素 -->
<dialog id="myDialog">
  <p>这是一个原生对话框。</p>
  <button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
  打开对话框
</button>

<!-- 2022 年左右加入：popover 属性 -->
<button popovertarget="info">显示信息</button>
<div id="info" popover>这是一条弹出信息。</div>

<!-- 持续演进中：更多新特性正在规范和实现 -->

Living Standard 模式的优势 ​

优势说明
快速迭代新特性可以随时添加，无需等待大版本发布
浏览器先行浏览器实现新特性后，标准随后确认
避免争议不再有"HTML5 还是 XHTML2"的方向之争
向后兼容所有现有网页都能继续正常工作
透明度高规范在 GitHub 上公开维护，任何人可以提交问题

如何跟踪最新标准

你可以访问 WHATWG HTML 标准 查看最新的活标准文档，或关注 MDN 的浏览器兼容性表 了解各特性的浏览器支持情况。

实战示例 ​

下面是一个演示 HTML 从旧版到 HTML5 演进过程的对比示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 版本演进对比</title>
</head>
<body>
  <h1>HTML 版本演进对比</h1>

  <h2>HTML 3.2 风格（已废弃的写法）</h2>
  <pre><code>&lt;body bgcolor="#FFFFFF"&gt;
  &lt;font face="Arial" size="4" color="red"&gt;
    &lt;center&gt;标题&lt;/center&gt;
  &lt;/font&gt;
&lt;/body&gt;</code></pre>
  <p>特点：展示属性直接写在标签中，无 CSS，无语义。</p>

  <hr>

  <h2>HTML 4.01 风格</h2>
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;页面标题&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="header"&gt;
    &lt;div id="nav"&gt;导航&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;内容&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
  <p>特点：使用 CSS 分离样式，但缺乏语义化标签，DOCTYPE 冗长。</p>

  <hr>

  <h2>HTML5 风格（当前推荐）</h2>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport"
        content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;nav&gt;导航&lt;/nav&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;article&gt;内容&lt;/article&gt;
  &lt;/main&gt;
  &lt;footer&gt;页脚&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
  <p>特点：语义化标签、简洁 DOCTYPE、移动端适配、Living Standard 持续演进。</p>
</body>
</html>

注意事项 ​

  • 不要再使用 HTML 3.2 的展示属性（<font>、bgcolor 等），它们已被废弃
  • XHTML 2.0 已被放弃，不要基于 XHTML 2.0 规范编写代码
  • 使用 HTML5 的简洁 DOCTYPE 声明 <!DOCTYPE html> 即可
  • HTML Living Standard 持续演进，关注浏览器兼容性表决定何时使用新特性
  • 新特性（如 <dialog>、popover）在旧浏览器中可能不支持，使用前检查兼容性

最佳实践 ​

  • 始终使用 <!DOCTYPE html> 作为文档声明
  • 使用 HTML5 语义化标签替代 <div class="header"> 等无语义写法
  • 优先使用新特性（如 <video> 替代 Flash），但注意浏览器兼容性
  • 定期关注 Living Standard 的更新和 MDN 的兼容性数据
  • 不要等待"HTML 6"——它不会出现。Web 标准会持续小步迭代

下一节

继续学习：HTML 与 XHTML 的区别

参考链接 ​