付宇舜 梁超 廖熠

摘要：随着互联网技术和移动设备的飞速发展，HTML5技术在网页前端的设计上的应用将会成为连接PC端与移动终端的重要纽带。对HTML5技术在WEB前端设计中的应用的研究，首先分别介绍了WEB网页和HTML5技术的特点，其次介绍了HTML5技术的相关优势，最后总结了HTML5技术在网页前端的具体应用。

关键词：互联网技术;HTML5技术;WEB网頁前端。

引言

进入21实际，互联网产品生产正逐步向快速交付、频繁迭代方向发展，人们对互联网进行使用的同时，在页面上提出了更高的要求，同时，移动终端的迅猛发展，也使得网页设计在移动端的应用成为了不可避免的趋势。而HTML5做为HTML系列的最新产品，起到了一个非常好的承前启后的作用。

1WEB前端与HTML5技术

1.1 WEB前端

WEB前端运用到了多种不同的技术，分别是交互设计，视觉设计和界面设计。交互设计的主要对象是用户，最根本的目的就是为了用户使用便利，最大限度的满足用户的需求，其贯穿了整个WEB前端的设计核心，保留用户的使用习惯，精准及时的为用户提供帮助和提示。交互设计始终以用户为主体，及时把握使用者的心理需求，使产品更亲民。视觉设计依赖于交互设计，针对不同的人群，呈现出不同的视觉感受，尽力满足各个不同群体的使用需求。界面设计是给用户的最直观的感受，也是WEB前端最终呈现在用户眼前的一幕，其主要是为用户提供最终的结果，传输用户所需求的关键信息和内容。

1.2 HTML5的相关技术

HTML最初是用于简单的网页架构，HTML5在此基础上不断发展更新，使得图片和画面等可以嵌入在网页中，其不仅可以对图像重新绘制，还能有效处理和分析图像。其中HTML5 Device API 主要有设备访问摄像头、Gelocation API、 Media Capture API。Media Capture API 对 API 重新定义，其主要是访问本地相关设备，从而把数据流量出现 在媒体之中，借助 Javascript 科学地处理媒体的流数据和数据流。Gelocation API 为 HTML5 可以形成相应的地理位置信息，这也是该技术重要的组成内容。

2 HTML5技术的相关优势

2.1与 HTML1 相比，HTML5 具有以下几个方面的创新：

①使用了 结构化的标签语言，如 hgroud、footer、section、header 等， 使得代码更简单易懂，极大的增强了其思路的顺畅性; ②可以利用 localStorage 技术支撑离线存储技术，使得广大移动端用户即使在没有网的情况下也能浏览相关网页并及时缓存;③借助 HTML5 的 IndexedDE 技术可以实现复杂数据的存储，使用缓存技术将文件资料等信息进行本地化下载，这便使得用户可在离线状态下使用移动应用;④HTML5 可以发挥其独特 的多媒体优势，实现移动应用音频视频、图像功能的展示。 在开发移动应用过程中，借助网页技术构建起组织形式。

2.2 canvas 技术 H1 界面中相比于传统的前端技术，新增了标签，实现对图像的处理，此种标签可以利用 2D Programmatic 标准接口程序，利用较低的存储代价实现图像的处理。此种 技术不仅可以绘制图像，还可以实现对图像的分析和处置。 此标签仅仅可以完成 HTML 页面中元素的定义，若要实现图像处理，可以借助标准的 API 程序接口。

2.3 Device API 技术 Device API 是一种可以访问摄像头、麦克风和地理位置 的标准 API 接口。此种标准定义了一套可以实现对本地设备 产生的多媒体数据的在线传输，如进行视频的录制和保存。 Geolocation 定位 API 是 HTML5 的重要组件，通过调用此种 API 可以帮助用户获取当前位置。目前，市场上的浏览器种 类较多，但并非所有浏览器均支持 Geolocation 定位 API。

当然，H TM L5 技术也并非万能的，在使用时也存在相 应的问题：（1）新技术的发展速度还没有达到很高的水平， 在使用的受众人群中也没有达到普及化要求，其在性能和 功能上还够健全，存在一定缺陷，在使用者群体中还有一 些人表示使用感不太好。（2）HIML5 技术在使用过程中， 还存在一定局限，这也是一个值得长期探讨的问题。

3  HTML5在网页前端的具体应用

3.1 基本流程

构建 Web 前端的基本流程分为需求调研分析、原型设计、前端代码开发。其中原型设计及中分为低保真和高保真设计。用户的需求分析包含分析用户群分析和人物角色分析，用户调研可以采用问卷调查、可用性测试两种方式进行。低保真设计主要进行交互设计，高保真设计主要负责视觉设计、初期前端开发。

3.2 移动 Web 前端开发

首先对代码进行分层，分为结构层、表现层和行为层三层。三层在代码级别分别对应 HTML、CSS 和 JaveScript 三种不同的代码文件。结构层要实现对页头、导航、内容和页脚的定义，然后在其基础上实现 HTML 标签的定义，在标签定义过程中，要注意几点问题。首先要使用带具体语意的标签元素;第二，只把<table>使用在表格式数据;第三，降低无实际意义的标签的使用频率，如<div>和<span>。表现层CSS，要对样式文件进行规划，并且要对样式进行必要注释的添加，方便后期的维护。在开发过程中，需要注意，CSS 样式并非必须在代码中书写，无 CSS 网页也是可以访问的。行为层主要依靠 JavaScript 代码实现，其主要组件为jQuery Mobile。

结语

在新的发展潮流之中，科学技术的发展极大的方便了我们的生活，信息日益多样化，全球化，因此，实现HTML5技术在WEB前端的应用有着非常大的作用，它更好的实现了移动终端和电脑端的互通，向万物互联近一步靠近，顺应5G时代，HTML5的功能和应用将会不断完善和提升。

参考文献

[1]吴元杰，何毅平，朱晓庆，陈庚.基于HTML5技术的移动Web前端设计与开发[J].信息记录材料，2021，22（08）：139-141.

[2]曹华山.基于HTML5技术的移动Web前端设计与开发[J].科技与创新，2021（18）：41-42.

[3]欧华杰.HTML5在Web前端开发中的应用研究[J].电脑编程技巧与维护，2021（06）：26-27+48.

[4]刘辉.HTML5的Web前端开发技术分析[J].无线互联科技，2020，17（19）：163-164.

基金项目：四川轻化工大学大学生创新创业训练计划项目（Cx2019133）;四川轻化工大学教改项目：“课程思政”在工程类专业课中的融入研究——以水力学课程为例（JG2028）;地方高校给排水科学与工程专业 “工学结合”人才培养模式研究与实践（JG1949）。