HTML5和CSS3.0在网页设计中的新特性和优势探讨
张州+李存永
摘要：HTML标记语言具备简易、强大等特征，在互联网的各个阶段均发挥着不容忽视的重要作用。HTML标记语言的最初状态仅是非常简单的新闻列表，发展至今已经成为了复杂程度较高的在线表格应用，同时与CSS、Java等程序相结合，可通过简易的标记语言设计并创造出各类实用的应用。
关键词：HTML5；CSS3.0；网页设计；新特性；优势
现阶段使用最为广泛的是HTML4.0.1标准，但是其将近十年没有做出过任何根本性的更新，再加上如今的网页设计应用构建越来越复杂，HTML4.0.1显然难以为继。早在2004年，网页超文本应用技术工作小组（WHATW）便提出了HTML5标准，经过多个浏览器阵营的反复磨合优化，目前各大浏览器制造商基本上实现了HTML5核心的目的，商业前景看好。
1 HTML5的新特性与优势分析
HTML5的新特性与优势集中体现在视频、音频、语义化标记、可编辑内容、画布、数据存储稳健、Form表单增强功能等方面。其在网页设计当中的应用与表现，较之上一代的HTML4，支持功能更为强大而全面，具体如下：
1.1新型的多媒体方式
HTML5标准自带有“video”以及“audio”两种重要的标签，通过上述的两种标签，HTML5在网页设计的应用过程当中，不再需要采用特定的工具以及插件便可顺利地实现视频、音频的直接播放。诸如Pandora、Youtube等全球性的著名网站视频将会直接跨越Flash软件，进而为用户带来截然不同的视频以及音频体验，包括定时播放、定时关闭等具有高度人性化特性的应用功能，这均直接归功于HTML5标准当中的视频与音频的标记。除此之外，通过preload还可实现视频或是音频的预加载，用户需要做的仅仅是决定是否在页面加载之时实行视频或是音频的预加载，操作非常简便。
1.2应用程序接口丰富
HTML4.0.1标准带有DOM接口，HTML5在其基础上添加了更多的应用程序接口，这是其为构建越来越复杂的网页设计提供强大而全面的支持功能的关键条件之一。HTML5的应用程序接口主要包括如下几类：（1）网络通讯应用程序接口。（2）2D图形绘制应用程序接口。（3）用户定位地理位置共享应用程序接口。（4）离线数据库存储应用程序接口。（5）基于Web应用后台处理的应用程序接口。（6）文档控制编辑应用程序接口。（7）浏览历史纪录管理应用程序接口等。
1.3新增画布
HTML5带有用以作画的特定工具，即是“canvas”，这是上一代HTML4所不具备的优势。canvas工具在网页设计当中的图像绘制操作均需要通过JavaScript加以实现。整体而言，新增画布可视为特定的矩形区域，将canvas元素插入到网页页面当中的难度比较小，基本上等同于插入普通的属性标记，随后可直接实现游戏、图表、形状、动画等内容的绘制，不必再通过Flash软件或者是其余的插件工具便可实现网页涂鸦，这是HTML5较之上一代HTML4的突出优势之一。
1.4崭新的语义属性与标签
（1）HTML5不再需要类型（type）属性来实现链接以及脚本的撰写，对其代码进行深度的简化。
（2）HTML5带有表单验证功能，这也是上一代HTML4所不具备的优势，核心作用在于降低网页设计人员与开发人员编写表单验证功能代码的工作量，同时提高工作效率。
（3）HTML5的文档类型（doctype）非常简洁明了，不再需要任何的版本提示，所撰写的全部文档，不论类型如何，均可适用于一切版本的HTML。HTML5的语言标签简洁明了，容易记住，并且在写法方面也比上一代的HTML4更加简便，基于HTML5的全部空标签，诸如input、img、br等均不再需要使用闭合标签，新标签不仅语义更加丰富，属性也更加直白，有利于网页设计doctype的编撰。
（4）HTML5将已经过时了的HTML标记全部取消，例如“center”“font”“align”“vspace”等，其在HTML5当中已经不再适用了，取而代之的将是CSS。HTML5同时将崭新的属性标签提供给表单，例如“month”“email”“color”“datetime”“date”等，基于上述标签，对网页设计的开发复杂度实现最大程度的简化处理，例如：采用date标签，日期的选择将不再需要采用外包的_js。
2 GSS3.0的新特性与优势分析
在网页设计的过程当中采用层叠样式表（CSS）可更加精确而有效地控制页面的背景、字体、布局、颜色等内容。作为CSS技术的最新升级版本，CSS3.0的语言开发带有模块化的特征。以往的HTML4不具备模块化的优势，也不便于添加崭新的小模块，CSS3.0允许添加的新模块比较多，主要包括文字特效模块、语言模块、列表模块、背景边框模块等。
2.1 CSS3.O渐变（Gradient）
基于CSS3.0的Gradient可为网页设计提供更加丰富的渐变效果，作为投影使用亦可。一般而言，我们可将基于CSS3.0的Gradient细分为两种渐变形式，一种是径向渐变（radial gradient），另一种是线性渐变（lineargradient）。例如：网页设计当中的方盒投影设计，可在方盒的下方位置添加线性渐变的特殊效果，最终可收到绚丽、多变的网页设计效果。
2.2 CSS3.O动画（Animation）
作为CSS3.0的最新属性，Animation的功能更为强大，在实现动画方面的效果更为理想。上一代CSS2.0，网页设计的动画必须要通过Javascript2E以实现，但是如今的CSS3.0不仅可以实现图形的转换、变形、扭曲、移动、旋转、缩放等，还可以实现更逼真而美观的动画效果，进而提高网页设计的水平。
2.3 CSS3.0边框（border）
以往所采用的CSS2.0，例如在制作圆角边框之时，基本上都是先行将四个圆角的图片制作，随后再采用图像背景技术进行二次处理与设置，不仅耗时耗力，并且美观效果不理想。采用CSS3.0技术，边框的制作变得更加简单易行，美观大方。CSS3.0技术新添加了大量边框的属性值，主要包括三大类，分别是.box→refl、dorderer→image、border→shadow，基于上述的崭新边框属性值，可更好地实现各类边框的颜色、阴影、半径、图形等的设计，赋予整个网页的边框或是按钮更突出的立体感与线条感。
4 RGBA
RGBA指的是Red（红色）、Green（绿色）、Blue（蓝色）、Alpha色彩空间，CSS3.0具备RGBA命令特性，可对网页设计当中的元素属性加以指定，支持用户自行更改重设各个元素的色彩与透明度，而不会对子元素的属性造成任何的影响，很大程度上改善了以往的opacity指令的弊端，在网页设计元素的透明度以及色彩方面的设计更改方面更加简便易行。
3结语
总而言之，HTML5可称得上是Web标准近十年来最为明显的进步与创新，其主要特性与核心优势在于创建了大量的新属性与新元素，通过这些新属性与新元素，在网页设计的过程当中，可节约ID标识的开辟时间，在很短的时间之内便可创建出基本的网页结构，Web从此进入到一个更为成熟而完善的开发应用平台。此外，采用CSS3.0技术可对网页进行更大范围与更深层次的美化与调整，通过细微的修改，便可对整个网页的布局与外观实现改变，不需要用到过多的插件，绝大多数的图片均被元素本身取而代之，可切实加快网页的加载速度，进而提高网站的搜索引擎优化（SEO）权重，确保网页应用程序的实际性能。
