浅析HTML5的技术与应用模式

姜玉龙

（曲阜师范大学，山东 日照 276826）

浅析HTML5的技术与应用模式

姜玉龙

（曲阜师范大学，山东 日照 276826）

HTML5是全新的Web语言标准，其拥有众多特点与特征，必将会成为互联网核心关键用语之一，同时也会带来新的创新应用。HTML5能够更加明显地表达Web前端的内容，并且有机会将Web前端变为功能更加强大、性能更加优越的平台。文章主要针对HTML5的技术与应用模式进行研究。

HTML5；应用模式；Web

HTML5并非对当前技术的全部颠覆，而是通过新特点与优势来增添一些实用的新功能。在增加新功能的同时，能够保证HTML5对所有网页的兼容性，在提升用户信息安全性能的同时改善网页渲染的工作效率。针对HTML5的技术与应用模式进行研究，对于推动HTML5的发展有着重大的实际意义。

1 HTML5技术及其特征

1.1 HTML5

HTML5是第五代超文本标记语言，能够建设互联网前端内容。同时，HTML5在互联网的运行中是一项关键的核心技术。虽然在若干年前已经推出，但是其依然处于持续发展更新的阶段。目前已经有很多浏览器已经兼容HTML5。HTML5摒除了与当前Web技术不匹配的元素，并且在语法错误上有很大的包容性，可以在最大程度上方便开发者开发，兼容格式错误的HTML文档。HTML5不单显著改善了网页的表现状态，同时还把之前HTML需要设置第三方插件的多媒体功能以标签的形式嵌入至HTML5的功能当中[1]。

1.2 HTML5的特征

当前所有HTML5的功能均是原生支持，而不是通过插件来实现的。HTML5主要有以下几个特点：

第一，HTML5定义了更新的HTML标记来对元素的内容进行描述，以便使得网页的建设更加便捷。其中包括article，nav，section；全新表单控件，例如time，url，date；全新的页面元素，其中包括section，footer以及audio，video等。并且，还摒弃了big，font，noframes，blink，center，frame等。另外，HTML5新增的audio，video元素均需要利用API的配合来实现对细粒度的控制管理。

第二，浏览器在进行网页渲染的过程中会给网页建立DOM（文档对象模型），并且利用一系列对象模型来体现HTML的元素，加以javaScript API来针对对象模型进行操作。而在HTML5中重新定义了相关JavaScrptAPI用以操作HTML5新增加的元素。二维绘图AIP：Canvas是一种像素图像护板，主要被利用于图像的动态渲染与游戏等方面[2]。在HTML5中，Canvas不单单是一个机遇绘图的矩形区域，同时还规定了相关的API来对线路与多边形等图形开展绘制。离线存储API：其是一种与Cooklie类似方式，主要被用于网络数据储存。相对于Cooklie来说，离线存储API的信息更大，能够长时间存储信息，并且让JavaScriptAPI持续操作。同时，其拥有若干种的数据存储方式，其中包括session Storage，local Storage等。地理定位API：该API技术能够通过全球定位系统、无线局域网络、蜂窝网络等方式来获取用户的地理位置信息。定位结果准确、有效、灵活，并且能够应用在多种地图应用中。HTML智能表单：可以对颜色、日期、邮件地址等不同要素进行设置，从而提升用户体验，转变用户的交互方式。

第三，多媒体。在HTML5中，新增了audio，video等标签，主要用于在Web网页中添加不需要其他flash与插件支持就可以实现的音频、视频播放功能。当前音频支持Ogg Vorbis，MP3，AAC等格式，视频支持Ogg Theora，MPEG4，H.264等格式。同时，HTML5还支持Canvas画布元素，该元素是HTML5中最为实用的新加功能之一[3]。Canvas元素为块级元素，其主要是针对不兼容Canvsa的浏览器以及其他用户代理的备用内容。该元素的应用编程接口拥有几十种方法用以绘制线条、矩形、圆形等，可以使用不同的样式，不同的颜色，不同的书写字体来操作视频或图像，进行其他有趣的活动。WebGL：在HTML5出现之前，在网页中3D的形象无法直接展示，而是需要通过非标准的网页语言语法来体现，或者利用浏览器中的其他插件来体现。而HTML5与WebGL则提供了一种技术使得开发者可以直接在浏览器上展现物体的3D状态，并且可以直接使用设备中的图形处理装置来进行处理，从而保证其绘图性能。

第四，通信。（1）WebSockets。HTML5增加了一组API，能够辅助实现Web应用程序通信与协同工作。WebSockets可以让Web应用程序形成与Web服务相互连接的通道，WebSockets可以使得Web应用程序执行多项工作任务，并且避免锁死浏览器的情况出现。同时，WebSockets也可以在Web应用程序与URI端点之间打造双向通道，Sockets对象方能接收与发送相关信息，还能够响应WebSockets对象的工作状态。（2）WebNotification。当前浏览器依然使用的是沙盒工作方式[4]。这一工作方式使得浏览器与桌面相互独立。而HTML5中的WebNotification则提供了一种可以跳过沙盒的通信API，让用户可以随意访问任何网页，在浏览器最小化的时候也可以同时接收到来自Web应用的通知。当前，WebNotification依然处于初期状态，为了充分保证用户的安全性，该功能的使用需要用户的授权。

