HTML, 标准·2024年1月15日

HTML5 的革命

HTML5 如何彻底改变 Web 开发，从文档展示到应用平台

W3C 标准团队

从文档到应用的转变

HTML5 的发布标志着 Web 历史上的一个重要转折点。它不再仅仅是展示文档的工具，而是演变成为一个功能丰富的应用平台。从 2014 年正式成为 W3C 推荐标准以来，HTML5 已经彻底改变了我们与 Web 交互的方式。

在 HTML5 之前，Web 页面主要是静态文档，依赖 Flash 和其他插件来实现多媒体和交互功能。HTML5 通过原生 API 消除了这些依赖，为开发者提供了创建复杂 Web 应用所需的一切工具。

语义化标签的力量

HTML5 引入了丰富的语义化标签，让网页结构更加清晰：

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

<section>
  <h2>标题</h2>
  <figure>
    <img src="...">
    <figcaption>说明</figcaption>
  </figure>
</section>

<form>
  <label for="email">邮箱</label>
  <input type="email"
         id="email"
         required>
</form>

这些标签不仅让代码更易读，还显著改善了 SEO 和无障碍访问。屏幕阅读器可以更好地理解页面结构，搜索引擎也能更准确地抓取内容。

原生多媒体支持

HTML5 最受欢迎的特性之一是原生的多媒体支持，不再需要插件：

<video controls width="640">
  <source src="video.mp4"
          type="video/mp4">
  <source src="video.webm"
          type="video/webm">
  <p>您的浏览器不支持视频</p>
</video>

<audio controls>
  <source src="audio.mp3"
          type="audio/mpeg">
  <source src="audio.ogg"
          type="audio/ogg">
</audio>

const video = document.querySelector('video');

video.addEventListener('play', () => {
  console.log('视频开始播放');
});

// 自定义控制
video.currentTime = 10;
video.playbackRate = 1.5;

强大的表单功能

HTML5 增强了表单能力，提供了新的输入类型和验证机制：

type="email" - 邮箱地址
type="tel" - 电话号码
type="url" - 网址
type="number" - 数字
type="date" / time / datetime-local
type="range" - 滑块
type="color" - 颜色选择器
type="search" - 搜索框

<form>
  <input type="email"
         required
         pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

  <input type="password"
         minlength="8"
         maxlength="32"
         required>

  <input type="number"
         min="0"
         max="100"
         step="5">
</form>

placeholder - 占位文本
autofocus - 自动聚焦
autocomplete - 自动完成
required - 必填
pattern - 正则验证
multiple - 多选
formnovalidate - 跳过验证

本地存储与离线支持

HTML5 提供了多种本地存储方案，让 Web 应用可以离线工作：

localStorage

持久存储键值对数据，容量约 5-10MB，数据不会过期

sessionStorage

会话级存储，数据在标签页关闭时清除

IndexedDB

强大的异步数据库，支持结构化数据和复杂查询

Cache API

Service Worker 使用的缓存机制，实现离线应用

Application Cache

旧版离线存储方案（已被 Service Worker 取代）

File API

读取和写入用户本地文件，实现文件上传和处理

图形与动画

HTML5 的 <canvas> 元素提供了强大的 2D 绘图能力：

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制矩形
  ctx.fillStyle = '#3B82F6';
  ctx.fillRect(50, 50, 200, 100);

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(400, 300, 50, 0, Math.PI * 2);
  ctx.fillStyle = '#10B981';
  ctx.fill();

  // 绘制文字
  ctx.font = '24px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('Hello HTML5', 50, 400);
</script>