前言：寻找写作灵感？中文期刊网用心挑选的HTML5应用技术与标准，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
1引言 HTML（HyperTextMarkupLanguage，超文本标记语言）是为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语言。早在1991年，TimBerners-Lee编写了一份叫做“HTML标签”的文档，里面包含了大约20个用来标记网页的HTML标签。这为Web的诞生与发展奠定了基础。随后不到10年的时间中，HTML先后由IETF，W3C制定了2.0，3.0，4.0多个升级版本，特别是1999年底W3C的4.01版本是之后10多年来，Web上沿用至今的HTML标准规范。这期间，HTML始终作为一种Web页面的信息编辑于呈现语言而存在。直到2008年，html5第一版草案之后，HTML的主要功能与使命才发生了一次变革性的飞跃———W3C宣布其未来数年的愿景为构建以HTML5为核心的下一代开放Web应用平台。 2移动终端HTML5Web应用的技术架构 HTML5标准由W3C与WHATWG联合开发制定，目前已基本成型，预计将于今年成为W3C的候选标准。而通常所说的HTML5Web应用技术规范，是指广义上一系列的HTML5，CSS以JavaScriptAPI扩展规范所构成一个Web应用平台体系。新的HTML5系列技术提供了增强了的富媒体、富内容功能，特别是加入了适合构建移动Web应用的富应用特性（见图1）。从技术功能上看，HTML5Web平台所涉及的技术规范大致可归类为图形、多媒体、设备适配、表格、用户交互、数据存储、个人信息管理、硬件集成、网络、通信、封装、性能与优化等方面。这些技术功能基本上构成了一个完整的、以终端浏览器为应用运行平台的HTML5Web应用的技术架构（见图2）。在移动终端的Web应用运行环境中，其核心部分为终端浏览器运行引擎，其中又包括Web核心引擎和JavaScriptAPI扩展两大模块。Web核心引擎主要负责Web应用代码中的HTML，CSS，JavaScript脚本，加载、处理、渲染页面布局以及其中的文本、图像、视频、音频等多媒体元素；而JavaScriptAPI扩展则完成Web应用中所调用的API的具体功能调用执行，通过终端系统能力、网络交互能力将通用的Web应用API接口功能在终端上实现。后面章节将主要针对这两大模块所涉及的技术功能，结合W3C的HTML5Web应用的一系列现有标准规范工作，分析目前移动终端上HTML5Web应用的技术能力架构。 3终端Web应用的核心Web技术标准 3.1图像 (1)2D矢量图形（SVG，ScalableVectorGraphics） SVG提供一套基于XML的标记语言用于描述二维矢量图形。由于图像是由一组几何图形构成的，它们能够按照用户的需求任意缩放，因此非常适合在屏幕尺寸受限的移动设备上的开发。它们也很容易被动画化，可创建非常高级、平滑的用户界面。SVG为HTML5带来了新的可能性，例如将高级图像过滤效果通过SVG过滤器应用在多媒体内容上。相应标准：SVGTiny1.2，SVG2.0。 (2)2D编程性 API作为对SVG所提供的描述性方式的补充，HTML5中的<canvas>元素提供了一套2D编程性的API，非常适于以内存低耗用的方式处理图像。该API不仅可以渲染图像，也能够用于进行图片处理和分析。相应标准：HTMLCanvas2DContext。 (3)CSS图像样式效果 SVG和HTML都能够使用CSS（CascadingStyleSheets，层叠样式表）进行排版；特别是CSS3，作为一套规范集合，提供了大量的新特征，使得创建图像效果更加简便，如圆角、复杂的背景图片、阴影效果、旋转内容、动画、3D效果等。 相应标准： ●圆角、复杂的背景图片、阴影效果：CSSBack-groundsandBorders。 ●2D变换：CSS2DTransformsModuleLevel3。 ●3D效果：CSS3DTransformsModuleLevel3。 ●动画效果：CSSAnimationsModuleLevel3，CSSTransitionsModuleLevel3，TimingControlforScript-basedAnimationsAPI。 (4)可下载的字体集 好的字体对于构建吸引人的图形界面起到重要作用，但移动设备发行时通常只有有限的字体集合。WOFF（WebOpenFontFormat）可以便捷地通过样式表自动下载字体，同时保持下载字体集的大小仅限于渲染界面实际所需。相应标准：WOFFFileFormat1.0。 3.2多媒体 媒体播放 HTML5通过添加<video>和<audio>这两个标签，显著的提升了Web页面对多媒体内容的集成。这两个标签分别允许嵌入视频和音频内容，让Web开发者能够摆脱插件，而更加自由的与这些媒体内容交互。相应标准：HTML5videoelement，HTML5audioelement。 3.3设备适配 移动设备不仅与传统的电脑差别迥异，而且彼此之间也有许多不同。比如屏幕尺寸、分辨率、键盘类型、媒体摄录能力等。 (1)设备信息：DeviceDescriptionRepositoryAPI，一个统一的服务器侧的API，允许Web开发者从众多的设备信息数据库中，获取正在访问他们网站的设备的配置信息数据。 (2)基于CSS的适配：CSSMediaQueries，提供了一套机制允许Web页面根据一些设备特性（包括屏幕分辨率）适配布局和行为。CSSDeviceAdaptation定义了一套CSS指令，参照所持设备的尺寸，指定每个布局所适用的尺寸。 3.4表单 在大多数基于Web的应用中，使用HTML构建丰富的表格是用户输入的基础。由于有限的键盘，在移动设备上的文本输入对大多数用户来说还是件麻烦的事情。HTML5通过提供新的表格控制模式，优化用户输入数据的方式，而部分地解决这个问题： (1)时日和时间实体：HTML5DateandTimeStateofInput元素，能够利用专门的表单控件（如<inputtype=“date”>）而直接调用本地的日历控件。#p#分页标题#e# (2)定制化文本实体（tel，E-mail，url）：HTML5Telephone，E-mailandURLStateofInput元素，如<inputtype=“email”>，<inputtype=“tel”>，<inputtype=“url”>可以用于优化用户输入复杂数据的方式，例如可以使用专门的虚拟键盘，或是访问设备上的相应的数据记录（地址簿、书签等）。 (3)输入模式：HTML5Pattern属性，既可引导用户输入，也可避免服务器侧验证或基于JavaScript的验证。 (4)输入提示：HTML5Placeholder属性，通过插入提示文本控件中预期输入的内容类型而引导用户输入。 (5)文本实体的预定义值：HTML5Datalist元素，能够创建自由文本输入控件，具有用户可从中选择的预定义值。 3.5封装 应用用户体验的一个重要因素关联到用户如何感知到应用永久可用（甚至在离线状态时，这对于移动设备尤为重要），以及如何分享和传布，典型的即通过应用商店购买。这些通过封装打包应用已足以解决。 Web平台提供两种互补的方式封装打包Web应用： (1)HTML5ApplicationCache：通过一个Manifest定义浏览器需要在其Cache中缓存的文件资源，以支持离线状态时对Web应用的访问。 (2)W3CWidgets系列规范：定义了一套以Zip文件形式Web应用的框架，其中的配置文件是附件特征的基础，如应用的签名、对高级API的访问控制、受限的网络使用等。相应标准：WidgetsPackaging&Configuration，Dig-italSignaturesforWidgets，WidgetAccessRequestPolicy。 4终端Web应用的扩展API标准 4.1用户交互 (1)基于触控的交互：TouchEventsSpecification，虽然传统的交互方式（键盘、鼠标输入）仍然能够在Web平台上使用，但是对于触控输入的特有处理，是创建良好用户体验的关键。 (2)振动：VibrationAPI，许多移动设备使用触觉反馈（如振动）来创建新的交互形式（如在游戏中）。 (3)通知：WebNotifications，移动设备被用户随身携带，许多移动用户依赖他们的设备进行事件的提醒或通知。 4.2多媒体 (1)媒体捕捉HTMLMediaCapture则定义了一套基于标记的机制，以使用摄像头和麦克风访问捕捉的多媒体内容，这是移动设备上非常通用的功能。而WebReal-TimeCommunications工作组与DeviceAPI工作组也正在一同制定一套API，能够直接操作来自摄像头和麦克风的媒体流。相应标准：HTMLMediaCapture，WebRTC1.0：Real-timeCommunicationBetweenBrowsers。 (2)媒体分析、修改HTML5有两个附件的API提供了多媒体操作的能力。Canvas2DContextAPI可以调整图像以及编辑视频。类似的方式，Audio工作组也在制定一个API能够修改音频内容，以及分析、合成声音。相应标准：HTMLCanvas2DContext，WebAudioAPI，MediaStreamProcessingAPI。 4.3数据存储 许多应用的关键组件就是保存状态、导出内容以及将来自系统上其它文件和服务的数据进行集成的能力。 (1)简单数据存储：WebStorage，提供LocalStor-age和SessionStorage两个基本机制，能够分别无限期的或是基于一个浏览器Session保存数据。 (2)文件系统数据交互： ●FileAPI，加载文件的内容。 ●FileWriterAPI，保存或修改文件。 ●FileSystemsAPI，访问更多的常用文件操作，包括文件目录管理。 (3)数据库查询/更新：IndexedDatabaseAPI，定义一套具有数值和分层对象的数据库，能够非常高效地查询和更新。 4.4个人信息管理 应用能够通过与已有数据记录集成而获益，在移动设备上，地址簿和日历尤为有用的信息源。对应标准：ContactsAPI，CalendarAPI。 4.5硬件集成 移动设备上集成了许多传感器，如GPS，加速计，光亮感应器，麦克风，摄像头，温度计等，使得它们成为真实与虚拟世界的重要桥梁。 (1)地理位置：GeolocationAPI，提供了一套通用接口用于设备定位，独立于底层的定位技术（GPS，Wi-Fi网络标识、蜂窝网络中的三角定位等）。该API的第二版增加了获取将用户当前位置与城市地址相匹配的能力。 (2)运动感应：DeviceOrientationEvent，获取运动方向和加速度。 (3)电池状态：BatteryStatusAPI。 (4)通用感应器：SensorAPI，对Sensor类硬件通用的数据获取和监控接口。(5)摄像头/麦克风媒体流：WebRTC1.0：Real-timeCommunicationBetweenBrowser。 4.6网络 网络连接性是移动设备的主要资源之一：Web是内容的浩瀚宝库，也是一个近乎无限处理能力的源泉，克服了移动设备的这两方面的缺陷。 (1)HTTP(s)网络API：XMLHttpRequest，是一个广泛部署的API，使用HTTP和HTTPs协议从Web服务器加载内容。 (2)跨域请求：Cross-OriginResourceSharing默认情况下，浏览器是不允许来自一个单独Web页面的跨域请求的，该规则保护用户，防止一个Web站点滥用用户的证书并盗取用户在其它Web站点上的数据。站点可以通过使用Cross-OriginResourceSharing机制而推出上述规定，开放了Web应用和服务之间更加宽泛的合作。#p#分页标题#e# (3)服务器推送：Server-SentEventsAPIXMLHttpRequest对于客户端发起的网路请求很有用，但由于移动设备网络能力有限，并且网络请求耗用电池（有时还有账单费用），因而更适合于使用服务器发起的请求。该API允许触发基于（通过HTTP和其它协议）推送通知的DOM事件。 (4)双向连接：WebSocketAPI，在IETFWebSocket协议基础之上构建，较之于XMLHttpRequest，提供一套双向连接的、更加灵活的、资源占用较低的网络连接。 (5)在线状态：HTML5onLineDOM状态标签，确定是否连接存在以及可用的网络类型。 (6)网络性质：NetworkInformationAPI，确定网络的性质，如是否为WIFI或3G连接。 4.7通讯 除了连接到在线服务，一个好的移动应用平台最重要的因素，应该让用户之间、设备之间以及应用之间进行通信。 (1)E-mail，SMS，MMS及附件：MessagingAPI，能够通过链接（sms：，mms：及mailto：URI范式）创建、发送信息，并对于添加附件以及发送的成功率具有更多的控制。 (2)应用内通信：HTML5WebMessaging，允许Web应用相互之间通信。(3)P2P通信及流媒体：WebRTC1.0：Real-timeCommunicationBetweenBrowsers。 4.8性能和优化 由于有限的CPU能力，以及更突出的有限的电池能力，移动设备特别需要关注性能问题。 (1)计时控制：NavigationTiming，ResourceTim-ing，PerformanceTimeline，UserTiming。 (2)页面可见性检测：PageVisibilityAPI，确定一个Web页面是否正被显示，也可用于针对Web应用需求而调配资源的使用，例如当页面最小化时减少其网络活动。 (3)动画优化：TimingControlforScript-basedAni-mationsAPI，有助于减少播放动画所需资源的使用。 (4)电池状态：BatteryStatusEvents，允许将资源的使用调整适合当前移动设备电池的可用电量级别。 (5)多线程：WebWorkers，类似线程的机制，通过将占用资源最多的操作卸载至后台处理，而让用户界面保持响应。 (6)MobileWebApplicationBestPractices：该指南提供一些如何构建在移动设备上能够良好运行的Web应用的通用建议，特别考虑到优化的需求。 5HTML5Web应用带来新的变革 相对于目前占据主流的终端操作系统上的本地应用，HTML5Web应用主要程序代码、数据内容托管在服务器端，在终端侧主要依托于浏览器进行轻量级的交互运行，因而理论上具有跨终端系统、跨设备类型的优势。这种新的应用模式对于移动终端生态系统将带来新的变革。对于应用开发，采用HTML，JavaScript等Web语言开发应用，难度低、易上手；此外，无需考虑不同终端系统、不同系统版本，仅需在服务器端维护一份最新版本，随时可以向用户提供最新的应用与服务，大大降低了开发维护成本。因而，Web应用开发者无需将主要精力耗费在代码编写维护上，可以更多的专注于应用内容创新上。对于应用消费，同一款应用可以在不同的终端设备之间保持一致体验，数据内容同步；应用的获取、更新无需用户主动的多次下载、安装，仅需保存Web应用的url，随时访问的都是最新版本和内容。此外，HTML5提供的应用间的通信机制，也能为用户带来新的功能模式。对于应用平台，Web应用可以自由灵活的在Web平台上、维护、更新，无需再经过当前AppStore模式的漫长审核周期的时间代价，以及高比例的应用分成代价。同时，利用HTML5内嵌的多媒体、交互等新特性，可以借助Web搜索引擎，Web广告，SNS等互联网模式，进行更加多元化、个性化的Web应用营销，摆脱当前AppStore的单一、低效的应用排名推广模式。此外，HTML5Web应用对于浏览器插件、终端应用预置模式乃至终端操作系统平台等方面，都将带来冲击。而对于传统的功能手机，WebTV，车载终端等凡在互联网终端设备，则将注入新的Web应用的活力。 6结束语 HTML5作为下一代Web技术已成为不争的事实，而以其为核心的开放Web平台亦以已成为大势所趋。但这一目标的实现，还需要终端应用生态系统中的各方面，互联网公司、终端厂商、运营商，尤其是广大应用开发者及用户的支持与投入。移动Web应用作为一种新的终端应用形式，将与现在主流的移动终端本地应用融合发展，两种形式的应用在未来发展更多是互补而非取代关系。随着HTML5系列技术标准的不断成熟，浏览器支持功能的不断丰富，以及Web引擎对JavaScript等Web代码执行性能的不断提高，HTML5Web应用无论从功能、效率、用户体验等诸多方面，都将于当前终端设备上的本地应用相媲美，甚至在某些特性上有所超越。