基于HTML5和CSS3的网页前端设计研究

摘要：為实现对网页前端设计的优化，提高网页前端规范化权值，开展基于HTML5和CSS3的网页前端设计研究。根据设计前端的需求与效果呈现预期，进行版本的迭代，利用此版本特定的语言，对前端中语义进行常规化处理，以此实现基于HTML5技术的网页前端标签设计;调整界面中色彩数据，通过对网页布局的动态化展示，在界面中直接进行图片的移动、缩小、放大、变形、选装、扭曲等处理，实现基于CSS3网页内容元素适配化处理;从页面规格、导航、图片方面，进行布局的优化设计，完成响应式网页前端布局优化。通过对比实验证明，此次设计成果设计出的网页前端规范化权值更高，在用户提取信息的过程中，准确性更高，网页整体运行效率更快。

关键词：HTML5;CSS3;网页标签;前端设计;网页布局

中图分类号：G354.46   文献标识码：A

文章编号：1009-3044（2022）07-0061-02

随着现代化科学技术在社会不同领域中的广泛应用，行业的规范化建设与发展都在此过程中受到了潜移默化的影响，为了做到对线上交互平台前端的高度开发，满足更多受众群体线上检索的功能需求。本次设计研究引进了HTML5技术与CSS3技术。其中HTML5技术是早期HTML的衍生技术，可以将其作为开放性Web平台建设的基石，开发网页前端时，应用HTML5可以实现在多个移动设备上支持多媒体[1]。例如，早期的Video标签、Canvas标签在网络中是不被支持的，但在引进新技术后，此类标签在网页前端可处于良好集成与对接状态。总结HTML5技术在应用中的优势，具体包括：提升了网页在运行中的移植性、增强了前端用户检索网页的交互性能、对SEO的对待态度较为友好、可以灵活地定义标签内容、能够提供终端用户更加丰富的音频与视频检索界面。其中CSS3技术是CSS技术的全新升级版本，此项技术又被称为层叠样式技术，此项技术在演进过程中，可以W3C划分成多个系列功能模块。相比其他技术，此项技术在进行网页前端布局设计时，可以实现将页面设计成多元化布局，包括网页前端的圆角效果、界面边缘图形模糊化、文字印象效果、透明效果、渐变效果等[2]。利用此项技术中的Font-Face技术，可以实现对网页前端字体的定制与多种操作处理包括移动、旋转、平移、放大、缩小等，从而实现功能栏布局的多元化。

1 基于HTML5技术的网页前端标签设计

HTML5技术是一项强大的页面开发技术，在当前网页设计中得到了广泛的应用。该技术可以实现语义标记功能，能够在移动客户端上实现页面开发，不仅可以提升用户浏览页面时的体验感，加快页面的响应速度，还可以节省网页浏览消耗的流量。

为了实现对网页前端的优化设计与开发，在本章的研究中，引进HTML5技术，对网页前端标签进行设计。例如，根据设计前端的需求与效果呈现预期，进行版本的迭代，利用此版本特定的语言，对前端中语义进行常规化处理。并在此基础上，建立Form表单，在表单中定义Video与Audio两个标签，确保前端在无固定插件支持的条件下，可实现对网页前端流媒体内容的有序播放。同时，根据HTML5技术具有的Preload属性，进行前端现有资源的预加载[3]。在此过程中，用户只需要在移动终端设备上操作鼠标，或滑动窗口界面，进行选项卡或功能卡的设定，即可直接实现操作功能。

在上述提出内容的基础上，可使用HTML5已优化的DOM接口，设定多个属性标签，可以将对应的标签信息用于表示网页前端通信、网页中不同单元模块图形展示、终端用户IP地址描述、网页前端资源在线或离线存储、信息的后台处理、文档信息的便捷化应用、数据记录与管理等，通过此种方式，实现对设定标签与前端通信接口的对应，确保开发的网页前端可以满足更多用户群体在操作中的需求[4]。此外，HTML5技术自带一个表单验证功能，可以实现对网页前端标签设计工作中，Type属性的优化，因此，可直接选择Date标签，进行标签主动创建工具的开发，实现对多种前端标签的设计。

