HTML5：语义、媒体与 Web 应用基础

参考官方标准：W3C HTML5 Recommendation
HTML5 在 2014 年形成正式推荐标准，随后由 WHATWG Living Standard 持续维护平台能力。

HTML5 在 2014 年成为 W3C Recommendation，但它代表的不只是一个发布日期：它统一了浏览器长期实践，定义错误恢复算法，并把 Web 文档扩展为应用平台。

1. 更简洁、可预测的文档骨架

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5 Document</title>
  </head>
  <body>...</body>
</html>

短 DOCTYPE 触发标准模式；UTF-8 声明应尽早出现；viewport 元数据让移动浏览器按设备宽度布局。

2. 语义地标与内容分区

header、nav、main、article、section、aside、footer 描述页面区域角色，figure / figcaption 关联媒体与说明，time 提供机器可读时间。

<main>
  <article>
    <header>
      <h1>HTML5 Milestone</h1>
      <time datetime="2014-10-28">2014 年 10 月 28 日</time>
    </header>
    <figure>
      <img src="timeline.png" alt="HTML 演进时间线">
      <figcaption>从 HTML 4 到 HTML5</figcaption>
    </figure>
  </article>
</main>

语义元素不是视觉皮肤；它们为浏览器、搜索引擎和辅助技术提供可导航的结构。

3. 原生音视频与图形

<video controls width="640" poster="cover.jpg">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  <track kind="captions" src="zh.vtt" srclang="zh" label="中文字幕">
  浏览器不支持原生视频。
</video>

• audio / video 取代插件式媒体播放，并提供 track 字幕。
• canvas 是即时像素绘图表面，需要 JavaScript，并应提供可访问替代内容。
• SVG 是保留结构的矢量文档，更适合图标、图表和可交互图形。

4. 表单能力升级

新增 email、url、date、number、range 等输入类型，以及 required、pattern、min、max、placeholder、autocomplete 等约束。

<form>
  <label for="email">邮箱</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <label for="level">熟练度</label>
  <input id="level" name="level" type="range" min="0" max="10" value="5">
  <button>提交</button>
</form>

客户端约束提升体验，但不能替代服务端校验。placeholder 也不能替代持久可见的 label。

5. HTML 与 Web API 的边界

HTML5 时代常把 History、Storage、Geolocation、Web Workers 等统称为“HTML5 API”。严格来说，它们大多由独立规范定义，通过 JavaScript 使用。HTML 负责声明结构；CSS 负责表现；JavaScript 与 Web API 负责行为和系统能力。

6. 渐进增强清单

• 先让内容和表单在无 JavaScript 时仍可理解、可提交。
• 使用原生元素获得键盘行为，再用 CSS/JS 增强。
• 为媒体提供字幕、文字替代和合理的加载策略。
• 用规范校验发现结构错误，再进行真实辅助技术与浏览器测试。

下一阶段：现代 HTML Living Standard。

版本信息与迁移

• 发布时间 / 标准时间： 2014 年 10 月成为 W3C Recommendation
• 维护状态： 截至 2026-08-27，以页面所链接的官方生命周期或规范状态为准
• 运行时或平台基线： WHATWG HTML Living Standard、相关 W3C 规范与目标浏览器实现

迁移影响： 页面迁移应通过 HTML 校验、无障碍检查和目标浏览器回归完成；删除过时表现元素与非标准 API 时，要保留语义、键盘操作和降级行为。

版本确认

使用 WHATWG/W3C 校验器，并在目标浏览器记录 DOM、可访问性树和功能检测结果。

资料核对日期：2026-08-27。