HTML5CSS3在网页设计中的优势.docVIP

HTML5CSS3在网页设计中的优势 　　作者简介：第一作者：刘薇（1981），女，汉族，籍贯：江西九江，学历：在职研究生，职务职称：讲师，研究方向：计算机技术，单位：湖北工业大学 　　第二作者：龚海华（1979），男，汉族，籍贯：江苏南通，学历：大学本科，职务职称：工程师，研究方向：计算机应用，单位：九江精密测试技术研究所 　　摘要：HTML和CSS是当前Web设计的核心内容，而HTML5和CSS3技术更是给Web开发带来了革命性的影响，以前很多需要JavaScript实现的复杂效果，现在使用很简单的CSS3属性就能实现。HTML5和CSS3的新特性将会更显著的美化应用程序，给用户的项目带来前所未有的体验效果。 　　关键词：HTML；CSS；Web；JavaScript；美化；应用程序； 　　引言 　　目前，Web设计师们正在使用HTML和CSS完成着那些充满滚动和闪烁的网页，他们面对的是可怕的浏览器战争、专有的协议。事实上，我们可以重组代码的结构并让页面代码更富有语义化特性，我们可以缩减带给页面美丽外观样式代码量并让它们有更高的可扩展性，我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站，我们可以在不使用内联和 标签的基础上对网站添加漂亮而细腻的风格样式。让我们一起来感受HTML5和CSS3的力量吧！ 　　1.什么是HTML5和CSS3 　　HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。为什么我们要单独使用CSS控制Web页面的显示效果么？我举个简单的例子： 　　我们发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息。页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。HTML5和CSS3是HTML和CSS的最新版本，它们的新特征已经让我们心动不已。 　　2.HTML5的新特性 　　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去模拟这样的效果要好得多，不仅降低了复杂度，变得易维护，