在利用HTML5技术进行网页前端设计时，需要经过低保真设计和高保真设计，在此基础上才可以进行交互式设计和视觉设计及初期前端开发。低保真设计是指在初始设计理念下，依据绘制的草图，利用软件进行二次加工，输出需求设计稿，此时得到的初稿不够精致美观，但准确地表达出界面交互和功能等。低保真模型构建的步骤如下：1）交互性需求确定;2）初始界面框架构建;3）界面元素布局;4）界面元素分级及分组;5）制作界面初始图纸;6）输出低保真模型;7）召开组会并测试可行性。高保真设计是在低保真模型的基础上，利用HTML5技术和PS等工具制作出界面的视觉效果并实现交互式功能。在构建高保真模型时，主要通过以下步骤：1）插入HTML5，在页面效果图上利用Map和Area设计触碰连接;2）打开PS，利用切片工具裁剪页面效果图，制作出静态的页面;3）编制前端开发代码，输出界面效果模型;4）利用HTML5，结合CSS、JS等构建高保真模型。由此，根据网页前端需求设计产品外形视觉效果，结合前端开发实现网页中视觉元素的动态交互性。

2 基于CSS3网页内容元素适配化处理

在完成网页前端标签的设计后，利用CSS3技术，进行网页中内容元素的适配性处理。在此过程中，应明确CSS3作为一种市场内最新款元素版本处理工具，可以利用其模块化特性，进行元素适配的圈点[5]。当前，CSS3技术新增了选择器，包括兄弟选择器、属性选择器、伪类选择器和伪元素选择器等。以属性选择器为例，E[attribute^=value]用于选择含有某特定值为开头的属性元素，E[attribute$=value]用于选择含有某特定值为结尾的属性元素，E[attribute*=value]用于选择含有某特定值的属性元素，且不限特定值的具体位置。利用CSS3技术可以设置背景、字体文本、盒模型、变形动画等属性。例如，利用CSS3技术的网页内容设计功能，进行网页中动画的设计、网页界面边框生成条件的设置、色彩空间与背景颜色匹配的调整等。并且，利用CSS3还能够实现图形的3D变形功能，满足产品在3D空间显示等需求，使页面展示效果更为丰富。总之，CSS3是一个应用在网页前端动画设计领域内的Animation属性工具。在完成对界面中色彩数据的调整后，可通过预生成等方式，进行设计成果的查看，并通过对网页布局的动态化展示，在界面中直接进行图片的移动、缩小、放大、转移、变形、旋转、扭曲等处理。

在进行网页前端边框设计时，CSS3进行了边框属性的细化，可以直接根据设计需求，进行前端边框阴影、半径、色彩等细节性属性的调整，确保设计后的边框可在界面中呈现一种更加立体化的效果。

在进行网页前端空间色彩设计时，可利用CSS3中的RGBA指令，进行网页元素属性的设定，控制整体色彩的灰度、透明度、色彩饱和度等，以此种方式，避免子元素属性在网页设计过程中受到影响。在应用CSS3技术时需要注意避免在HTML标签中写Style，需要从CSS树渲染中跳出。通过上述操作，实现对网页内容中不同元素的合理化调配，以此种方式，实现对网页前端在设计中元素的适配化处理。

3 响应式网页前端布局优化

完成上述设计后，将响应式网页前端作为设计目标。考虑到现代化网络环境下，移动终端的类型越来越多，为了确保前端与不同移动应用终端呈现适配效果，需要前端及时对应用的变化给予响应。因此，本文将从网页前端布局设计层面入手，对其进行优化设计。在此过程中，移动前端的屏幕规格是多元化的，不同于PC对于前端的应用需求是不同的，为此设计人员需要从响应需求层面入手，从页面规格、导航、图片三个方面，进行布局的优化设计。以页面规格的响应适应性为例，在对其进行布局优化设计时，可以在前端标签中增加一个“<[mate name]=["viewport"content]=["width=device-width"]>”指令，即确保页面在前端的适应性。

在进行网页前端图片主动响应设计时，可在网页前端插入或引进图片前，引进<img>标签，使图片在传输或导入过程中主动切换成不同分辨率的版本，以此种方式，实现页面前端在设计中的适配性。综上所述，实现对响应式网页前端布局的优化设计，完成基于HTML5和CSS3网页前端开发。

在网页前端设计中，将使用者作为目标群体，保持以人为服务中心的设计理念，考虑适用人群的使用心理和行为特征，从使用需求和感受出发，设计出以人为本、贴合人们实际需要的网页前端产品。

4 对比实验

