1.2 HTML5的发展历程

HTML5的演进历程反映了Web技术的重大变革，从简单的文档标记语言发展为功能强大的应用平台。本节将带您了解HTML5从诞生到成熟的关键发展阶段。

一、前HTML5时代（1991-2004）

1. HTML的诞生（1991）

• 蒂姆·伯纳斯-李（Tim Berners-Lee）在CERN工作期间创建
• 最初只有18个标签的简单标记语言
• 目的：科学文档的共享和链接

2. HTML标准化进程

问题浮现：随着Web应用复杂度提升，原有HTML标准已无法满足需求：

• 缺乏多媒体原生支持（依赖Flash/Silverlight）
• 语义表达不足（过度依赖<div>）
• 交互能力有限

二、HTML5的孕育期（2004-2007）

1. WHATWG的成立（2004）

• 由Apple、Mozilla、Opera等浏览器厂商组建
• 反对W3C的XHTML 2.0方向（过于严格，不向后兼容）
• 提出Web Applications 1.0规范（HTML5前身）

2. 关键理念转变

• 向后兼容：不破坏现有网页
• 实用主义：解决实际开发问题
• 增强而非替代：渐进式改进

三、标准化进程（2007-2014）

1. W3C与WHATWG的合作（2007）

• W3C重启HTML工作组，接纳WHATWG成果
• 形成双轨制发展：WHATWG：维护"HTML Living Standard"W3C：发布版本化标准（HTML5、HTML5.1等）

2. 里程碑版本

3. 关键技术加入时间线

• 2009：Canvas 2D API、Web Storage
• 2011：Geolocation API、Web Workers
• 2012：WebSocket、File API
• 2013：WebRTC、Flexbox布局

四、后HTML5时代（2014至今）

1. 标准演进模式

• 从版本化发布转为"Living Standard"
• 模块化更新（单独组件独立发展）
• 每年发布稳定特性快照

2. 重要扩展规范

五、浏览器支持战争与和解

1. 早期兼容性问题

• 不同浏览器实现差异大
• 前缀泛滥（-webkit-, -moz-, -ms-等）

/* 2010年代的典型CSS代码 */
.box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

2. 现代标准化进程

• 通过Web Platform Tests（WPT）确保一致性
• 主流浏览器自动更新机制
• Can I Use网站成为开发者重要参考

六、影响深远的HTML5时刻

1. 2010年：乔布斯发表"Thoughts on Flash"

• 指出Flash的缺陷（安全、性能、触控支持）
• 明确iOS将支持HTML5
• 加速了Web技术的革新

2. 2012年：Facebook放弃HTML5转原生

• 早期移动端性能问题暴露
• 促使HTML5性能优化浪潮

3. 2015年：ES6标准发布

• JavaScript语言现代化
• 与HTML5形成更强大的组合

技术演进案例：视频播放的实现变迁

<!-- 2005年（Flash方案） -->
<object data="player.swf" type="application/x-shockwave-flash">
    <param name="movie" value="video.flv">
</object>

<!-- 2010年（过渡期） -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <!-- Flash回退方案 -->
    <object data="player.swf" type="application/x-shockwave-flash">
        <param name="movie" value="player.swf?video=video.flv">
    </object>
</video>

<!-- 现代方案（2023） -->
<video controls playsinline webkit-playsinline>
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="video.vp9.webm" type="video/webm; codecs=vp9">
</video>

当前发展趋势

1. Web组件化：Custom Elements + Shadow DOM
2. Web性能：WASM、WebGPU
3. PWA生态：Service Worker + Manifest
4. Web3.0集成：区块链、去中心化存储