HTML5和CSS3.0的优势及其在网页设计中的运用,网页设计论文

摘要：　随着电子技术等计算机信息技术发展速度的迅猛提高，人们越来越依赖互联网，从各大网站中获取有用信息成为众多网民的日常。在不同类型显示设备的应用背景下，超文本标记语言（HTML）与样式层叠表（CSS）迎来了创新发展的新时期，经过不断的探索实践，逐渐成熟的HTML5和CSS3.0使得网页设计可以更好地满足网民提出的网页无缝衔接的新需求。基于此，该文简要阐述了HTML5和CSS3.0在网页设计中的优势特性，并结合实际对两者在网页设计中的应用进行了探讨，以供相关专业人士参考与借鉴。

　　关键词：　HTML5和CSS3.0; 网页设计; 优势特性; 应用分析;

　　在互联网发生翻天覆地的变化的新形势下，网页制作技术日新月异，实现了从静态页面到动态页面的转变，由原来的表格布局发展为现在的DIV+CSS布局，除此之外，还有全屏布局、瀑布流布局以及滚动视差布局等等。为了让网页设计带给用户更好的视觉、听觉感官体验，设计人员需要更强大的技术加以支持，比如HTML5和CSS3.0技术。其中，HTML5是超文本标记语言的第五次重大修改，与以前的版本相比，CSS3.0在图像背景、布局样式、视觉元素等方面具有显着的特点。在网页设计中灵活应用HTML5和CSS3.0，将制作出友好和谐的交互界面，以便更加符合用户的使用习惯。

　　1、 HTML5在网页设计中的优势特性

　　1.1、新的语义标签与属性

　　对网页设计来说，HTML5标准赋予其更加现实的意义与结构，尤其对语义进行了统一规范处理，为Web静态语言创建了新的标签和属性，根本目的是使这些编程语言为网页设计提供强有力的保障，而不是绊脚石。HTML5新增了<header><article><figure>等新的语义化标签，并为一些标签新增了更加实用的属性，比如<a>和<area>下的media属性，<input>、<button>和<textarea>下的autofocus属性，另外<input>还有autocomplete、min、max、multiple等新属性。这些标签不仅使得网页设计更加高效，也提升了搜索引擎抓取网站内容的效率与质量。由于HTML4中的内容标签具有相同等级，在网页设计时难以对页面各部分进行明确的区分。但是，在HTML5标准中，各部分的内容标签彼此独立并且具有不同的等级，便于搜索引擎、统计软件对其进行快速识别。当然，关键一点还是HTML5只需要用<!DOCTYPE html>这一简洁的形式，为程序员使用type来声明文档解析标准减轻了工作负担，并且该标准还有利于缓解新语义识别不出来的尴尬局面。

HTML5和CSS3.0的优势及其在网页设计中的运用

　　1.2 、丰富的应用程序接口

　　在HTML4设置了单一DOM接口的基础上，HTML5标准新增了网络监听接口、全屏接口、拖拽接口、地理接口、应用缓存接口、离线存储接口等等，为一些功能复杂多变的网页设计工作提供了强大、全面的API[1]。比如，HTML5中有window.LocalStorage和window.sessionStorage这两种本地存储属性，其中，LocalStorage特性是对cookie存储空间不足的有效解决。两者的存储对象都是客户端临时信息，但是前者将一直保存在本地，而后者这种会话信息将存储在web服务器上。如果关闭了网站，那么意味着本次会话结束，相应的数据也将消失。

　　1.3、新增多媒体呈现方式

　　HTML5标准中通过视频标签<video>和音频标签<audio>来替代Flash等制作工具，设计者在网页制作时只需要将音频、视频等素材提前准备好，利用“src”属性声明音视频的URL，通过对应标签及其属性、事件、方法即可对这些素材进行修改，该过程中不需要借助特定插件来获得音视频文件。

　　1.4 、新增canvas画布元素

　　HTML5中的canvas元素是一个用于绘制图形的关键标签，可以将其简单理解为矩形区域的画布。值得格外注意的是canvas元素不具备绘图能力，需要在JavaScript脚本语言的帮助下来完成不同形状、图形图像以及动画等绘制工作[2,3]。譬如，document.getElementById（“myCanvas”）表示通过使用id为“myCanvas”来寻找页面中的canvas元素。

　　2、 CSS3.0在网页设计中的优势特性

　　2.1、边框border

　　设计者进行网页制作时，不能仅仅对具体内容进行设计，更需要注重边框属性，这样才不至于因为内容错位或者偏移等问题造成页面混乱。可以说，CSS3.0标准对边框及其属性进行了优化定义，有效避免了采用CSS2.0技术而多次重复操作以便完成边框设计。通过CSS3.0技术，设计者对有关边框控件进行加载，然后根据实际情况设置参数，比如border-color代表边框颜色，通过合理的参数设计还可以实现渐变效果，border-image用来设置边框图像，border-radius可以为元素添加一个圆角边框。总的来说，CSS3.0标准下的border控件在大小、颜色、形状、阴影以及3D效果等方面有所提升。

