HTML5 在 Web 前端开发中的实践研究论文

SCI论文（www.lunwensci.com）

　　摘 要：移动互联网已经在全社会范围普及, 在人们生活中占有重要的地位, 越来越多的人对其产生了依赖性。面对 Web 技术应用需求越来越多,为了很好地适应这种不断发展的环境,建立在 HTML5 技术基础上的移动应用层出不穷。为了明确 HTML5 在应用中所发挥的作用,就要了解其所具备的特点以及技术应用中发挥的优势,使得 Web 程序员开展工作的过程中 对该技术合理应用,对于 HTML5 所具备的各种新特点合理应用,本论文着重于研究 HTML5 在 Web 前端开发中的实践应用。

　　关键词：移动互联网,HTML5.WebApp,应用程序编程接口,实践应用

　　【Abstract】： Mobile Internet has been popularized in the whole society, occupying an important position in people's lives, and more and more people have become dependent on it. Faced with the increasing demand for web technology application, mobile applications based on HTML5 technology emerge in an endless stream in order to adapt well to this ever-evolving environment. In order to clarify the role HTML5 plays in applications, we need to know the features it has and the advantages it has in the application of technology, so that Web programmers can rationally apply it in the process of their work, and rationally apply the new features HTML5 has. This paper focuses on the practical application of HTML5 in the front-end development of the Web.

　　【Key words】： mobile Internet;HTML5;WebApp;application programming interface;practice application


　　0 引言

　　HTML5 是基于 Web 平台发展起来的,其所具备 的一个重要优势就是可以跨平台,不会局限于终端产 品,也不需要拘泥于某个操作系统,对于相同的应用, 开发人员不需要开发多种类型的版本,使得开发工作 量与维护工作量大大减少,开发人员充满工作热情, 用户使用各种移动设备的时候,不仅效率高,而且速 度快 [1]。即便是在不同的平台上, 也可以应用同一应用 体验, 不会产生很大的差异性, 有助于 Web 应用更好 地推广,在使用中获得良好效果。通过应用 HTML5 技术,结合使用跨平台软件应用架构,就可以将 Web 设计出来,与桌面计算机、智能电视、平板电脑以及智 能手机相符合,打开这些智能设备,就可以使用 Web 平台,获得自己需要的信息,在操作的便利性上满足用 户需求。

　　1 HTML5 在应用中所具备的特点

　　(1)HTML5 具有语义结构化标签。HTML5 有结构 化的语义标签,所涵盖的内容比较多,诸如 Navigation、 Section、Hgroup 以及 Article 等, 在文档结构,HTML5 比 HTML4.01 有更高的清晰度,而且数据信息容易读取 [2]。

　　(2)HTML5 对于离线存储能够有效支持。Cookies 自 身所具备的功能还可以通过 Local Storage 和 Session Storage 提供,存在很高的相似度。Web 应用中所存储 的数据信息有很复杂的结构,此时 lIndexedDB 可以提 供帮助。对于资源文件,要采用缓存的方式将其存储在 本地,此时发挥主要作用的是 Ffline App Cache。当 用户处于离线状态的时候,可以将 Web App 充分利用 外来,基于此积极开发移动 Web App,使其可以保持 离线状态 [3]。

　　(3) HTML5 的应用中使多媒体能力增强。多媒体能力增强,就是多媒体能力更加丰富, Web 应用明显提 高,主要体现为视频性能、音频性能、图形性能以及数 学公式、字体等,比如, 2D、3D 绘图渲染能力非常强, 使用 HTML5 画布所具备的特性就可以实现。当处于 网页中,不需要对 Adobe Flash 合理使用,也不用使 用微软 Silver Light 等,包括私有插件以及各种协议都 不需要使用,HTML5 中的各种标签, 比如<Audio>、 <Video> 等都可以使用,对于音频、视频文件正常播放。
　　(4)应用程序编程接口函数的应用。在移动 Web App 中有应用程序编程接口函数,使得终端设备整体能 力增强,相关函数比较多,主要为摄像头、各种类型传 感器以及通讯录的应用程序编程接口等。

　　(5)多线程同时运行。HTML5 在技术上有所升级, 新增加了 Web Workers 组件,其所具备的特性对 Web App 的各项传统功能有效弥补,不再局限于传统的单线 程运行, 实现并行 Web 操作, 执行的时候可以多线程 实现 [4]。

　　2 HTML5 技术应用中所具备的优势

　　HTML5 技术应用中所具备的优势主要体现在 5 个 方面,即开发工具移动化、HTML5 为跨浏览器提供支 持、互动项目开发更加容易、存储方式优化、多媒体效 果更加丰富,具体如下。