通过本文上述论述，在实现对网页前端的理论设计后，为了进一步验证上述设计思路的应用可行性，以及按照设计思路具体完成开发的网页前端是否能够达到预期的应用效果，选择以某企业官方网站作为依托，针对该网站当中包含的各项功能，对其网页前端进行设计。为了方便对比，选择将本文提出的基于HTML5和CSS3的网页前端作为实验组，将传统基于模块化的网页前端作为对照組，针对两种网页前端的信息提取效果作为评价指标。为了确保两种设计方法设计的网页前端在运行过程中具备相同的运行条件，选择将一台8核32GB内存，1TB硬盘的计算机作为网页运行的计算机，并将两种网页前端显示在CentOS 7.4×86计算机显示器上。为了实现对信息提取效果的量化对比，选择将网页前端信息提取的规范化权值出现概率作为评价量化指标。网页前端信息提取的规范化权值出现概率是指在网页前端，用户对需要获取的信息提取时，提取结果满足预期规范化权值的概率，若概率越大，则说明在该网页前端提取信息的准确性更高，也进一步说明了网页前端的运行效率更快;反之，若概率越小，则说明在该网页前端提取信息的准确性更低，也进一步说明了网页前端的运行效率更慢。根据上述论述，对实验组和对照组的前端信息提取的规范化权值出现概率进行计算，其中规范化权值的计算公式为：

公式（1）中，[Pa]表示为网页前端信息提取的规范化权值;[ea]表示为属性值;[a]表示为在网页前端中的某一节点。根据上述公式，计算得出两种网页前端的信息提取规范化权值，再进一步根据下述公式（2），对两种网页前端信息提取规范化权值出现概率的计算：

公式（2）中，[Wa]表示为网页前端信息提取规范化权值出现概率;[ka]表示为网页前端上某一节点a的长度。上述公式（1）和公式（2）中，[Pa]的取值范围在0～1之间，[Wa]的取值范围也同样在0～1之间。两个计算结果的数值越接近1，则说明应用效果越理想;反之，两个计算结果的数值越接近0，则说明应用效果越差。根据上述公式（1）和公式（2）计算得出实验组与对照组对应的[Wa]值，并将五个不同用户的实际操作结果记录如表1所示。

从表1中记录的实验数据可以看出实验组的[Pa]值均超过0.800，明显大于对照组的[Pa]值，并且[Wa]值均超过0.90，明显大于对照组的[Wa]值。同时，通过对用户B和用户D在对照组完成网页前端信息提取得到结果进行分析得出，其对应的[Wa]值仅为0.26，[Pa]值仅为0.214，严重不符合网页运行对前端提出的设计要求，而实验组并没有出现这一问题。因此，通过上述得出的实验数据能够证明，本文提出的基于HTML5和CSS3的设计方法设计出的网页前端规范化权值更高，这一取值出现的概率也更高，在用户提取信息的过程中，准确性更高，网页整体运行效率更快。在实验过程中发现，得出上述实验结果的主要原因是本文设计的基于HTML5和CSS3的方法在网页前端当中增加了对异常信息提取的过滤机制，充分利用了最大代替最小的过滤原则，提高了网页前端信息在提取过程中的效率。

5 结束语

本文从基于HTML5技术的网页前端标签设计、基于CSS3网页内容元素适配化处理、响应式网页前端布局优化三个方面，对基于HTML5和CSS3网页前端设计方法展开研究。完成设计后，将基于模块化的网页前端作为传统方法，将其与本文方法进行比对，通过对比实验结果的分析可知，本文提出的基于HTML5和CSS3的设计方法设计出的网页前端规范化权值更高，这一取值出现的概率也更高，在用户提取信息的过程中，准确性更高，网页整体运行效率更快。在未来，HTML5+CSS3将成为一项组合技术，广泛应用到市场，为网页前端的规范化、优化设计提供更加坚实的技术作为支撑。

参考文献：

[1] 于平.基于模块化的网页前端开发技术优化策略研究[J].电子元器件与信息技术，2020，4（12）：128-129.

[2] 吴嵘.基于Web前端开发的化工企业网站设计——评《HTML5移动Web开发》[J].材料保护，2021，54（2）：172.

[3] 冯秀玲，张杨娟.基于HTML5+Css3+Java Script的山西旅游平台搭建[J].中国管理信息化，2021，24（19）：155-157.

[4] 姜博，李昆，邹志超，等.基于HTML5+CSS3+jQuery Mobile的台站智能管理系统开发与实现[J].防灾减灾学报，2019，35（1）：62-65.

[5] 艾梦.HTML5+CSS3在网页前端打造工作中的优势分析[J].信息系统工程，2019（6）：120.

【通联编辑：朱宝贵】

收稿日期：2021-11-25

作者简介：徐亚（1979—），女，云南宣威人，讲师，学士，主要研究方向为数字媒体等。