第1节 Web简史：从HTML到HTML5的演进
了解HTML5的诞生过程，能让你看清它为何如此强大，以及它将如何帮助你构建更出色的网页。这不仅仅是学习一段历史，更是理解你手中工具的设计初衷，从而在未来的开发中做出更明智的选择。
从“文档”到“应用”的转变
要理解HTML5，我们首先要明白一个核心的演变：Web的核心任务，已经从展示“静态文档”转向了构建“动态应用”。早期的网页就像是一本在线的、可以跳转的电子书，而今天的网页，比如在线文档编辑器、音乐播放器或者复杂的社交平台，已经具备了传统桌面软件的大部分功能。HTML5正是为了适应和推动这一转变而生的。
几个关键概念：标准、浏览器与API
在深入故事之前，我们先厘清几个会反复出现的词。
Web标准：你可以把它想象成网页世界的“语法规则”和“建筑规范”。它规定了HTML、CSS、JavaScript等技术应该如何书写和运作。遵循标准，能确保你的网页在不同的“建筑公司”（即浏览器）里看起来和运行起来都差不多。万维网联盟（W3C）和Web超文本应用技术工作组（WHATWG）是制定这些标准的主要组织。
浏览器：这是你上网的窗口，也是我们代码的“执行者”和“展示者”。它负责解读HTML、CSS和JavaScript代码，并将它们渲染成你能看见和交互的页面。IE、Firefox、Chrome、Safari都是浏览器。
API：中文叫“应用程序编程接口”。这听起来很技术，但其实很简单。想象一下，你的电脑有摄像头和麦克风，但一个普通的记事本软件无法直接使用它们。浏览器提供了一个“摄像头API”，你的网页JavaScript代码通过调用这个API，就能获得使用摄像头的许可和能力。HTML5带来了大量新的API，让网页能操作本地文件、绘制复杂图形、进行实时通信等。
一场始于混乱的“浏览器大战”
故事要从上世纪90年代末说起。那时，网景公司（Netscape）的Navigator和微软公司（Microsoft）的Internet Explorer（IE）为了争夺市场，展开了一场激烈的“浏览器大战”。这听起来像是好事，竞争带来创新嘛？但当时的情况是，它们各自为政，加入了大量互不兼容的独家功能。开发者们苦不堪言，为了让网页在两个浏览器上都能正常显示，常常需要写两套不同的代码。一个经典的例子是动态HTML（DHTML），IE和Netscape实现它的方式完全不同。这导致了一个碎片化的、对开发者极不友好的Web环境。
标准化的曙光与XHTML的插曲
为了结束这种混乱，W3C推动了HTML4.0和CSS标准的建立，这为Web的规范化奠定了基础。但随后，W3C认为HTML过于松散，转向推崇更严格、更结构化的XHTML。XHTML要求所有标签必须闭合、属性必须加引号，语法必须像XML一样严谨。初衷是好的，但过于严苛的规则（一个小的语法错误可能导致整个页面无法显示）和缓慢的标准化进程，让实践变得困难。与此同时，Web应用的需求却在飞速增长，开发者们开始大量使用Adobe Flash等浏览器插件来实现动画、视频和复杂交互，因为原生HTML能力太弱了。这实际上让Web脱离了其开放的标准轨道。
WHATWG与HTML5的诞生：务实者的反击
转折点出现在2004年。当时，W3C正专注于XHTML 2.0，这是一个与过去不兼容的全新设计。一些主要的浏览器厂商（如Opera、Mozilla）和开发者认为，这脱离了Web实际发展的需要。于是，他们自行组建了WHATWG，并启动了“Web Applications 1.0”项目，其核心思想是：向后兼容（新标准要能处理旧网页）、基于实践（标准应描述浏览器已经实现或正在实现的功能）、满足现实需求（直接解决开发者构建现代应用时遇到的痛点）。这个项目，后来被W3C接纳，并最终发展成为我们今天所知的HTML5。
HTML5带来了什么？不只是新标签
HTML5远不止是几个新的<header>、<footer>标签。它是一个庞大的技术集合，主要包括：
更丰富的语义化标签：像<article>、<nav>、<section>这样的标签，让网页结构对人和机器都更清晰。
原生多媒体支持：引入了<audio>和<video>标签，让音视频播放不再依赖Flash插件。你可以在新闻网站上直接看到内嵌的、由浏览器原生控制的视频播放器。
强大的图形与绘图：<canvas>元素允许你使用JavaScript动态绘制2D图形、图表甚至游戏。例如，你可以在一个数据分析网页中，实时绘制出交互式的数据图表。
增强的表单功能：新增了邮箱、网址、日期、颜色选择器等输入类型，以及占位符文本、必填项验证等属性，极大简化了表单开发。
离线和存储能力：Web Storage和IndexedDB让网页能在客户端存储大量数据，Service Worker等技术甚至能让网页在没网时也能部分运行。想象一下，你在手机浏览器里使用一个笔记应用，即使网络不稳定，你依然可以记笔记，数据会先保存在手机里，等有网时再同步。
设备访问与通信API：Geolocation API可以获取你的地理位置（用于地图服务），WebSocket支持服务器和浏览器之间建立持久连接，实现实时聊天或游戏。
需要澄清的两个常见误解
HTML5 ≠ 一个孤立的技术点：很多人误以为HTML5只是HTML语言的一个新版本。实际上，它常常是HTML5新标签 + CSS3新样式 + 新JavaScript API的统称，是一个代表“现代Web开发技术”的营销术语。当有人说“这个效果用HTML5实现”，他很可能指的是综合运用了这三者。
HTML5并非瞬间取代了一切：HTML5标准的制定和浏览器的全面支持是一个漫长的过程。即使在今天，一些较旧的API（如Application Cache）已被更新的技术（如Service Worker）所取代。学习HTML5，你需要了解哪些是稳定且被广泛支持的核心特性，哪些是已经或正在演进的部分。它的设计哲学是渐进增强，而不是革命性推翻。
动手与思考
时光机之旅：尝试在互联网档案馆（Wayback Machine）等网站上，找一个20年前的知名网站（比如早期版本的雅虎或谷歌）的截图或存档页面。再打开该网站的现代版本。对比一下，除了视觉设计，你从页面结构和可能的功能上能看出哪些根本性的不同？这些不同背后，反映了Web技术的哪些演进？
技术侦探：打开你日常最常使用的几个网站（如微博、视频站、在线文档工具）。尝试通过浏览器的“开发者工具”（通常按F12键打开），在“元素”面板里查看它们的网页结构。你能找到<header>、<nav>、<video>或<canvas>这些HTML5标签的身影吗？思考一下这些标签在页面中具体承担了什么角色。
回顾本节要点
核心驱动力：Web从静态文档向动态应用演进的需求，是HTML5诞生的根本动力。
标准之争：HTML5的诞生源于对僵化标准（XHTML 2.0）的反思，WHATWG倡导的务实、兼容、基于实践的理念取得了成功。
能力飞跃：HTML5是一套赋予网页原生多媒体、图形绘制、本地存储和设备交互等高级能力的标准集合。
生态整合：它通常与CSS3、JavaScript新API协同工作，共同构成现代前端开发的基石。
持续演进：Web标准是活着的规范，HTML5本身也在不断吸收新的实践和需求，进行更新和迭代。