HTML5和CSS3.0在网页设计中的新特性和优势.docVIP

HTML5和CSS3.0在网页设计中的新特性和优势-旅游管理 HTML5和CSS3.0在网页设计中的新特性和优势 高春燕 互联网从诞生到繁荣的每个阶段，HTML这个简单而强大的标记语言都发挥着举足轻重的作用。从简单的新闻列表到复杂的在线表格应用，结合JavaScript、CSS，前端工程师用这些简单的标记创建出一个个改变人们生活的应用。 一、引言 现在使用最广泛的HTML4.0.1标准已经十余年没有重要更新，对于构建复杂的网页应用也越来越显得力不从心。HTML5标准最早在2004年就由WHATWG提出，经过多年的演变及各个浏览器阵营的磨合，主流浏览器制造商都已经实现了主要的HTML5核心。特别是近年来移动互联网的兴起，给HTML5的普及带来了更有利的设备环境和难得的商业契机。 二、HTML5的新特性和优势 Html5新特性主要体现在：语义化标记、Form 表单增强功能、视频/音频、画布（Canvas）、可编辑内容、拖放、稳健的数据存储等方面。HTML5 在网页的应用和表现上，相对于HTML4 提供了更好的支持。 （一）新的语义标签和属性 1、简洁的 DOCTYPE，不使用版本提示，书写的文档将会适用所有版本的HTML。简单易记的语言标签，写法上较之前更为简洁。在 HTML5 中，空标签（如：br、img 和 input）并不需要闭合标签。新增了一些新标签和属性。新标签更具语义性，属性更直白。 2、一些过时的HTML标记将被取消，其中包括纯粹显示效果的标记，比如font和center；img的布局属性：align，border，hspace、vspace，在 HTML5 中已经不支持。它们已经被CSS取代。再比如，HTML5 为表单提供了几个新的属性、input 类型和标签。例如：color，email，date，month，week，time，datetime，datetime-local，number，range，search，tel，和 url等。使用这些标签将大大简化开发复杂度，比如使用date标签，将不再需要利用外包js就可以选择日期。 3、Html5自带表单验证功能，可以减少开发者对表单验证功能的代码编写。 4、脚本和链接无需type属性了，代码可以简化如下： link rel=“stylesheet” href=“style.css”/和script src=“path/to/script.js”/script （二）新增画布canvas canvas 是HTML5新增用来作画的工具。canvas元素使用JavaScript在网页上绘制图像.画布是一个矩形区域，在页面中插入 canvas 就像插入其他标记一样平常，可以直接绘制形状、图表、动画、游戏、图片作品等。，现在可以不用Flash或其它插件就可以直接在网页上涂鸦了。 （三）丰富的应用程序接口（API） 除了原先的DOM接口，HTML5增加了更多API，如用于即时2D绘图的Canvas API，定时媒体回放，离线数据库存储Web Storage API，通讯和网络的Communication APIS，文档编辑，拖拽控制，浏览历史管理，使用者可共享定位地理位置的GeolocationAPI，为Web应用提供后台处理的能力的WebWorkers API等。 （四）新多媒体方式 使用HTML5的 audio 和 video标签，将不再需要使用插件或者工具即可直接播放视频和音频。Youtube和Pandora可能有一天会跳过Flash给你带来全新的视频和音频体验，包括定时播放和其它贴心的功能，这一切都得归功于HTML5中的视频和音频标记。 另外，使用preload还可以预加载视频，preload的属性就像它的字面意思那么简单，用户只需要决定是否需要在页面加载的时候去预加载视频。 三、CSS3的新特性和优势 CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。 （一）CSS3边框border 在CSS3出现之前，使用C