基于HTML5的Web前端开发技术研究

张志敏

（池州职业技术学院 安徽 池州 247000）

0.引言

自21 世纪以来， 互联网技术的高速发展， 使人们在使用互联网时，对Web页面有着越来越高的要求，这在很大程度上促进了Web 前端开发技术的发展，Web 前端开发技术不仅需要在PC 端中适用，还能在各种移动终端中适用，而在Web 前端开发技术的发展中，HTML5已经成为该技术的主流形式，通过HTML5 技术的应用，能够支持Web前端开发技术在各种浏览器中应用，并且能够有效降低开发与维护成本，使浏览器具备更加丰富的HTML5 特性。

1.HTML5技术概述

HTML 技术又被称之为超文本标记语言技术，其作为万维网中的重要描述语言之一，人们在使用互联网时，其经常使用的网页便是由HTML 技术所制作的。 HTML 语言经过不断的发展，如今已经完成了第五次修订，从而形成了HTML5 技术。对于HTML5 技术来说，其所包含的范围并不仅仅是HTML 技术， 其同样还包含有JavaScript 脚本语言以及CSS 样式。 而在浏览器中，通过HTML5 技术的应用，能够使浏览器具备更多的应用功能， 并且能够有效降低浏览器对插件的依赖。相比于以往的HTML 版本，HTML5 的新特性更多，能够为用户带来更快、更炫、更好的体验，用户不需要在浏览器中安装任何插件，即可在浏览器中流畅的欣赏音乐和观看视频等，同时，HTML5 还具备良好的兼容性能，用户在使用视频、影音等应用程序时，可将麦克风、摄像头等设备直接与应用程序进行连接。 除此之外，HTML5 技术还能实现多个APP 之间的应用切换， 并且在应用切换过程中不需要重新返回到界面，可直接在APP 中进行跳转，从而使用户对应用程序的使用变得更加方便。 在Web 前端开发中，开发人员可利用HTML5 技术对语法进行重新定义，以便于统一各种不同设备的使用标准，同时还能为开发人员提供丰富资源的开源库， 进而使Web 应用程序的开发变得更加方便、快捷。 通过HTML5 技术能够在不同平台中将开发的Web 应用程序进行封装， 这样能够使开发成本得以降低的同时， 还能利用HTML5 技术的实时更新来对Bug 进行便捷的调试。

2.基于HTML5的Web前端开发技术研究

2.1 Web前端页面的自适应开发技术

自互联网诞生以来，科学技术的进步，使各种移动设备在人们的生活中变得越来越普及，人们可以通过移动设备来利用互联网进行工作、娱乐和学习，这也使开发人员在对Web 前端页面进行开发时，需要充分考虑相同网页如何才能在不同设备中进行显示，以便于使网页能够与设备的屏幕大小相匹配， 从而使网页的效果得以最佳呈现出来。对于部分网站，其在解决该问题时，需要根据设备类型的不同来对不同版本的网页进行制作，这无疑加大了网页的维护难度。 而HTML5技术的出现，使其能够对Web 前端页面进行自适应设计，以此来解决网页对不同类型设备屏幕大小的自适应调整问题。 利用HTML5 技术对Web 前端页面进行自适应开发时，主要是通过以下方法来实现的，首先是在HTML 文档的meta 标签name 属性值中输入viewport 指令，并将viewport 指令的宽度设置为与设备屏幕的宽度相同，并禁止用户对网页进行手动缩放。 其次，对web 前端页面的宽度及字体进行数值调整，在数值调整时，不能将其进行绝对数值的设置，而是应按照相对数值的百分比或是自动值来进行设置，字体则应采用相对值rem 来进行设置，这样便可对字体的比例进行大小调整。最后，通过媒体查询来对CSS 样式进行执行，在CSS3 中，媒体查询作为一种新的方法，其能够根据设备类型的不同而执行与之相匹配的CSS 样式。

2.2 Web离线程序开发技术

