HTML5 是什么?它和旧版 HTML 有什么区别
HTML5 是 HTML 标准的第五次重大版本更新，也是当前网页标记的通用基础。它由 W3C 与 WHATWG 共同维护，核心目标是让网页在不依赖插件的情况下承载更丰富的结构、媒体和交互能力。如果你正在学前端、准备重写旧站点，或者只是想知道“HTML5 到底新在哪”，下面按能力、差异和上手路径说明。
HTML5 引入了哪些关键能力
HTML5 不是单一功能，而是一组围绕“文档结构 + 原生能力”的扩展。主要可以归为几类：
- 语义化标签：
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等，让页面结构本身携带含义，而不是全靠<div>堆叠。 - 原生音视频：
<audio>、<video>让浏览器直接播放媒体，不再依赖 Flash 等第三方插件。 - 图形绘制：
<canvas>提供脚本绘图接口，<svg>支持矢量图形，两者常用于图表、动画和可视化。 - 表单增强：新增
email、url、number、date、range等输入类型，以及required、pattern、placeholder等属性，浏览器可做基础校验。 - 本地存储与离线：
localStorage、sessionStorage用于在客户端保存数据，Application Cache（后被 Service Worker 取代）曾用于离线访问。 - 其他 API 生态：地理位置、拖放、WebSocket、Web Workers 等，常与 HTML5 一起被提及。
HTML5 与 HTML4 / XHTML 的主要差异
差异不只在标签数量，更在文档写法和结构表达上。
| 维度 | HTML4 / XHTML | HTML5 |
|---|---|---|
| 文档类型声明 | 冗长，需引用 DTD | 简化为 <!DOCTYPE html> |
| 字符编码 | 写法较繁琐 | 简化为 <meta charset="utf-8"> |
| 结构表达 | 主要靠 <div> + class |
语义化标签直接表达区块含义 |
| 媒体播放 | 依赖插件 | <audio>、<video> 原生支持 |
| 表单校验 | 基本靠 JavaScript | 原生输入类型与约束属性 |
| 大小写与闭合 | XHTML 要求严格 | HTML5 更宽松，但建议保持规范写法 |
一个直观例子：HTML4 时代常见写法是 <div id="header">、<div id="nav">；HTML5 直接写成 <header>、<nav>，结构含义对浏览器、搜索引擎和辅助技术都更清晰。
HTML5、CSS3 和 JavaScript 的分工
三者经常被一起讨论，但职责不同：
- HTML5：负责结构与内容，定义页面上有什么。
- CSS3：负责样式与布局，定义页面长什么样，例如圆角、渐变、媒体查询、Flexbox、Grid。
- JavaScript：负责行为与交互，定义页面能做什么，例如响应点击、请求数据、操作 Canvas。
所以“用 HTML5 做响应式”这种说法并不准确——响应式布局主要由 CSS3 的媒体查询实现，HTML5 提供的是语义结构基础。
常见误解
- HTML5 不是框架或模板：像 HTML5 UP 这类站点提供的是基于 HTML5/CSS3 的响应式站点模板，模板是成品，HTML5 是底层标准。
- HTML5 不等于响应式设计：响应式是 CSS 层面的适配策略，HTML5 只是让结构更适合被适配。
- HTML5 不是“新语言”：它仍是 HTML，只是版本演进，旧页面不会因为 HTML5 出现就失效。
上手建议
如果要从旧版迁移或开始新项目，可以按这个顺序推进：
- 把文档头换成
<!DOCTYPE html>和<meta charset="utf-8">。 - 用语义化标签替换主要
<div>区块，先改 header、nav、main、footer。 - 表单改用合适的
type和required、pattern，减少一部分 JavaScript 校验。 - 需要媒体时优先用
<video>、<audio>，并准备多格式回退。 - 需要绘图或动画时再引入
<canvas>或<svg>，不必一开始就全用上。
验证方法很直接：改完后用浏览器开发者工具检查 DOM 结构是否符合预期，再用不同尺寸窗口确认 CSS 媒体查询是否生效。常见卡点是旧浏览器兼容性和媒体格式支持，遇到时优先查目标浏览器的支持情况，而不是一次性堆砌所有新特性。