欢迎来到设计师实训基地-南通科迅教育
咨询电话:0513-81107102
HTML5&CSS3在网页设计中的优势
2017/9/15
科迅教育
382
想在南通学平面设计,有没有人推荐一下培训机构啊

目前,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去模拟这样的效果要好得多,不仅降低了复杂度,变得易维护,在性能上也突飞猛进了。 
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技术将会显著的美化我们的应用程序,可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改,就可以改变网页的外观和格式。
77
关闭
先学习,后交费申请表
每期5位名额
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?
关于我们
机构简介
官方资讯
地理位置
联系我们
我要学习
先学后付
申请试听
在线咨询
网站XML地图
0513-81107102
周一至周六     8:30-21:00
微信扫我送教程
手机端访问
南通科迅教育信息咨询有限公司     苏ICP备15009282号     联系地址:江苏省南通市人民中路23-6号新亚大厦二楼、三楼         法律顾问:江苏瑞慈律师事务所     Copyright 2008-