📱 H5 概述
什么是 H5
H5 是 HTML5 的简称，是第五代超文本标记语言。在中国，"H5"通常指代移动端 Web 页面、互动营销页面等基于 HTML5 技术的 Web 应用。
💡 核心理念
H5 让 Web 应用能够像原生 App 一样拥有丰富的交互、动画和多媒体功能。
H5 起源与发展历程
2004
WHATWG 成立
Web 超文本应用技术小组成立，开始制定新标准
2007
iPhone 发布
乔布斯宣布 iPhone 使用 HTML5 而非 Flash，推动 H5 发展
2008
HTML5 草案发布
第一个公开草案发布，浏览器开始支持
2010
iPad 发布
不支持 Flash，全面拥抱 HTML5
2014
W3C 正式推荐
HTML5 成为 W3C 正式推荐标准
2015-2018
中国移动 H5 爆发
微信生态推动，H5 营销页面流行
2019-2026
成熟与融合
PWA、小程序、WebAssembly 等新技术融合
H5 与传统 HTML 的区别
| 特性 | 传统 HTML4 | HTML5 |
|---|---|---|
| 语义化标签 | 使用 div、span 等通用标签 | header、footer、nav、article、section 等 |
| 多媒体支持 | 需要 Flash 插件 | 原生 video、audio 标签 |
| 图形绘制 | 功能有限 | Canvas API 和 SVG 强大支持 |
| 本地存储 | 仅支持 cookie | localStorage、sessionStorage、IndexedDB |
| 离线应用 | 不支持 | Service Worker、PWA |
| 设备 API | 几乎不支持 | 地理定位、陀螺仪、摄像头等 |
H5 主要应用场景
| 场景 | 说明 | 典型案例 |
|---|---|---|
| 营销推广 | 品牌活动、产品宣传 | 双 11 活动页、新品发布 |
| 互动游戏 | 测试类、闯关类小游戏 | 性格测试、抽奖 H5 |
| 数据报告 | 年度报告、账单展示 | 网易云音乐年度报告 |
| 企业官网 | 移动端官方网站 | 品牌移动站点 |
| 信息收集 | 报名、调研、预约 | 活动报名、问卷调查 |
H5 核心特性
- ✅ 语义化标签：header、footer、nav、article、section 等
- ✅ 多媒体：audio、video 原生支持
- ✅ Canvas/SVG：2D/矢量图形绘制
- ✅ 本地存储：localStorage、sessionStorage
- ✅ 设备 API：地理定位、陀螺仪、摄像头
- ✅ CSS3：动画、过渡、Flexbox、Grid
- ✅ 响应式设计：媒体查询、移动优先