　　2.1 开发工具移动化

　　现在人们普遍应用的生活模式就是应用移动互联技 术解决各方面的问题,而且这已经成为时尚。移动互联 设备因其便利性得以全社会范围内推广,尤其是人们普 遍使用智能手机,线上操作可以实施进行,访问网站以 及 Web 点击频次不断增长, HTML5 的应运而生,对 于这种需要予以满足。将 HTML5 合理应用对 Web 新 功能进行开发,不仅简单,而且更容易被用户所接受。

　　将手机版网站制作出来,界面不能过于繁杂,而是 要看起来简洁,操作简单化,将手机方寸屏幕合理利用, HTMH5 有 Meta 标签,各种页面信息都可以提供。Meta 的标签比较多,工作人员进行编程的时候更加容易,将 适合用户使用的移动终端网页编辑出来。

　　2.2 HTML5 为跨浏览器提供支持

　　现在用户普遍应用的浏览器有多种,诸如 IE9 浏览 器、Chrome 浏览器、Firefox 浏览器以及 Safari 浏览 器等,对 HTML5 予以支持,即便 IE6 的版本比较低, 也可以使用并且操作顺畅。最为重要的是, HTML5 将 此前版本的宝贵经验吸收过来,主要的目的是为了实现 兼容,在低版本 IE 浏览器的基础上对网页进行开发, 只要将 JavaScript 代码填入其中,就可以对新元素合理使用 [5]。

　　2.3 互动项目开发更加容易

　　用户在对网页进行浏览的过程中,往往会关注互动 项目,而且目光随着移动, HTML5 对于这一点充分考 虑。HTML5 不仅提供了大量应用程序编程接口,而且 部分设计还是专门服务于开发互动应用,发挥其应用程 序编程接口的作用开发交互式网页,主要包括 Browser History Management(浏览器历史记录管理)、Drag and Drop(拖拽)、Offline Storage Database(脱机 存储数据库)、Timed Media Playback(定时媒体播 放) 以及 Document Editing(文档编辑) 等。对于这 些程序接口合理使用,程序员就可以将交互式网页开发 出来,这也是 HTML5 的独特之处。

　　2.4 存储方式优化

　　HTML5 设计了一个存储方式,非常方便,而且能 够满足用户的需求。该技术的应用过程中,就是将用户 信息以及缓存数据在用户浏览器中存储,将客户端数据 库建立起来,即为本地建立的存储数据库。采用这种 设计方式,所具备的优点在于,数据信息能够快速存 取,而且有很高的安全性,当用户加载上一次应用状态 的时候,对于其优越性能能够体验,而且应用技术的过 程中不需要使用第三方插件,所有主流浏览器都对该技 术予以支持。如果使用早期的版本,主要发挥作用的是 Cookie 技术,当浏览器被关闭之后, Cookie 就会自动 删除。应用 HTML5 进行 Web 程序开发,用户对于此 并不需要担心 [6]。

　　2.5 多媒体效果更加丰富

　　应用 HTML5 设计多媒体网页的时候,有专用的标 签, 一共有 2 个, 即 Video 和 Audio, 前者所发挥的作 用是让用户对视频资源进行访问,后者所发挥的作用是 让用户对音频资源访问。将 HTML5 合理应用对 Web 应用进行开发的过程中,无论是 Video 还是 Audio, 都是将视频和音频看作图片,所以,很多繁杂参数设 置被省略了 [7]。HTML5 的应用过程中能够有效取缔 Flash 和 Silverlight,所应用的插件数量比较少,其运 行质量和效率大大提高。

　　3 页面交互 Web 设计以及响应式 Web 设计

　　3.1 页面交互 Web 设计

　　在 Web 设计的过程中应用 HTML5.需要将大量交 互操作加入其中,要实现这些功能,除了应用 HTML5 之外, jQuery 功能也要发挥支持作用。采用这种页面 交互方式,从形式上来看,以折叠内容的方式为主,所 要实现的最终目标是尽最大能力扩大页面内容容量,可以提高用户浏览专注度,能够快速在页面上找到自己所 感兴趣的内容 [8]。如果一些内容并不是用户所需要的, 当呈现时间比较长,已经超过固定时间,就会自动折 叠,此时用户不需要操作,就不会看到相关内容。如果 用户需要浏览的时候,就可以点击折叠的部分,页面就 会打开。另外,这种交互方式比较多,除了采用链接方 式之外,还可以在 HTML5 的基础上所设计的 Web 页 面上展示图片,将交互操作功能呈现出来,此时并不局 限于图片悬停之后所呈现出来的各种效果,或者对焦点 图进行自动轮播,用户对页面进行浏览的时候,采用操 作的方式就可以获得有关提示并予以选择,用户登录到 页面之后,对于自己所需要的内容能够快速找到,使用 户获得更好的使用体验。