2 HTML5技术下Web应用编码方法

在现代社会HTML5的发展十分迅猛，越来越多的浏览器开始支持HTML5，并且逐渐适应HTML5的新特征，同时也出现了众多基于HTML5技术的移动APP应用。要在飞速发展的技术潮流中掌握Web开发的趋势就需要充分熟悉掌握HTML5的相关特征。HTML5编码开发过程中存在一些高效的实践方法，其将会提升Web开发者的效率，改善Web开发的质量。第一，模板生成器。在开始针对HTML5页面进行编写的过程中可以利用现有的模板生成器来生成简单的HTML5模板，从而避免重新编写HTML5代码。使用HTML5模板生成器十分便捷，通常来说只需要填写基础的表单，选择简单的选项就可以即时生成基本的HTML5模板。当前已经有众多十分优秀高效的HTML5模板生成器，例如Switch TOHtml5（地址：http://switchtohtml5. com/）以及Shikiryu generator（地址：http://shikiryu.com/ html5/）。如果在使用过程中需要更加复杂的生成器可以选择使用HTML5Boilerplate模板，该模板地址为：（http:// html5boilerplate.com/）。这一模板能够在网页的设置中选择全新的HTML5样式，并且支持在浏览器中开展HTML5/ CSS3特性检测。

第二，Cheat sheet。HTML5正处于快速发展阶段，因此在使用过中必然会出现众多全新的特性。通常开发者难以将HTML5的特性全部掌握熟记，因此可以选择使用备忘录（chaeat sheet）来对HTML5的新特性与使用方法进行查阅核对。

第三，兼容性。由于HTML5技术相对较新，因此各大浏览器对HTML5的兼容性均有所不同。例如，微软的Internet Explorer浏览器就与其他的浏览器不同，因此在利用HTML5开发的时候要注意在各大浏览器中获取技术平衡。例如，兼顾到用户群体所使用的浏览器类型。开发者可以通过访问http://caniuse.com/来对HTML5的各个属性与事件在浏览器中的兼容情况进行查看。在该网站中可以让开发者清晰、详细地认识到SVG，CSS等在HTML5中的各项用法，并且通过表格的浏览形式来对各个浏览器支持HTML5的情况进行对比[5]。

第四，正确使用元素。在尚未使用HTML5的时候，开发者需要在页面使用大量没有语义的标签，这使得HTML5变得十分难以理解，尤其是对于搜索引擎来说。因此，在HTML5中融合了大量的新标签，其中包括header，footer，article，section等。但是开发者在使用过程中要注意不同新标签的特性，选择正确的使用方法。

3 HTML5的应用模式

伴随移动互联网的繁荣发展，移动终端呈现出十分迅猛的发展态势。在众多移动终端与平台中，开发人员必须要面对众多性能与体验上的妥协，在平台的选择方面浪费了大量的时间。然而HTML5的出现给Web的应用带来了希望。Web的应用可以实现常用的本地应用的功能特征。同时，Web应用的跨平台特征，使得产品问世、版本更新与平台均处于相互独立的阶段，使得开发者的开发过程更加便捷[6]。在HTML5标准发布后，HTML5技术下的移动Web应用也开始出现在人们的视线当中。百度地图、谷歌地图的移动版本使用了地理位置定位的API；优酷、爱奇艺等视频网站摒弃了Flash插件，使用了HTML5新特征来完成音频、视频的播放。总的来说，HTML5技术给移动端的APP发展带来了Web APP以及Hybrid APP两种全新的开发模式，再结合以往存在的Native开发模式，移动互联网APP目前一共存在3种开发模式。

第一，Native App。开发者可以根据移动终端的操作系统来选择不同的语言来进行开发设计。例如，移动终端的系统为安卓，则一般使用Java语言开发落在IOS平台则使用Object C语言来进行开发。这一方式的优势在于不同的平台能够形成不同的客户体验，并且开发出人性化、界面友好、精彩丰富的交互途径。这一开发方式的缺点是维护成本过高，某一应用需要根据移动终端的操作系统同时开发多个版本，并且受到市场限制较大，难以获得足够的自由开发空间。

第二，Web App。Web App是基于Web技术的，但是却依然依附于浏览器的解析。Web App与传统网页存在着一定的差异，其操作界面、操作方式都是直接适用于移动端屏幕的。并且，利用HTML5中的Application Cache特征，可以让用户获取与本地应用相同良好的使用感受。当前一部分移动浏览器兼容浏览器地址栏隐藏、状态栏带有浏览器特征等元素，从而使得Web App与普通的本地应用在使用中没有明显差异。Web App的出现改变了移动浏览器与智能终端平台的设计。例如，UC浏览器、QQ浏览器、360浏览器等均可以在浏览器主页上通过应用图标的方式来实现Web的应用，让浏览器在操作时候与操作系统桌面更加接近。

