天翼空间专家讲坛第 6 期回顾：HTML5 开发实践（含资料下载）

在 5 月 24 日，由天翼空间·开发者工厂主办，InfoQ 协助策划的第六期专家讲坛活动上，来自正益无线（APPCan）HTML5 应用研发团队研发总监朱炳芳向大家分享了在HTML5 开发中的一些经验，并针对开发移动版HTML5 应用中常见的问题进行了解答。

HTML5 实例讲解（讲稿下载）

朱炳芳首先通过一个比喻说明了 HTML5 目前的优势：

• HTML5 的优势：HTML 是骨 CSS 是皮 JS 是肌肉
• HTML5 是强悍坚固的骨架
• CSS3 是精致到每个毛孔的皮肤
• JavaScript 是久经考验的肌肉

目前所常见的 HTML5 新标签主要分为结构性标签、级块性标签、行内语义性标签、交互性标签：

• 结构性标签：section,header,footer,nav,article
• 级块性标签：aside,figure,code,dialog
• 行内语义性标签：meter,time,progress,video,audio
• 交互性标签：details,datagrid,menu,command

同时，HTML5 标准中还增加了 Web Storage、Notification、Web Database、Web Worker、WebSocket 等 Web API，针对设备层面还有 Geolocation、File 和 Contact 等。此外，CSS3 中也增加了文字、边框、阴影背景、选择器、动画、布局和媒体查询等特性。

朱炳芳接下来还谈到了开发移动版 HTML5 时的主要考量点：

• 手机屏幕尺寸不一
• 对 css3 支持度的缺陷（由标准尚未统一造成）
• Web API 支持不够完善
• 手机 Webkit 运行效率问题

由于 iOS 和 Android 采用 Webkit 引擎，对 HTML5 的支持比较到位，在讲解最后，朱炳芳还与大家分享了通过 media 区别不同分辨率、通过定高型布局和伸展型布局来解决布局问题的具体实现。

在问答环节，朱炳芳回答了一些网友的提问，详细信息如下：

问：HTML5 的视频是以什么形式播放的？需要调用第三方浏览器吗？
答：HTML5 视频是由浏览器去调用系统播放器。但是不同的商家对视频的格式不一样。

问：HTML5 使用 Canvas 组件，在手机上用浏览器访问动态效果比较慢？是否有更好的解决办法？
答：真没有，这就需要用手机的硬件去提升了。并且软件也需要完善，特别是在 Android 上。

问：我的问题：HTML5, 实际应用起来，是不是对服务器有特别的要求？有哪些要求？
答：配合服务器，可以做文件离线存储。以及一些 API 比如 Web Worker，Websocket 都需要在网络环境下并做些支持工作。

问：1. 对于一个初学 HTML5 的菜鸟，你有什么好的建议呢？
答：最近的一本书《论道 HTML5》还不错。当然最好是做一些项目，实战中提升能力。

问：如今 HTML5 在很多领域都获得了认可，看到 HTML5 有一个对“离线开发应用”的应用，这个功能是否已经较完善，
答：manifest 文件就是用来做这些工作的。但配 manifest 需要 Web 服务器的支持。

问：想问一下朱老师 在 WindowsPhone 中 HTML5 的支持情况？
答：WP7 支持 HTML5 跟 iOS 比，基本上是一半的水平。但是据说在 Win8 中会支持比较全面。

问：HTML5 在 Android 上那么多问题，是 Android 系统自身的原因吗？
答：嗯，是 webkit 版本不断更新，且 Android 碎片化太严重。版本升级也不好控制。

问：请问老师，一般触摸后移动几个像素以内可以视为点击 ？
答：需要设开关，触摸开始，开，触摸结束，关。然后在触摸过程中，看移动位置，可以大致模拟出点击事件。

关于专家讲坛

天翼空间开发者社区专家讲坛是天翼空间开发者社区（ www.189works.com ）2012 年针对开发者推出的一项提升专业能力的系列讲座，每周四晚，邀请移动互联网开发领域的权威专家，通过语音频道专题讲座，线上论坛访谈，以及微博、QQ 群线上同步直播的形式，为社区的开发者用户提供系统的技术讲座，答疑，以及运营知识方面的培训。

往期内容回顾

关于专家讲坛更多详情，请浏览官方网站。InfoQ 也会对后续的活动进行跟踪报道。

关于社区活动的更多详情，欢迎查看InfoQ 维护的社区活动日历，也欢迎关注InfoQ 官网微博（ @InfoQ ），获取实时的活动信息！