　　3.2 响应式 Web 设计

　　网络信息技术不断发展,将终端带动起来实现共 同发展。到目前位置,小微型智能移动终端已经普遍, 几乎每个人都持有这种设备,这就可以说明,网页浏 览不能维持原状,而是要不断更新,以满足用户的全 新需求。进行 Web 界面设计的过程中,要力求在不 同终端设备上所表现的效果更加完美。对于这种情况, HTML5 结合使用 CSS3.通过调整布局,使得不同终 端下 Web 中的各种元素对齐,并采用弹性布局方式, 布局规则比较多,一共 8 种,进行 Web 设计的规程中, 对于各种类型的终端需求予以满足 [9]。

　　4 HTML5 的未来发展前景

　　从传统 PC 网页来看,我国要普及应用 HTML5 是 存在一定难度的,但是 HTML5 很早就已经在移动终 端普及。一些网络媒体认为,普及应用 HTML5 是一 种必然,对于传统媒体可以起到拯救作用。但是,由于 HTML5 在中国发展速度比较快,促使相关专业人才培 养力度加大,大量的人才涌现出来,媒体就会相应地加 大资金投入,由此实现良性循环。虽然 HTML5 存在优 点,也有不足之处,但是媒体更多地看到了优点,批评 之声很少,开发人员更愿意投入其中,而且对该技术的 未来发展充满期望。但是,对于这些现象要理性思考, 无论是哪一种新技术,其应用都要经历很长一段时间, 除了需要业界对于标准统一化并严格执行之外,还要着 力解决各种现实问题 [10]。最终, 对于产品质量起到决 定性作用的并不是先进技术,而是最终的结果是否能够满足用户需求,能够被用户所喜欢,用户使用技术的感 觉才是标准,只有满足用户的标准,才意味着技术上实 现成功。

         5 结语

　　通过上面的研究可以明确,互联网信息技术快速升 级,人们的生产生活发生了巨大的变化,传统上需要实 地解决或者面对面解决的问题,线上就能够有效解决。 只要用户登录各种 Web 平台,就可以找到自己所需要 的信息,所以,互联网已经成为人们生产生活以及学习 过程中不可或缺的内容。时代不断发展, Web 不仅要 提供信息之外,还要提高附加值,即让用户在使用该工 具的时候获得良好的体验,通过不断开发全新功能,使 得用户需求得以满足。HTML5 增加了各种新功能,使 得 Web 开发过程中获得新的技术支持,而且还与 CSS3 以及JavaScript 结合起来,使得 Web 设计得以改进,能 力上增强,未来将会根据应用领域的需求实现全面发展。


　　参考文献

　　[1] 王雯雯.新时期Web前端开发技术及优化研究[J].数字技术 与应用,2021.39(9):143-145.

　　[2] 江涛,谢世芳.Web前端开发技术HTML5与CSS3的融合及 未来发展趋势[J].电脑编程技巧与维护,2019(4):170-172.

　　[3] 周春吟.HTML5与CSS 3在Web前端开发中的应用研究[J]. 信息与电脑(理论版),2021.33(21):32-34.

　　[4] 季焕淑.基于HTML5技术的移动Web前端设计与开发[J].电 脑编程技巧与维护,2022(10):74-76+169.

　　[5] 邱尚明,李冬睿,李蓉.Web前端开发职业技能等级标准下的 高职HTML5程序设计课程标准制定[J].信息系统工程,2020 (12):165-166.

　　[6] 吴元杰,何毅平,朱晓庆,等.基于HTML5技术的移动Web前 端设计与开发[J].信息记录材料,2021.22(8):139-141.

　　[7] 朱广跃.HTML5技术在移动Web前端设计中的研究[J].电子 技术与软件工程,2022(2):51-54.

　　[8] 杨艳霞.基于HTML5技术的移动Web前端设计与开发[J].电 子技术与软件工程,2020(24):36-37.

　　[9] 陈上.基于HTML5技术的Web前端框架的设计及应用[J].科 技创新与应用,2021.11(33):63-66.

　　[10] 钱立.基于HTML5的Web Audio技术实现手机版简易钢 琴[J].四川职业技术学院学报,2020.30(6):146-149.
 
 
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！

文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/53629.html