H5新特性

HTML5（H5）并不是单一的技术，而是一系列相关Web技术和标准的集合。它的核心目标是让Web从文档展示平台，进化成能与原生App媲美的应用开发平台。

以下是H5最核心、最具代表性的新特性分类介绍：

🚀 核心应用类特性

这些特性让Web应用能力大幅提升。

1. 语义化标签：用更直观的标签定义页面结构，利于SEO和可访问性。

   <!-- 告别纯div布局 -->
   <header>页头</header>
   <nav>导航栏</nav>
   <main>主内容区</main>
   <article>独立文章</article>
   <aside>侧边栏</aside>
   <footer>页脚</footer>
   <section>文档区域</section>

2. 增强型表单：原生提供更多输入类型和验证，减少JS代码。

   <!-- 移动端会唤起对应键盘 -->
   <input type="email" required>   <!-- 邮箱格式、必填验证 -->
   <input type="tel">              <!-- 唤起数字拨号键盘 -->
   <input type="number" min="1" max="10"> <!-- 数字选择器 -->
   <input type="date">             <!-- 原生日期选择器 -->
   <input type="color">            <!-- 原生拾色器 -->
   <input type="range">            <!-- 滑块控件 -->

3. 音视频处理：无需第三方插件，原生支持多媒体。

   <!-- 音频 -->
   <audio controls src="music.mp3">您的浏览器不支持audio标签</audio>
   
   <!-- 视频 -->
   <video controls width="400">
       <source src="movie.mp4" type="video/mp4">
       <track kind="subtitles" src="sub.vtt" label="中文"> <!-- 字幕 -->
   </video>

4. 图形与动画：提供强大的绘图和动画能力。

   • Canvas：通过JS像素级绘制2D图形和动画（图表、游戏、滤镜）。
   • SVG：矢量图格式，缩放不失真，适合图标和LOGO。
   • WebGL：基于OpenGL ES，在Canvas上渲染高性能3D图形。

5. 客户端存储 ：相比cookie更安全、容量更大。

   • Web Storage :
     • localStorage：永久存储（除非手动清除），容量约5-10MB。
     • sessionStorage：标签页关闭即清除。
   • IndexedDB：浏览器内置的NoSQL数据库，支持存储大量结构化数据（可达几百MB甚至更多），支持事务和索引查询。

6. CSS3：丰富的视觉和动效能力。

   • 圆角 (border-radius)、阴影 (box-shadow)、渐变 (linear-gradient)。
   • 过渡 (transition)、变换 (transform)、动画 (@keyframes)。
   • 弹性盒子 (Flexbox)、网格布局 (Grid)、多列布局。

🛠️ 应用开发类API（更接近原生App）

这些是H5被称为"应用平台"的关键。

1. 设备访问能力：

   • Geolocation：获取地理位置。
   • Drag & Drop：拖放API，实现元素拖拽。
   • File API：读取用户本地文件内容，支持拖拽上传。
   • WebRTC：音视频实时通讯，支持网页视频聊天。

2. 图形与高性能：

   • Canvas API：2D绘图。
   • WebGL：3D绘图。
   • Web Workers：开启后台线程执行JS，避免主线程卡顿，适合复杂计算。

3. 网络与通信：

   • WebSocket：建立全双工通信通道，实现实时应用（聊天、游戏）。
   • Server-Sent Events (SSE)：服务器单向推送事件。
   • History API ：操作浏览器历史记录，是实现单页面应用（SPA） 的基础。
   • XMLHttpRequest Level 2：支持跨域请求(CORS)和上传进度监听。

📱 移动端专属特性

• 响应式设计 ：通过<meta name="viewport">视口标签，让网页在不同设备上自适应。
• 触摸事件 ：touchstart、touchmove、touchend等，为触屏交互设计。

⚠️ 常见的理解误区和"坑"

1. 混淆"HTML5"和"移动端页面"：常说的"H5页面"特指在微信/App里打开的移动端网页，它用了部分H5技术，但"HTML5"远不止于此。
2. API兼容性问题 ：很多新API（如WebRTC、WebGL）在旧浏览器中不支持。使用前建议通过Can I Use (caniuse.com) 查询，并做好降级方案。
3. 过度使用特定功能 ：
   • localStorage在前端安全不能存储敏感信息（如Token），因其易受XSS攻击。
   • 频繁操作Canvas大图会引发性能问题；大量DOM元素与复杂CSS3动画也会导致渲染卡顿。
4. Web Workers的局限性 ：工作线程不能直接操作DOM，只能通过postMessage与主线程通信，且内部代码需独立文件。

📊 不同场景下的应用选择

• Web 应用 ：localStorage, IndexedDB, Web Workers, 以及 WebSocket, History API。
• 图形与动画 ：高性能实时2D使用Canvas API；数据可视化可选择Canvas或SVG；3D或游戏开发则用WebGL。
• 移动端页面 ：<meta name="viewport">是标配；触摸事件用于实现手势交互；使用Geolocation获取位置，并尽可能利用语义化标签。

💎 总结

方面	一句话总结
核心目标	让Web成为一个能与原生App抗衡的强大应用平台。
三大基石	语义化标签 （结构）、CSS3 （样式）、Web API（交互）。
最常用特性	语义化标签、CSS3、localStorage、video。
核心应用API	Canvas、WebSocket、Web Worker、WebRTC、Geolocation。
移动端关键	视口设置 (viewport)、触摸事件。

总的来说，HTML5极大地扩展了Web的能力边界，熟练掌握它的核心特性，是现代前端开发的基石。