　　2.2、背景background

　　CSS3.0新增了很多背景属性，譬如支持IE、Firefox、Chrome等浏览器的background-size属性和background-origin属性，其中background-size属性允许设计者通过像素或百分比的形式来自定义背景图片的尺寸大小，以便重复使用该图片。同时，background-image可以满足设计者设置多重背景图片的需求。

　　2.3、尺寸调整与颜色设置

　　就CSS3.0标准中的元素尺寸调整来说，首先需要对resize属性进行设置，该属性的默认值是“none”，“both”表示对元素的高度与宽度进行调整，“horizontal”和“vertical”分别表示元素宽度与高度。在颜色设置方面，CSS3.0技术除了支持使用红绿蓝颜色值（RGB）来定义不同颜色之外，还可以利用HSL颜色值对色调、饱和度以及亮度进行参数设置，从而实现多种颜色模块下不同颜色的精细化设计。

　　2.4、渐变功能

　　在网页制作过程中，利用CSS3.0技术中的line-gradient、radial-gradient与repeating-linear-gradient可以完成线性渐变、径向渐变、重复渐变等设计[4,5]。不同情况下，所需要设置的参数有所差异，比如，线性渐变中方向取值有角度deg与关键字，在颜色参数后面还可以设置长度单位来定义渐变色的开始位置与结束位置，如此一来，便能够设计出绚丽多变的网页。

　　2.5 、动画animation

　　为了避免受到Flash控件的影响，CSS3.0标准中开发出来了一个新的动画制作技术，即animation技术。它不仅继承了flash中的大部分功能，也就是对动画名称、速度曲线、播放次数、周期时间等内容进行规定，还具有一定的3D动画处理能力。在animation技术的支持下，设计者能够制作出精度较高的3D动画，整个画面也十分逼真。

　　3 、HTML5和CSS3.0在网页设计中的应用分析

　　在页面布局中，HTML5结合CSS3.0技术为设计者带来了新的启发，通过对页面进行处理，使得整个布局更加灵活多变。其中<header>标签是对页面中的页眉部分进行设计，<footer>标签与Word文档中的页脚具有相似功能，<main>标签负责页面主要部分的定义设置，例如简介、导航、背景图片、音视频等元素。这种布局比DIV+CSS格式更具规范性、模块性、逻辑性，页面结构清晰，相对应的代码也比较简洁[6,7]。

　　其次，为了让移动互联网浏览器提供一个更加舒适的界面，利用HTML5和CSS3.0可以形成响应式页面局部，让用户在不同终端设备中都能获得更好的服务体验。例如，基于CSS3.0标准而提出的弹性盒模型，这是一种高效率的布局方式，让设计者即可以对容器中的条目分配合理化的空间，又能够实现左右对齐、上下对齐等布局。

　　最后，在采用HTML5和CSS3.0技术的基础上通过JavaS-cript脚本语言还可以实现页面跨浏览器设计。通过<script>标签将支持主流浏览器识别HTML5和CSS3.0中元素，在有关程序代码的帮助下实现页面跨浏览器工作。这样的话，设计者对应用代码进行适当的修改而不需要重新设计构建网站，也不用大规模修改具体内容，但是在实际应用中，设计者有必要认识到并不是所有新特性都具有该功能，避免页面显示不完整等问题出现。由此看来，利用HTML5和CSS3.0技术的优势特性，加上jsp、php、asp等脚本语言的有力支撑，将为网页设计带来意想不到的效果。

　　4、结语

　　综上所述，HTML5和CSS3.0技术在网页设计中占据着不可忽视的重要地位，两者的有机结合拓宽了网页视觉处理的发展空间。在人们对网页界面提出更多需求的背景下，设计者应当站在用户的角度来分析思考，从而制作出布局更加合理、更具交互性、界面更加有好的网页作品。

　　参考文献

　　[1]尉博,李金友.浅谈HTML5的应用与前景[J].现代交际,2017(21):193.
　　[2]颜春艳.浅谈CSS+DIV在网页设计和布局中的作用[J].数码世界,2018(6):68-69.
　　[3]辛红.基于HTML5+CSS3交互式网页布局的研究[J].考试周刊,2017(A3):195.
　　[4]高杨.HTML5和CSS3.0在网页设计中的新特性分析[J].神州,2014(9):240.
　　[5]李微.HTML5+CSS3在网页设计中的特性及优势[J].信息与电脑(理论版),2018(22):13-15.
　　[6]熊慧.HTML5和CSS3.0在网页设计中的新特性分析探讨[J].信息记录材料, 2019(6):112-113.
　　[7]周美玲,陈书理.CSS3和HTML5的优势及其在网页布局中的应用[J].开封大学学报(2):111-112.