阅读量:0
HTML5适合移动应用开发的12大特性包括：离线缓存、地理定位、设备访问、触摸事件、音视频支持、图形渲染、性能优化、跨平台兼容性、实时通信、语义化标签、本地存储和可扩展性。
| 序号 | 特性 | 描述 | 设计师须知 |
| 1 | 离线缓存 | HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据。 | 注意在线和离线app的区别。 |
| 2 | 音频视频自由嵌入 | HTML5在这个方面完全不受限制，可以完全放在一起进行处理，实现文字与多媒体混排。 | 如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情。 |
| 3 | 地理定位 | 充分发挥移动设备对定位上的优势，推动LBS应用发展，可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。 | 现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化。 |
| 4 | Canvas绘图 | 使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。 | 图片的移动、旋转、缩放？那都太基础了，自己画都是小case。 |
| 5 | 专为移动平台定制的表单元素 | 只需要简单的声明 即可完成对不同样式键盘的调用，简捷方便。 | 用的时候记得告诉研发同事一声！ |
| 6 | 丰富的交互方式支持 | HTML5提供的交互方式是非常丰富的，包括拖拽、撤销历史操作、文本选择等。 | 至于用不用得上，那是你自己的事儿喽！ |
| 7 | HTML5使用上的优势 | 更低的开发及维护成本；使页面变得更小，减少了用户不必要的支出；性能更好使耗电量更低；方便升级，打开即可使用最新版本。 | 用户想要什么，HTML5能提供给用户什么。 |
| 8 | CSS3视觉设计师的辅助利器 | CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。 | 一个界面里几十张素材图的方式已经太out啦，赶快让CSS3帮你偷懒。 |
| 9 | 实时通讯 | HTML5提供了完善的实时通讯支持。 | 应用中嵌入实时通信、信息内容进行实时提醒，HTML5可以帮你实现。 |
| 10 | 档案以及硬件支持 | 不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是HTML5档案的功能中的Drag’n Drop和File API。 | 移动应用中对于数据传输的需求越来越大，传统的路径选择方式太过于繁琐，快来试试HTML5的拖拽上传功能吧！ |
| 11 | 语意化 | 语意化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化（SEO）或是推荐系统可以有很大的帮助。 | HTML5能让搜索更快速、更准确。 |
| 12 | 双平台融合的app开发方式，提高工作效率 | 使用HTML5, CSS3 来撰写Webbased 的应用程式，若要同时支援iPhone 及Android，几乎只需要维护一份程式码（少部份要因应clients 作修改），而且未来若有其它行动装置拥有支援HTML5 的浏览器，那同样的WebApp 直接就多了一个支援平台。 | Google 的系列服务使用了不少HTML5 中的cache、storage 及database 规格来做到离线存取程式的效果。 |
FAQs
HTML5的离线缓存是什么？
HTML5的离线缓存是通过Web Storage API实现的，可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。
HTML5如何实现音频视频的自由嵌入？
HTML5在这个方面完全不受限制，可以完全放在一起进行处理，实现文字与多媒体混排，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情。
HTML5 适合移动应用开发的 12 大特性
1、响应式设计
HTML5 支持通过媒体查询（Media Queries）来创建响应式布局，确保应用在不同尺寸和分辨率的设备上都能良好显示。
2、离线存储
利用 HTML5 的 Application Cache、localStorage 和 IndexedDB，应用可以在离线状态下存储数据，提高用户体验。
3、地理位置服务（Geolocation）
HTML5 的 Geolocation API 允许应用获取用户当前的地理位置信息，为用户提供基于位置的个性化服务。
4、Web Workers
通过 Web Workers，可以在后台线程中执行复杂计算，避免阻塞主线程，提高应用的性能和响应速度。
5、Canvas 和 SVG
Canvas 提供了绘图能力，SVG 则提供了矢量图形支持，两者都能在移动设备上实现高性能的图形渲染。
6、多媒体支持
HTML5 支持多种多媒体格式，如 MP4、WebM 和 Ogg，使得移动应用可以轻松嵌入视频和音频内容。
7、触摸事件
HTML5 引入了触摸事件（如 touchstart、touchmove、touchend），使得移动应用能够更好地响应触摸操作。
8、WebSockets
WebSockets 允许服务器和客户端之间建立持久连接，实现实时数据传输，适用于需要实时通信的应用。
9、本地数据库（IndexedDB）
IndexedDB 是一种低级客户端数据库，提供了强大的数据存储能力，支持查询、索引和事务处理。
10、表单控件
HTML5 增加了许多新的表单控件，如日期选择器、时间选择器、滑块等，提升了表单的用户体验。
11、文件 API
文件 API 允许应用访问用户文件系统中的文件，进行读取、写入等操作，增加了应用的实用性和丰富性。
12、设备兼容性和硬件加速
HTML5 旨在提高跨浏览器的兼容性，同时利用硬件加速技术，如 GPU 加速，提升移动应用的性能。
特性使得 HTML5 成为移动应用开发的一个强大平台，能够构建功能丰富、性能优良的应用。
