HTML5&CSS3在网页设计中的优势

作者简介：第一作者：刘薇（1981），女，汉族，籍贯：江西九江，学历：在职研究生，职务职称：讲师，研究方向：计算机技术

>> HTML5与CSS 3在网页中的应用 浅析HTML5 和CSS3 的新交互特性 基于HTML5与CSS3的高校新闻系统的设计与实现 展望HTML5的发展 HTML5的政治斗争 跨平台的HTML5 基于HTML5与CSS3高校互联网移动端网站优化 基于HTML5与CSS3的工业物联网工程中心网站开发 HTML4与HTML5在网站前台设计中的比较研究 浅析html5的特点与优势 基于HTML5技术的Web游戏设计 基于HTML5 的微课WEB 前端设计 基于HTML5的旅游网站设计 基于HTML5的教室信息电子看板设计 基于HTML5技术企业网站设计 HTML5:新闻网站的新选择 Web应用的新技术HTML5 汽车平台中的HTML5硬件通信 基于HTML5的移动Web技术 浅议WEB开发的新标准HTML5 常见问题解答 当前所在位置：L5的新特性

HTML5吸取了XHTML2一些建议，取消了一些过时的HTML4标记，比如、和等。创建了article、section、header、nav、aside和footer等新元素，使创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

2.1新的内容标签

HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

2.2更好的表格体系

比起JavaScript或者是PHP，用HTML5来定义表格，可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。

2.3音频、视频API

HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

2.4画布（Canvas）API

在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小、制作小游戏等等。

2.5地理（Geolocation）API

HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息；同时用户也可以选择是否关闭这个功能。

2.6网页存储（Web storage）API

HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。

2.7拖拽释放（Drag and drop）API

我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。

3.CSS3新特性

为了满足现有的Web UI的开发需求，CSS3提供了一系列强大的功能，如许多新的CSS属性（文字，布局，颜色等等），各种CSS特效，甚至还支持CSS动画、元素的变换。这些CSS新特性在现阶段可以说都是非常强大和完善的，您只需要加入几行简单的CSS代码便可以实现出一系列令人眼前一亮的效果，这比我们之前用JavaScript去模拟这样的效果要好得多，不仅降低了复杂度，变得易维护，在性能上也突飞猛进了。

3.1RGBa

CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置，而原来常用的opacity命令只能对元素及其子元素进行设置。

3.2Multi-column layout

CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。

3.3Round corners

圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。

3.4@font-face

当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。

3.5Gradient

CSS3的渐变效果包括线性渐变和径向渐变。linear表示线性渐变，即从左到右，从上到下，任何颜色间的渐变转换。Radial表示径向渐变（radial），这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。

3.6多重背景

通常情况，我们的背景都是覆盖整个元素的，而CSS3可以设置是否一定要这样做。通过“Background Clip”、“Background Origin”、“Background Size”、“Background Break”几个关于背景（background）的属性设置，可以设定背景颜色或图片的覆盖范围。

3.7其他特性

此外，CSS3还给我们带来了盒子模型、列表模块、超链接方式、语言模块、文字特效、多列布局以及用图片来作为元素边框等功能。

4.结束语

HTML5可以说是近十年来Web标准最巨大的飞跃，HTML5中创建了新元素，利用这些组织元素能快速开辟出更少类和id标识。一旦熟悉了这些元素的目标，就可以在几分钟内建立粗略的网页组织，它的使命是将Web带入一个成熟的应用平台。在Web开发中采用CSS3技术将会显著的美化我们的应用程序，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。通过使用元素本身来取代大部分图片，网页的加载速度会得到提升，同时也能极大的提高程序的性能。（作者单位：湖北工业大学）

参考文献

[1]陶国荣.HTML5实战[M].北京：机械工业出版社，2012-1-1.

[2]陆凌牛.HTML5开发精要与实例详解[M].北京：机械工业出版社，2012-1-1

[3]成林.CSS3实战[M].北京：机械工业出版社，2011-5-1

[4]陆凌牛.HTML5与CSS3权威指南[M].北京：机械工业出版社，2011-4-1

[5]张亚飞.HTML5+CSS3网页布局和样式精粹[M].北京：清华大学出版社，2011-9-1