第三，Hybrid App。该开发模式为混合模式移动应用，其是一种处于Native App与Web App之间的开发模式。这一开发方式主要是通过HTML5来实现的。这一开发方式不单单拥有Native App良好的人机交互体验，同时还具有Web App跨平台的优势，并且维护成本较低，经济效益良好。然而Hybrid App同时也存在一些开发商的问题。例如，版本的管理控制过程变得相对复杂，需要同时对客户端版本与客户端中的HTML5版本进行同时管理控制。同时，开发设计过程变得相对复杂，由于HTML5可以直接展现业务的交互界面，假如没有统一的设计规范，则十分有可能出现应用的一部分逻辑由客户端完成，另外一部分则是由HTML5技术完成。出现这种情况使得Hybrid App方式的开发、测试过程都变得十分复杂。

4 HTML5的应用场景分析

当前在应用HTML5的时候没有对场景存在着明显的限制与规定，因此在利率上移动互联网中的应用需求都可以通过Web App或Hybrid App等方式获得。以金融行业为例，HTML5可以在下列领域得到广泛的应用。第一，互动式的广告营销。在新媒体时代，微信、微博、网页已经成为各大商家开展广告宣传、进行市场营销、开展品牌推广的重要平台。而企业则可以利用HTML5在短时间内制作出互动式的营销服务界面，再通过微信、微博等平台向受众发送，将广告深入传播到受众群体当中。这就是HTML5在制作宣传界面的优势，不需要编写代码，可以利用制作工具在短时间内完成宣传材料。并且HTML5还可以将图片、文字、视频等方式进行结合，给予客户立体感官的体验，使得客户可以更加深入、更加直接地了解广告内容、产品特点与服务详情。第二，场景化的应用。场景化应用即为Live-APP，其利用音频、图文、视频、重力感应等技术为客户营造出了一种身临其境感受的、有活力的移动应用。不需要客户特意进行下载，只需要通过制定的平台与工具来进行制作就可以将其发布在互联网上，再向客户分享链接，客户就可以通过点击链接来访问场景应用。而HTML5则是场景应用制作的关键技术之一。

5 HTML5的缺陷

虽然HTML5在使用过程中存在众多优势，但是不可避免的，HTML5依然拥有当前无法克服的缺陷。首先，离线存储的安全性。在应用程序出现问题的时候需要通过搜素查询日志来对其进行研究。但是如果应用程序在工作运行若干天后依然无法发送日志，开发者则需要考虑是否客户端出现了异常。日志的记录累积则会导致客户端出现运行卡顿、存储量增加、使用缓慢等情况。如在出现问题的时候再进行日志记录已经为时已晚，而HTML5技术则只能够存储最新的日志，最大程度地保护应用的使用性能。同时，通过后台写入日志的方式也能够进行离线存储，运用这一技术即使在设备出现问题时重启，日志也能够正常恢复。值得注意的是，无法在本地设备上存储没有进行加密的日志，而HTML5不具备针对离线存储加密的API，则开发者需要对日志进行单独加密。第二，开放性带来的影响。由于新标签的增加，各个浏览器之间缺少统一的数据描述格式，从而导致了用户体验不佳。HTML5出现后就建立了开放性原则。引出两大阵营对视频格式的设置存在异议。

6 结语

总的来说，HTML5的出现与应用使得程序员开发工作变得更加便捷，各种特征与优势也使得HTML5不断地被普及应用。HTML5可以在各个领域都发挥其应有的作用与价值，虽然HTML5当前依然存在一些问题，但是相信在以后HTML5将会拥有更加广泛的发展空间，给用户带来与众不同的互联网体验。

[1]王英华，钟琪，丁社红.移动办公平台MAA上的HTML5技术开发与应用[J].电脑编程技巧与维护，2013（11）：53-61.

[2]李世满.基于HTML5 Web技术APP快速开发研究—以移动办公APP软件开发为蓝本[J].电脑知识与技术，2016（3）：81-82.

[3]柳翔.基于HTML5技术的大坝安全监测图像绘制技术[J].数字技术与应用，2015（11）：72-74.

[4]JACOBS I, JAFFE J, HEGARET, P. How the Open Web Platform Is Transforming Industry[J].Internet Computing, 2012（6）：82- 86.

[5]张玉晴，黄瑾娉.基于HTML5的跨平台移动应用关键技术的研究与实现[J].工业控制计算机，2013（3）：56-58.

[6]陈新泽，杨斌，仲维亮.基于HTML5的移动终端地理信息应用设计[J].成都信息工程学院学报，2013（2）：119-123.

Analysis of HTML5 technology and application mode

Jiang Yulong
（Qufu Normal University, Rizhao 276826, China）

HTML5 is a new Web language standard, which has a number of features and characteristics, it will become one of the core internet key terms, also bring new and innovative application at the same time. HTML5 can more clearly express the content of the front end of the Web, and has the chance to make the front end of Web become the more powerful platform with superior performance. This article mainly aims at the technology and application mode of HTML5 to carry out the research.

HTML5; application mode; Web

姜玉龙（1993— ），男，甘肃兰州，本科。