🛠️ H5 技术栈
H5 核心技术
| 技术 | 说明 | 应用场景 |
|---|---|---|
| HTML5 | 语义化标签、表单增强、多媒体 | 页面结构、音视频播放 |
| CSS3 | 动画、过渡、Flexbox、Grid | 视觉效果、响应式布局 |
| JavaScript ES6+ | 模块化、Promise、箭头函数 | 交互逻辑、数据处理 |
| Canvas | 2D 绘图 API | 游戏、数据可视化 |
| WebGL | 3D 图形 API | 3D 展示、VR/AR |
H5 常用 API
| API | 功能 | 兼容性 |
|---|---|---|
| Geolocation | 地理位置定位 | 95%+ |
| LocalStorage | 本地数据存储 | 98%+ |
| Touch Events | 触摸事件处理 | 95%+ |
| Audio/Video | 音视频播放 | 95%+ |
| Device Orientation | 设备方向感应 | 85%+ |
| Fullscreen | 全屏控制 | 90%+ |
H5 开发框架
| 框架 | 特点 | 适用场景 |
|---|---|---|
| Vue.js | 轻量、易上手、生态丰富 | 中小型 H5 项目 |
| React | 组件化、虚拟 DOM | 大型复杂 H5 应用 |
| Zepto | 轻量级 jQuery 替代 | 简单交互 H5 |
| Swiper | 轮播插件 | 滑动效果 |
| GSAP | 专业动画库 | 复杂动画效果 |
H5 构建工具
- ✅ Vite：极速开发体验，HMR 迅速
- ✅ Webpack：成熟稳定，生态完善
- ✅ Gulp：自动化任务处理
- ✅ PostCSS：CSS 后处理
- ✅ Babel：JS 转译兼容
💡 核心理念
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
- ✅ 响应式设计：媒体查询、移动优先