HTML5新技术的应用设计与实现技巧

姜照昶，苏 宇，丁凯孟

(1.中国电子科技集团 第五十四研究所，河北 石家庄 050081;2.中国科学院地理科学与资源研究所 资源与环境信息系统国家重点实验室，北京 100101)

0 引 言

HTML是用于描述网页文档结构的超文本标记语言，万维网联盟(W3C)一直致力于发展SGML(标准通用标记语言)、XML以及一些新的标记语言如SVG(可缩放矢量图形)、XForms和MathML等[1]。由于HTML5的标签表单、通信、离线应用、本地存储、设备访问和音视频多媒体等新特性的性能与表现，使得HTML5发展成为构建Web应用的新一代标准和HTML规范，在Web应用和移动互联领域得到了广泛的支持和发展[2-3]。HTML5拥有更丰富的标签，支持HTML5的浏览器可以不使用插件来播放网页中的视频和音频，Canvas标签为程序设计者提供了绘图API，本地存储功能可使用户更快地打开应用程序等[4]。HTML5是Web技术中变革性的创新，打破了Web游戏由Flash控制的局面。研发人员使用HTML5开发了越来越多的交互性更强、效果更出众的Web应用和游戏[5]。近年来，人们对HTML5的兴趣骤然爆发，涌现出大量支持HTML5的浏览器和设备[6]。文献[7-8]分析了HTML5的Web Socket握手协议机制并在Linux平台环境下使用Ruby编程语言实现了一个简单的Web Socket服务器。文献[9]针对传统实时Web技术存在实时性差、吞吐量大的缺点，通过Node.js搭建Web Socket服务器,构建一种基于HTML5的实时Web数据监测系统，利用Web Socket通信机制自定义Web Worker接口，设计多服务计算迁移，有效提升Docker Swarm集群服务性能和智能终端Web应用性能。文献[10-11]采用HTML5 Canvas技术研究并实现了一个新型在线流程图协作绘制平台,将数据集中存储在云端,方便共享与协作。文献[12-14]采用persistent publish/subscribe (PPS)消息传递模型实现HTML5与硬件平台之间的通信，大大提高了QNX操作系统下车载嵌入式应用与硬件平台的数据交互的实时性。通过HTML5的Canvas，使得用户不再需要安装插件或客户端软件即可实现时空联合目标轨迹动态的数据渲染和实时可视化处理[15-17]，设计具有几何建模物理特性和过程建模的，运行于浏览器上，具有强交互性、高仿真度的虚拟实验室。结合CSS和JavaScript设计的轻量型动画引擎，很简洁地实现了物理滤镜、锚定布局的艺术效果。同时HTML5新技术的安全问题得到了包括传统威胁延伸、恶意利用检测、跨平台安全性、新安全Web应用的跨站脚本动态检测和多浏览器漏洞挖掘和模糊测试[18-19]。文中通过基于Web的中英文打字游戏主要功能的设计，分析HTML5新技术的应用设计与实现技巧。

1 主要功能实现技术及关键代码分析

1.1 CSS与界面设计

层叠样式表(cascading style sheet，CSS)是用来显示HTML元素、用于控制应用程序的界面，并通过CSS实现了Web内容界面与其表现形式的分离处理，极大地提高了程序设计工作的效率。样式可以放在3个位置即样式表、