2.1 HTML5 的主要新特性
2.1 HTML5 的主要新特性
本节摘要：HTML5 是 HTML 自 1999 年 HTML 4.01 之后最大的一次跃迁：语义化标签、表单增强、原生多媒体、图形接口、本地存储、多线程脚本，每一项都对应着旧时代一个具体的痛——插件依赖、脚本补丁、服务器往返。本节把革新按"解决了什么"逐项讲透，并给出新特性的采用判断框架。
学习目标
阅读完本节，你应当能够：
- 按问题域归类 HTML5 的六大革新方向；
- 说明语义化标签、表单增强各自替代了哪些旧写法；
- 理解原生多媒体为何终结了插件时代；
- 说出 localStorage 与旧时代 cookie 的能力差异；
- 用一个判断框架决定"新特性现在能不能上生产"。
2005 年的网页有多狼狈
要理解 HTML5，最好的方式是先回到没有它的年代。2005 年前后做一个"能播视频的页面"，你得嵌入一个 Flash 插件：用户没装插件就看到一个空洞，移动设备干脆整页报废。做一个"必填项校验"，你得写几十行脚本拦截表单提交，浏览器自己不认识什么叫 email。做一个"拖到页面上再显示的模板"，你得把 HTML 塞进 display:none 的 div 里，或者干脆用脚本字符串拼接。页面布局全靠 table 与 float 缝合，机器读完一整页 HTML，只知道"这里有个盒子、那里有个盒子"，不知道哪块是正文、哪块是导航、哪块是广告。
HTML5 的每一项特性，都精确瞄准了上面一个痛点。它 2007 年起步起草、2014 年 10 月由 W3C 正式定稿，随后标准维护权移交 WHATWG 转入持续演进（第 1 章讲过这段历史）。下面按问题域逐项过。
革新一：语义化结构标签
HTML5 新增了一整批结构性元素：header、nav、main、article、section、aside、footer、figure、time、mark 等。它们带来的不是新能力，而是新表达——以前你只能写 <div class="header">，机器要把 class 名当自然语言去猜；现在 <header> 是标准词汇，任何消费者都精确知道它的含义。这一支是本章 2.2、2.3 两节的主角，这里先立住它解决的痛点：让页面结构从"人类约定"升级为"标准契约"。
革新二：表单与输入增强
表单是 HTML 里最老的部件，也是旧时代脚本补丁最密集的地方。HTML5 给它动了一次大手术，输入侧与校验侧同时下手。
输入侧，input 的 type 属性从文本、密码寥寥几种扩展到十余种语义类型：
<form> <label>邮箱 <input type="email" name="mail"></label> <label>生日 <input type="date" name="birth"></label> <label>数量 <input type="number" min="1" max="99" value="1"></label> <label>主页 <input type="url" name="site"></label> <label>搜索 <input type="search" name="q"></label> <input type="submit" value="提交"> </form>
这些类型的价值分三层。移动端收益最直接：type 为 email 或 number 时，手机键盘会自动切换成带 @ 符号或纯数字的布局，输入摩擦立刻下降。校验收益：浏览器原生认识 email 的合法格式，配合 required、min、max、pattern 属性，不写一行脚本就有提交前校验。语义收益：自动填充、密码管理器这些浏览器功能，都依赖类型识别才能工作。旧时代这三层全靠脚本手搓，且每家实现不一。
校验侧的属性族值得一并记住：required（必填）、pattern（正则匹配）、min 与 max（数值范围）、maxlength（长度上限）、novalidate（表单级关闭校验）。浏览器校验的提示气泡样式无法深度定制，这是它的代价——对提示 UI 有强设计要求的场景，仍然需要脚本接管，但"第一道防线"由标准免费提供了。
革新三：原生多媒体
audio 与 video 两个元素把音视频播放变成 HTML 一等公民。一段两行标记就能出画面：
<video src="demo.mp4" controls width="640" poster="cover.jpg"></video>
controls 属性一行交出播放、暂停、进度、音量全套控件；poster 指定首帧封面；加上 muted、autoplay、loop、preload 又是几种播放策略。它的历史意义大于语法本身：Flash 插件 2020 年正式退场，苹果移动设备从不接纳插件——原生多媒体是压垮插件的最后也是最初一根稻草。格式兼容是它遗留的工程问题（MP4、WebM、OV 三足鼎立），2.4 节展开。
革新四：图形与绘制
canvas 元素给 JavaScript 一块位图画布，像素级绘制全靠脚本驱动，游戏、图表、图像处理由此进入网页。SVG 则作为矢量图形被 HTML 原生接纳，直接写在文档里就能渲染。两条路线能力与适用场景完全不同，2.4 节给完整对比。它们共同解决的是"网页上一切图形都得做成图片文件"的旧约束。
革新五：本地存储
旧时代想在浏览器里存点数据，只有 cookie 一条路：每次请求自动携带、容量约 4KB、API 原始。HTML5 带来 localStorage 与 sessionStorage——容量以 MB 计、不随请求发送、键值接口一行上手。
| 维度 | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 容量 | 约 4KB | 约 5MB 起 | 约 5MB 起 |
| 随请求发送 | 每次自动带上 | 不发送 | 不发送 |
| 生命周期 | 可设过期 | 永久（手动清除） | 关标签页即失 |
| 典型用途 | 会话凭证 | 偏好设置、缓存 | 表单草稿、临时态 |
注意边界：本地存储不是保险箱，同源脚本都能读，敏感凭证不该放；容量超限写入会抛异常，脚本要接住。它属于浏览器接口而非 HTML 标记，本节只立坐标，第 5 章 Web Components 与交互节会用到。
革新六：连接与并发能力
严格说这批是伴随 HTML5 时代的浏览器接口：WebSocket 提供全双工长连接，替代轮询；Web Workers 让脚本在后台线程跑计算，不再冻住页面；地理定位、拖放 API、历史管理接口各自补上一块。它们不出现在 HTML 标记里，但改变了"HTML 页面能做什么"的边界。教程主线聚焦标记语言本身，这批能力在第 5 章交互一节择要回顾。
一张时间线看新旧交替
那些没成功或被收回的特性
讲革新清单也要讲"折戟名录"，这是判断技术趋势的重要参照。HTML5 起草过程中有一批特性最终被移出标准或弃用：话筒与摄像头的直接访问被更完整的媒体捕获接口取代；一些激进的表单类型（如独立的电话类型在部分实现里退化）；application cache 这个离线方案因为设计缺陷被 Service Worker 全面替代；一些语义元素（如 hgroup）被移出规范。看这份名录的意义在于：标准的演进不是单向加法，设计失误的方案会被整铲移除，跟着废弃特性走的生产代码最后都成了债务。工程上对应的习惯是：用新特性前扫一眼它在标准里的状态——是稳定推荐、还是在讨论中、还是已被标记弃用。状态为弃用的特性即使浏览器还支持，也只是兼容期，新代码一律绕行。
前后对照：同一需求的两种写法
拿一个"带校验的邮箱输入加自动聚焦"的需求，对照两个时代的写法，革新密度一目了然：
<!-- 旧时代：脚本手搓校验，行为全靠拦截 --> <form onsubmit="return checkMail()"> <input type="text" name="mail" id="mail"> <span id="err" style="color:red;display:none">邮箱格式不对</span> <input type="submit" value="提交"> </form> <script> function checkMail() { var v = document.getElementById('mail').value; var ok = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v); document.getElementById('err').style.display = ok ? 'none' : 'inline'; return ok; } </script> <!-- HTML5：一行类型声明 + 两个属性，浏览器接管 --> <form> <input type="email" name="mail" required autofocus> <input type="submit" value="提交"> </form>
第二版少了十几行脚本，却多出三样旧版没有的东西：提交前原生拦截并气泡提示、移动端弹出带 @ 的键盘、自动聚焦。这不是"代码更短"的审美胜利，而是"校验从应用层下沉到平台层"的架构胜利——浏览器厂商维护一份测试套件保证各实现行为一致，比每个团队自己养一份校验代码可靠得多。平台层每接管一类通用需求，应用层就少一类重复实现，这是前端十年演进最稳定的规律之一，后面章节还会反复见到它：语义标签把结构理解交给平台，原生多媒体把播放器交给平台，前端框架的出现恰恰是因为"UI 状态同步"当时还没有平台级答案。
新特性能不能上生产：一个判断框架
特性新不等于能直接用。我的判断流程分三问：
第一问，目标用户浏览器覆盖够不够。语义标签、表单新类型属于"渐进增强"型——不支持的旧浏览器把它们当未知元素处理：语义标签照样能装内容（配一行样式修正），input 新类型在旧浏览器退化成文本框，页面不坏。这类可以放心用。反之，如果特性是"不支持就完全不可用"的悬崖型（比如某个图形接口在旧浏览器没有降级路径），就要么检测能力后降级，要么再等等。
第二问，降级体验是什么。type 为 email 在旧浏览器退化成文本框——功能损失为零，校验交回脚本；video 不支持时你要准备文字或封面图链接。写每个新特性时顺手想一句"最老的浏览器看到什么"，这是工程成熟度的分水岭。
第三问，有没有更好的替代。以日期选择为例：各浏览器的原生日期控件样式与交互差异不小，很多产品最终选组件库统一体验——不是原生特性不好，而是"跨浏览器一致性"的权重更高。框架里没有教条，只有权衡。
💡 关键直觉：HTML5 的设计哲学是"优雅降级"——新语法叠在旧解析器上不炸锅。评估任何新特性时，先找它的降级形态，再决定用不用。
高频疑问两则
问：HTML5 是不是就是 HTML 的第五版，现在还叫这个名吗？
"HTML5"这个词有两层用法：狭义指 2014 年定稿的那版规范；广义被市场用来指代那一整波 Web 平台能力（含本地存储、图形接口等严格说不属于 HTML 规范的部分）。规范本身现在由 WHATWG 持续维护、不再有版本号，日常交流里说 HTML5 一般指广义能力集，说 HTML 指语言本身，两个用法都保留着，别纠结。
问：都说 HTML5"杀死了 Flash"，真正的死因是什么？
直接死因是苹果移动设备不接纳插件加上原生多媒体与图形接口补齐了能力空白，让插件失去了存在理由。这个案例的启示比案例本身重要：平台把某类通用需求标准化之后，专用插件的护城河就会蒸发——评估任何"靠浏览器之外的东西才能跑"的方案时，都该想一句"标准会不会把它收编"。
动手实验：六项特性一页验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5 特性速览</title> </head> <body> <header><h1>新特性验证页</h1></header> <main> <section> <h2>表单增强</h2> <form> <input type="email" required placeholder="邮箱会被原生校验"> <input type="number" min="1" max="10" value="5"> <button>试着空着邮箱提交</button> </form> </section> <section> <h2>本地存储</h2> <p id="out"></p> <button onclick="localStorage.setItem('visited','1')">写入标记</button> <button onclick="document.getElementById('out').textContent= 'visited = ' + localStorage.getItem('visited')">读取标记</button> </section> <section> <h2>画布</h2> <canvas id="c" width="200" height="60"></canvas> <script> const ctx = document.getElementById('c').getContext('2d'); ctx.fillStyle = '#2980b9'; ctx.fillRect(10, 10, 180, 40); ctx.fillStyle = '#fff'; ctx.fillText('canvas 可用', 55, 35); </script> </section> </main> <footer><p>语义标签 + 表单 + 存储 + 画布，一页全验。</p></footer> </body> </html>
存成文件打开：空邮箱提交会弹出原生校验气泡；点写入再点读取，刷新页面后标记仍在（这就是 localStorage 的持久性）；画布上出现一块蓝色矩形。四个 section 各验一项，浏览器开发者工具的元素面板里还能看到 header/main/footer 的语义结构。
本节要点回顾
- HTML5 是痛点的集合解：语义标签治"结构靠猜"、表单增强治"脚本校验"、原生多媒体治"插件依赖"、本地存储治"cookie 硬撑"。
- input 新类型三层收益：移动键盘适配、原生校验、语义识别，旧浏览器退化成文本框不炸锅。
- 本地存储与 cookie 是两种东西：MB 级容量、不随请求发送，但同源可读、非保险箱。
- canvas 与 SVG 打开图形时代：位图脚本绘制与矢量声明式图形两条路线，取舍在 2.4 节。
- 渐进增强是采用的默认答案：先问降级形态，再决定上不上生产。
下一节进入本章核心：语义化到底是什么、凭什么值得认真对待。