1、SOFTWARE软 件2022第 43 卷 第 12 期2022 年Vol.43,No.12作者简介：李建华（1980）,女,山西盂县人,本科,讲师,研究方向：计算机应用。HTML5 在 Web 前端开发中的实践研究李建华（山西金融职业学院，山西太原 030008）摘要：移动互联网已经在全社会范围普及,在人们生活中占有重要的地位,越来越多的人对其产生了依赖性。面对 Web技术应用需求越来越多,为了很好地适应这种不断发展的环境,建立在 HTML5 技术基础上的移动应用层出不穷。为了明确HTML5 在应用中所发挥的作用,就要了解其所具备的特点以及技术应用中发挥的优势,使得 Web 程序员开展工作的
2、过程中对该技术合理应用,对于 HTML5 所具备的各种新特点合理应用,本论文着重于研究 HTML5 在 Web 前端开发中的实践应用。关键词：移动互联网；HTML5；WebApp；应用程序编程接口；实践应用中图分类号：TP391.41;TP212 文献标识码：ADOI：10.3969/j.issn.1003-6970.2022.12.038本文著录格式：李建华.HTML5在Web前端开发中的实践研究J.软件,2022,43(12):146-148Practice Research of HTML5 in Web Front End DevelopmentLI Jianhua(Shanxi Pr
3、ofessional Colloge of Finance,Taiyuan Shanxi 030008)【Abstract】：MobileInternethasbeenpopularizedinthewholesociety,occupyinganimportantpositioninpeopleslives,andmoreandmorepeoplehavebecomedependentonit.Facedwiththeincreasingdemandforwebtechnologyapplication,mobileapplicationsbasedonHTML5technologyemer
4、geinanendlessstreaminordertoadaptwelltothisever-evolvingenvironment.InordertoclarifytheroleHTML5playsinapplications,weneedtoknowthefeaturesithasandtheadvantagesithasintheapplicationoftechnology,sothatWebprogrammerscanrationallyapplyitintheprocessoftheirwork,andrationallyapplythenewfeaturesHTML5has.T
5、hispaperfocusesonthepracticalapplicationofHTML5inthefront-enddevelopmentoftheWeb.【Key words】：mobileInternet;HTML5;WebApp;applicationprogramminginterface;practiceapplication设计研究与应用0 引言HTML5 是基于 Web 平台发展起来的,其所具备的一个重要优势就是可以跨平台,不会局限于终端产品,也不需要拘泥于某个操作系统,对于相同的应用,开发人员不需要开发多种类型的版本,使得开发工作量与维护工作量大大减少,开发人员充满工作热
6、情,用户使用各种移动设备的时候,不仅效率高,而且速度快1。即便是在不同的平台上,也可以应用同一应用体验,不会产生很大的差异性,有助于 Web 应用更好地推广,在使用中获得良好效果。通过应用 HTML5技术,结合使用跨平台软件应用架构,就可以将 Web设计出来,与桌面计算机、智能电视、平板电脑以及智能手机相符合,打开这些智能设备,就可以使用 Web平台,获得自己需要的信息,在操作的便利性上满足用户需求。1 HTML5 在应用中所具备的特点（1）HTML5具有语义结构化标签。HTML5有结构化的语义标签,所涵盖的内容比较多,诸如Navigation、Section、Hgroup以及Article等
7、,在文档结构,HTML5比HTML4.01有更高的清晰度,而且数据信息容易读取2。（2）HTML5对于离线存储能够有效支持。Cookies自身所具备的功能还可以通过 LocalStorage 和 SessionStorage 提供,存在很高的相似度。Web 应用中所存储的数据信息有很复杂的结构,此时 lIndexedDB 可以提供帮助。对于资源文件,要采用缓存的方式将其存储在本地,此时发挥主要作用的是 FflineAppCache。当用户处于离线状态的时候,可以将 WebApp 充分利用外来,基于此积极开发移动 WebApp,使其可以保持离线状态3。（3）HTML5 的应用中使多媒体能力增强。
8、多媒体147李建华：HTML5 在 Web 前端开发中的实践研究能力增强,就是多媒体能力更加丰富,Web 应用明显提高,主要体现为视频性能、音频性能、图形性能以及数学公式、字体等,比如,2D、3D 绘图渲染能力非常强,使用 HTML5 画布所具备的特性就可以实现。当处于网页中,不需要对 AdobeFlash 合理使用,也不用使用微软 SilverLight 等,包括私有插件以及各种协议都不需要使用,HTML5 中的各种标签,比如、等都可以使用,对于音频、视频文件正常播放。（4）应用程序编程接口函数的应用。在移动 WebApp 中有应用程序编程接口函数,使得终端设备整体能力增强,相关函数比较多,
9、主要为摄像头、各种类型传感器以及通讯录的应用程序编程接口等。（5）多线程同时运行。HTML5 在技术上有所升级,新增加了 WebWorkers 组件,其所具备的特性对 WebApp 的各项传统功能有效弥补,不再局限于传统的单线程运行,实现并行 Web 操作,执行的时候可以多线程实现4。2 HTML5 技术应用中所具备的优势HTML5 技术应用中所具备的优势主要体现在 5 个方面,即开发工具移动化、HTML5 为跨浏览器提供支持、互动项目开发更加容易、存储方式优化、多媒体效果更加丰富,具体如下。2.1 开发工具移动化现在人们普遍应用的生活模式就是应用移动互联技术解决各方面的问题,而且这已经成为时
10、尚。移动互联设备因其便利性得以全社会范围内推广,尤其是人们普遍使用智能手机,线上操作可以实施进行,访问网站以及 Web 点击频次不断增长,HTML5 的应运而生,对于这种需要予以满足。将 HTML5 合理应用对 Web 新功能进行开发,不仅简单,而且更容易被用户所接受。将手机版网站制作出来,界面不能过于繁杂,而是要看起来简洁,操作简单化,将手机方寸屏幕合理利用,HTMH5有 Meta 标签,各种页面信息都可以提供。Meta的标签比较多,工作人员进行编程的时候更加容易,将适合用户使用的移动终端网页编辑出来。2.2 HTML5 为跨浏览器提供支持现在用户普遍应用的浏览器有多种,诸如 IE9 浏览器
11、、Chrome 浏览器、Firefox 浏览器以及 Safari 浏览器等,对 HTML5 予以支持,即便 IE6 的版本比较低,也可以使用并且操作顺畅。最为重要的是,HTML5 将此前版本的宝贵经验吸收过来,主要的目的是为了实现兼容,在低版本 IE浏览器的基础上对网页进行开发,只要将 JavaScript 代码填入其中,就可以对新元素合理使用5。2.3 互动项目开发更加容易用户在对网页进行浏览的过程中,往往会关注互动项目,而且目光随着移动,HTML5 对于这一点充分考虑。HTML5 不仅提供了大量应用程序编程接口,而且部分设计还是专门服务于开发互动应用,发挥其应用程序编程接口的作用开发交互式
12、网页,主要包括BrowserHistoryManagement（浏览器历史记录管理）、DragandDrop（拖拽）、OfflineStorageDatabase（脱机存储数据库）、TimedMediaPlayback（定时媒体播放）以及 DocumentEditing（文档编辑）等。对于这些程序接口合理使用,程序员就可以将交互式网页开发出来,这也是 HTML5 的独特之处。2.4 存储方式优化HTML5 设计了一个存储方式,非常方便,而且能够满足用户的需求。该技术的应用过程中,就是将用户信息以及缓存数据在用户浏览器中存储,将客户端数据库建立起来,即为本地建立的存储数据库。采用这种设计方式,所
13、具备的优点在于,数据信息能够快速存取,而且有很高的安全性,当用户加载上一次应用状态的时候,对于其优越性能能够体验,而且应用技术的过程中不需要使用第三方插件,所有主流浏览器都对该技术予以支持。如果使用早期的版本,主要发挥作用的是Cookie 技术,当浏览器被关闭之后,Cookie 就会自动删除。应用 HTML5 进行 Web 程序开发,用户对于此并不需要担心6。2.5 多媒体效果更加丰富应用 HTML5 设计多媒体网页的时候,有专用的标签,一共有 2 个,即 Video 和 Audio,前者所发挥的作用是让用户对视频资源进行访问,后者所发挥的作用是让用户对音频资源访问。将 HTML5 合理应用对
14、 Web应用进行开发的过程中,无论是 Video 还是 Audio,都是将视频和音频看作图片,所以,很多繁杂参数设置被省略了7。HTML5 的应用过程中能够有效取缔Flash 和 Silverlight,所应用的插件数量比较少,其运行质量和效率大大提高。3 页面交互 Web 设计以及响应式 Web 设计3.1 页面交互 Web 设计在 Web 设计的过程中应用 HTML5,需要将大量交互操作加入其中,要实现这些功能,除了应用 HTML5之外,jQuery 功能也要发挥支持作用。采用这种页面交互方式,从形式上来看,以折叠内容的方式为主,所要实现的最终目标是尽最大能力扩大页面内容容量,可148软
15、件第 43 卷 第 12 期SOFTWARE以提高用户浏览专注度,能够快速在页面上找到自己所感兴趣的内容8。如果一些内容并不是用户所需要的,当呈现时间比较长,已经超过固定时间,就会自动折叠,此时用户不需要操作,就不会看到相关内容。如果用户需要浏览的时候,就可以点击折叠的部分,页面就会打开。另外,这种交互方式比较多,除了采用链接方式之外,还可以在 HTML5 的基础上所设计的 Web 页面上展示图片,将交互操作功能呈现出来,此时并不局限于图片悬停之后所呈现出来的各种效果,或者对焦点图进行自动轮播,用户对页面进行浏览的时候,采用操作的方式就可以获得有关提示并予以选择,用户登录到页面之后,对于自己所
16、需要的内容能够快速找到,使用户获得更好的使用体验。3.2 响应式 Web 设计网络信息技术不断发展,将终端带动起来实现共同发展。到目前位置,小微型智能移动终端已经普遍,几乎每个人都持有这种设备,这就可以说明,网页浏览不能维持原状,而是要不断更新,以满足用户的全新需求。进行 Web 界面设计的过程中,要力求在不同终端设备上所表现的效果更加完美。对于这种情况,HTML5 结合使用 CSS3,通过调整布局,使得不同终端下 Web 中的各种元素对齐,并采用弹性布局方式,布局规则比较多,一共 8 种,进行 Web 设计的规程中,对于各种类型的终端需求予以满足9。4 HTML5 的未来发展前景从传统 PC 网页来看,我国要普及应用 HTML5 是存在一定难度的,但是 HTML5 很早就已经在移动终端普及。一些网络媒体认为,普及应用 HTML5 是一种必然,对于传统媒体可以起到拯救作用。但是,由于HTML5 在中国发展速度比较快,促使相关专业人才培养力度加大,大量的人才涌现出来,媒体就会相应地加大资金投入,由此实现良性循环。虽然 HTML5 存在优点,也有不足之处,但是媒体更多地看到了优点,批评之声
