108. HTML5 新特性速览

语义化标签

HTML5 给常见页面结构加了专门的标签，代码更好读：

标签	含义	等价旧写法
<header>	页头或区块头	<div class="header">
<footer>	页脚或区块尾	<div class="footer">
<nav>	导航	<div class="nav">
<main>	主内容区	<div class="main">
<article>	独立内容（文章、博客）	<div class="article">
<section>	内容分区	<div class="section">
<aside>	侧边栏	<div class="sidebar">
<figure>	图文组合	<div class="figure">
<figcaption>	图文标题	<div class="caption">
<mark>	高亮标记	<span class="highlight">
<time>	时间	<span class="time">
<details>	折叠面板	JS 实现
<summary>	折叠标题	JS 实现

多媒体

以前放音视频要依赖 Flash。HTML5 原生支持：

标签/能力	说明
<video>	嵌入视频
<audio>	嵌入音频
<source>	多格式源
<track>	字幕/章节
Media API	播放控制、状态监听
Web Audio API	高级音频处理

图形和动画

能力	说明
<canvas>	2D 位图绘制
Canvas API	形状、路径、文本、图像、像素操作
WebGL	3D 图形（GPU 加速）
SVG	矢量图形（内联或作为图片）
CSS3 动画/过渡	声明式动画
requestAnimationFrame	JS 动画最佳实践

表单增强

新特性	说明
<input type="email">	邮箱输入
<input type="url">	URL 输入
<input type="number">	数字输入
<input type="range">	滑块
<input type="date">	日期选择器
<input type="color">	颜色选择器
<input type="search">	搜索框
<datalist>	输入建议列表
<output>	计算结果输出
<progress>	进度条
<meter>	度量计
表单验证 API	内置校验、自定义错误

存储与离线

能力	说明
localStorage	永久键值存储
sessionStorage	会话键值存储
IndexedDB	客户端 NoSQL 数据库
Service Worker	后台脚本、离线缓存
AppCache	已废弃
Web SQL	已废弃

通信与连接

能力	说明
WebSocket	全双工实时通信
SSE (EventSource)	服务器单向推送
WebRTC	实时音视频通信
Fetch API	现代网络请求（替代 XMLHttpRequest）
CORS	跨域资源共享

设备与传感器

能力	说明
Geolocation	地理位置
Device Orientation	设备方向（陀螺仪）
Vibration	设备震动
Battery Status	电池状态（部分废弃）
Clipboard	剪贴板操作
Fullscreen	全屏显示

多线程与性能

能力	说明
Web Workers	后台线程
SharedArrayBuffer	共享内存
Web Assembly	高性能计算
requestAnimationFrame	流畅动画
Intersection Observer	元素可见性检测
Resize Observer	元素尺寸变化
Performance API	性能指标测量

DOM 与事件

能力	说明
新选择器 API	querySelector、querySelectorAll
classList	方便的类名操作
自定义数据属性	data-*
触摸事件	touchstart、touchmove、touchend
Pointer Events	统一输入事件
拖放 API	原生拖拽
MutationObserver	DOM 变化监听
History API	前端路由基础

可访问性

能力	说明
ARIA 属性	role、aria-*
语义化标签	屏幕阅读器友好
<figure> / <figcaption>	图文语义
<time>	时间语义
focus 管理	tabindex、autofocus

CSS3 新特性（虽然不属于 HTML 规范，但常和 HTML5 一起提）

特性	说明
Flexbox	弹性布局
Grid	网格布局
动画	@keyframes、animation
过渡	transition
变形	transform
渐变	linear-gradient、radial-gradient
阴影	box-shadow、text-shadow
圆角	border-radius
媒体查询	@media 响应式设计
CSS 变量	--var、var(--var)
自定义属性	@property

特性优先级建议

新手不用一次全学完。按优先级来：

第一优先级（必须掌握）
├── 语义化标签
├── localStorage
├── 表单新类型 + 验证
├── Canvas 基础
└── 事件处理

第二优先级（进阶必学）
├── Fetch API
├── CSS Flexbox/Grid
├── 拖放 API
├── History API
└── Intersection Observer

第三优先级（按需学习）
├── IndexedDB
├── Web Workers
├── WebSocket
├── Service Worker
├── Web Components
└── Geolocation