在HTML5 中，离线缓存是其重要特性之一，该特性并不会对PC端程序的开发造成较大影响，不过其却会对移动终端设备应用程序的开发产生很大影响，例如，在地铁中，用户往往无法利用手机对网页进行访问与浏览，而要想解决这个问题，就需要应用到Web 离线程序开发技术， 该技术是通过HTML5 来实现的，HTML5 利用cachemanifest文件来进行网络资源的离线缓存，这样当用户进入到信号不好的区域时，这些网络资源便可通过cachemanifest 文件来进行自动加载，从而确保用户在离线状态时也能对应用程序进行访问。 在对cachemanifest文件进行创建之前，需要开发人员在Web页面的htaccess 文件中设置相应的代码，然后创建一个manifest 文件，在manifst 文件中的CACHE中标明需要进行离线缓存的文件， 在NETWORK 标明不需缓存的文件，在FALLBACK 中标明访问失败后的跳转页面，这样便可实现对静态网页的离线访问。 如果需要离线缓存的Web页面为动态网页，则需要采用HTML5 技术来对navigator.online 属性进行检测， 以此确认其是否能够在线使用， 并通过HTML5 中的online/offline 事件来对网络状态进行实时监测。 在对Web页面中的应用程序进行离线开发过程中，还要对数据进行本地存储，由于cookie 的容量存在很大的局限性，因此可通过HTML5 技术所提供的DOMStorage 机制来对数据进行存储，如果要对大量数据进行处理与存储时，还可通过WebSQLDatabase这一关系数据库来对数据进行存储。

2.3 Web前端的音视频嵌入技术

在基于HTML5 的Web 前端开发技术中， 开发人员能够通过HTML5 技术在网页中进行音频与视频的嵌入， 而且用户在利用Web网页播放音频与视频时不需要安装任何的插件，开发人员只需要利用HTML5 技术在Web 网页中新增一个audio 与video 的音频与视频标签，即可实现网页对音频与视频文件的嵌入与播放。

2.4 Web前端图形动画制作技术

HTML5 技术能够在Web 前端开发过程中对图形图表及动画等进行制作，在HTML5 技术中自带有相应的canvas 标签，该标签实质上是一种画布， 开发人员可通过画布的设置来在其上绘制大量的路径、字符、图形等内容，然后在标签中对JavaScript 代码进行编写后，即可实现对相应图形效果的制作。在动画制作中，则可布置多幅静态图片，然后对这些图片进行连续而快速的播放， 然后在HTML5 中设置一个定时器，以便于对图片切换的间隔时间进行设置，从而实现对3D 动画的制作，并且，在HTML5 中，其还能够通过WebGL 规范来对3D 内容进行渲染。

2.5 Web前端的地理定位技术

在基于HTML5 的Web 前端开发技术中，地理定位作为其重要特性之一，能够帮助商家对用户的地理位置进行了解，从而为用户提供针对性的服务。 在Web 前端的地理定位技术开发中，开发人员可通过HTML5 的GeolocationAPI 接口来对浏览器中用户的地理位置进行获取， 在调用， 在开发Web 前端程序过程中， 需要对window.navigator.geolocation 对象进行相应的调用。GeolocationAPI 接口在对用户地理位置信息进行获取时， 主要是借助于GPS 定位系统、GSM 信号站、WiFi热点以及IP 地址等方式来实现的，对于移动终端设备来说，其在获取用户位置信息时，GPS 定位系统是其首要的选用方式， 这是因为GPS具备极高的定位精度， 不过如果仅仅采用GPS 定位系统是难以对室内用户的地理位置进行定位的。因此需要结合无线上网、Wifi、GSM 信号站等多种方式的应用来实现定位。 对于PC 端用户来说，采用上述方法是无法获取这类用户的地理位置信息的， 因此只能采用IP 地址来进行定位，不过IP 地址定位的精度不高，因此需要对Geolocation 的返回值进行判断，并利用GetCurrentPosition 方法来对PC 端用户的地理位置信息进行获取。

2.6 Web前端的Form表单技术

在HTML 技术未进行第五次修订之前， 在Form 表单中需要将表单元素置于form 标签的开头与结尾中， 而HTML5 技术的出现，使Form 表单成为一种声明式表单， 有效打破了表单元素放置位置的局限性，开发人员只需将表单id 与放置位置关联在一起，即可将表单元素放置到网页的任意位置当中。并且，HTML5 技术还能在form 表单在对多种表单属性与控件类型进行设置， 从而大大节约了Java 代码的编写时间，使form 表单的制作变得更加便捷轻松。

3.结语

总而言之，在基于HTML5 的Web 前端开发技术中，HTML5 在其中无疑发挥着至关重要的作用，利用HTML5 来开发Web 前端应用程序，能够使Web页面很好的兼容PC 端与移动终端设备，使Web 应用程序能够在不同类型的设备中得到有效应用，从而大大推动了互联网在各个领域中的发展。