第1节 从HTML到HTML5：一场Web标准的进化史
你可能觉得“HTML5”只是一个时髦的技术名词，但它的出现，实际上彻底改变了我们浏览网页和开发网站的方式。简单来说，学习HTML5，就是学习一门让网页从“静态文档”变成“智能应用”的语言。它不是凭空出现的魔法，而是一场持续了二十多年的、关于如何更好地在互联网上分享信息的进化结果。理解这场进化，会让你在接下来的学习中，不仅知道“怎么写代码”，更能明白“为什么这样写”，从而在未来的Web世界里走得更稳、更远。
理解这场进化的起点：什么是Web标准？
在深入历史之前，我们先要搞清楚一个核心概念：Web标准。你可以把它想象成现实世界中的“交通规则”。如果没有统一的红绿灯、车道线和指示牌，全世界的交通就会陷入混乱。同样，Web标准就是互联网世界的“交通规则”，它规定了浏览器（如Chrome、Firefox）应该如何理解并展示网页代码，也规定了开发者（也就是未来的你）应该如何编写这些代码。
这套规则主要由三个部分组成：结构（HTML）、表现（CSS）和行为（JavaScript）。HTML负责定义网页里有什么内容，比如这是一个标题、那是一段文字、这里有个按钮；CSS负责决定这些内容长什么样，比如标题是红色还是蓝色，文字有多大，按钮放在哪里；JavaScript则负责让这些内容“动起来”，比如点击按钮后弹出提示。HTML5，正是这套规则中关于“结构”部分的最新、也是最强大的一次升级。
从简单标签到“浏览器大战”：早期的混乱岁月
HTML的诞生可以追溯到1990年，它的发明者蒂姆·伯纳斯-李爵士最初只是想创造一个简单的方法，让物理学家们能方便地共享文档。最早的HTML非常简陋，只有几十个标签，比如 <p> 表示段落，<h1> 表示大标题。那时的网页真的就像一份加了点超链接的电子文档。
然而，随着互联网在90年代中期爆炸式增长，商业公司看到了其中的巨大潜力。网景公司（Netscape）和微软（Microsoft）为了争夺浏览器市场的控制权，展开了一场著名的“浏览器大战”。它们各自为HTML添加了大量私有、互不兼容的新标签和新功能。比如，网景的浏览器可能支持一个叫 <blink> 的标签，让文字闪烁，而微软的IE浏览器则可能支持 <marquee>，让文字像跑马灯一样滚动。
这对开发者来说是一场噩梦。为了确保网页在两种浏览器上都能正常显示，他们不得不写两套不同的代码，或者加上一堆丑陋的判断语句：“如果是网景浏览器，就这么显示；如果是IE浏览器，就那么显示。”这严重阻碍了Web的健康发展，网页开发成本高昂，且体验支离破碎。
W3C的救赎与XHTML的插曲
为了结束这种混乱，Web的发明者蒂姆·伯纳斯-李爵士创立的万维网联盟（W3C）站了出来，致力于制定统一的Web标准。W3C在90年代末推出了HTML 4.01，试图规范大家的行为。随后，他们又推动了一个更严格、更“纯净”的标准——XHTML。
XHTML要求代码必须像XML一样严谨：所有标签必须小写，所有属性值必须用引号括起来，所有标签都必须正确闭合（比如 <br> 必须写成 <br />）。这个想法很好，旨在让网页代码更规范、更容易被机器处理。但问题在于，它太严格了。浏览器为了兼容网络上已经存在的海量“不严谨”的旧网页，不得不采用一种非常宽松的模式来解析代码，这导致XHTML的严格规则在现实中很难被完全执行，反而给开发者增加了不少负担。
为何我们需要HTML5：问题催生变革
就在W3C专注于完善XHTML的时候，Web世界正在发生翻天覆地的变化。新的需求不断涌现，而旧的标准显得力不从心。这直接催生了HTML5的诞生。
首先，富媒体内容成为刚需。2005年前后，YouTube这类视频网站兴起，但当时在网页上播放视频的唯一“标准”方式是依赖Adobe Flash插件。这不仅需要用户额外安装，还存在安全漏洞、耗电高、在苹果设备上不被支持等问题。开发者们强烈渴望能有一种原生的、不需要插件的方式来处理音视频。
其次，Web应用开始挑战桌面软件。像Gmail这样的应用，已经能提供接近Outlook的体验。它们需要更强大的本地存储能力（以便离线工作）、更复杂的图形绘制功能（用于图表、游戏）、以及更流畅的实时通信能力。传统的HTML 4加上JavaScript的组合，在这些需求面前已经捉襟见肘。
最后，语义的模糊性阻碍了发展。在HTML4中，几乎所有内容分区都靠一个万能的 <div> 标签，然后通过 id 或 class 属性来区分这是页头、导航还是页脚。这不仅让代码难以阅读（满屏都是 <div>），也对搜索引擎和不方便视觉浏览的屏幕阅读器用户非常不友好，因为它们很难理解一堆 <div> 各自代表什么。
HTML5的诞生：一场务实的革命
面对这些现实问题，一部分来自苹果、Opera等公司的工程师觉得W3C的进展太慢，他们自行组建了WHATWG（Web超文本应用技术工作组），开始起草一份名为“Web Applications 1.0”的新标准草案。他们的理念非常务实：与其追求理论上的完美和严格，不如优先解决Web开发者遇到的实际问题，并且要确保新标准能优雅地兼容旧内容。
WHATWG的工作最终得到了认可，W3C也加入了进来，共同推进这个新的标准，并将其命名为HTML5。HTML5的设计哲学非常清晰：
新特性应该基于实践，解决真实需求。 于是，我们有了原生的 <video> 和 <audio> 标签来播放媒体，有了 <canvas> 来绘制图形，有了Web Storage来本地存储数据。
强化语义，让代码自带含义。 于是，我们有了 <header>, <nav>, <main>, <footer>, <article>, <section> 等一系列语义化标签，明确告诉浏览器和辅助设备：“这块是导航”，“那块是文章主体”。
兼容并包，平稳过渡。 HTML5的解析规则非常“宽容”，能很好地处理旧代码，同时鼓励开发者使用新的、更优的写法。
一个生动的行业案例是视频网站。在HTML5普及前，视频网站必须为同一个视频准备多种格式（如Flash的.flv文件），并依赖插件播放。如今，它们只需使用 `<video> 标签，并提供MP4、WebM等几种浏览器原生支持的格式文件即可。代码变得极其简洁：<video src="movie.mp4" controls></video>。这不仅简化了开发，提升了安全性和性能，还让视频能在手机、平板、电脑所有设备上无缝播放。
关于HTML5，两个常见的误解
误解一：HTML5只是一个新版本的HTML标签。
这是一个非常普遍但过于狭隘的看法。HTML5确实引入了很多新标签，但它更是一个庞大的“技术集合”或“平台”。它包括了之前提到的语义化标签、多媒体、Canvas绘图，还包括了像本地存储（LocalStorage）、地理定位（Geolocation）、拖放（Drag and Drop）等一系列JavaScript API。当你说“我用HTML5开发了一个应用”时，你很可能指的是运用了这一整套增强Web能力的技术。
误解二：HTML5现在用还为时过早，兼容性很差。
这个误解在十年前可能成立，但在今天已经完全过时了。HTML5的核心特性在现代浏览器（Chrome, Firefox, Safari, Edge）中得到了近乎完美的支持。W3C也在2014年就正式定稿了HTML5推荐标准。如今，不支持HTML5的浏览器（如古老的IE8）市场份额已经微乎其微。对于初学者而言，你应该放心地学习和使用HTML5标准，这是现代Web开发的绝对主流。
动手之前，先思考一下
观察与发现：打开你经常浏览的几个网站（比如新闻门户、视频平台、社交网站）。尝试使用浏览器的“查看网页源代码”功能（通常右键点击页面即可找到）。看看你能在代码中找到哪些熟悉的标签？有没有发现像 <header>、<video> 这样的HTML5标签？
历史情景题：假设你生活在2005年，是一名网页开发者。你的客户要求你在他的企业网站上添加一个公司宣传视频，并且要确保所有访客都能观看。根据本节学到的历史知识，描述一下你当时可能会面临哪些技术挑战和选择？
概念辨析：用自己的话，向一位完全不懂技术的朋友解释“Web标准”和“HTML5”分别是什么，以及它们之间的关系。你可以尝试使用“交通规则”和“最新交规修订版”这样的类比。
本节要点回顾
Web标准是基石：它像交通规则，确保了浏览器和开发者能顺畅协作，其核心由HTML、CSS、JavaScript构成。
混乱催生统一：“浏览器大战”时期的私有扩展导致了开发噩梦，促使W3C推动标准统一。
需求推动进化：富媒体、Web应用、语义化等现实需求，是HTML5诞生的根本动力。
HTML5是解决方案：它并非只是新标签，而是一整套务实的技术集合，旨在解决Web发展的核心痛点。
兼容已成常态：HTML5已是现代Web开发的默认选择，其核心特性拥有极佳的浏览器支持度。