SCI期刊 | 网站地图 周一至周日 8:00-22:30
你的位置:首页 >  通信技术 » 正文

HTML5应用技术与标准

2021-4-10 | 通信技术

 

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”>)而直接调用本地的日历控件。

Top