html5中的css特性,浅谈HTML5 CSS3的新交互特性

本文标题的这副图片,是用phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么,有没有一种新的方法可以避免这些缺点呢?

有的,html5和css3就可以满足你的需求。甚至,它可以做的更多,更好。作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进一步思考通过html5和css3我们能做些什么。

什么是html5和css3

html和css并不难理解。html为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。而css则是专门用来控制网页显示效果的语言。这时候问题出来了,为什么我们要单独使用css呢,html不是一样可以控制web页面的显示效果么?为了回答这个问题,我举个简单的例子:

db931bc456f4ea756a79fc6d651d79c0.png

有没有发现如果一旦形容的事情过多,想要把事情描述清楚的时候,我们不得不重复大量的信息?页面语言也是一样,在这种情况下显得杂乱无章,非常难以理出头绪。通过将控制显示效果的语言集成到css里,我们不但可以保证页面语言主体部分的简洁,而且可以非常方便的复用各种语言集合。

html5和css3是html和css的最新版本,它们目前均未确定标准,但是已经公布的新特征已经让我们心动不已。

html5的新特新

1. 新的内容标签

1d5ca0294d8e8d92f6c66494d9e75eb2.png

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

2. 更好的表格体系

ec8cccd16e9be56e1efda793d79a1d32.png

现在,你可以抛弃javascript或者是php,只通过html5来定义表格。你可以定义每个表格单元的输入格式,也可以定义这个单元是否是必填的等等。

3. 音频、视频api

24765a02b315d571db5ae6ff04b5bb0f.png

5ea298f71ddd6ad8a53eb7acf2fe917b.png

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

4.画布(canvas) api

6cfda2ddcd27be62c2351b031eec58d1.png

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

5. 地理(geolocation) api

7e754b5af9bc19b2dffda715b4f283ce.png

html5提供了地理信息的应用接口 geolocation api。通过这个api,网页可以通过ip,gps等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。

6. 网页存储(web storage) api

8a021cd39c552f3913475193cda8420c.png

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

7.拖拽释放(drag and drop) api

bc257cce4aab3aa06593b4a1a384c3db.png

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

css3新特性

1. rgba

19f8640ec64416b4bb7e4d883e7eedb1.png

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

2. multi-column layout

6d20a9292e6ee105d9ca340008b933e4.png

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

3.round corners

ad1d6b4e6fde2e1bb3ae7f44801ea915.png

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

4. @font-face

1daa576b0599be29d5db4294d0033a77.png

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

5. 其他特性

此外,css3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。

利用好css3,你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片,网页的加载速度会得到提升,这些原本是图片的内容,也可以被搜索引擎检索到。

html5和css3的兼容性

html5和css3的标准并未正式完成,各家浏览器对其支持程度也不尽相同。了解 html5和css3的兼容性是十分必要的。下面的连接是一个专门跟踪html5和css3兼容性的网站,有兴趣的朋友可以点击查看:

http://fmbip.com/litmus

以上这篇浅谈html5 & css3的新交互特性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机专业知识多选题证监会,2019年国家公务员考试中国证监会(计算机类)专业科目考试大纲...

2019年国家公务员考试中国证监会(计算机类)专业科目考试大纲由国家公务员考试网公告解读栏目由提供,更多关于2019国家公务员考试大纲,计算机类国考考试大纲,证监会国考考试大,国家公务员考试公告解读的内容,请关注国家公务员考试网/广东公务员考试网&…

计算机和网络老是断开,电脑插上网线还是显示断开连接怎么办

在网络故障处理中遇到过千奇百怪的问题,这里就说一个比较怪异的问题。一个网线插口,有的电脑插上网线可以正常上网,而有的电脑插上就显示断开连接。试了好多办法,换了网线,换了插口,换了路由器,…

计算机网络的资源共享功能包,计算机网络的资源共享功能包括

资源共享是现代计算机网络的最主要的作用,它包括软件共享、硬件共享及数据共享。在网络中,多台计算机或同一计算机中的多个用户,同时使用硬件和软件资源。通常多用户同时需要的资源总是超过系统实际物理资源的数量,但采用逻辑(或虚…

计算机学院嘉年华标题,“芯动盛夏 AI创南航” 计算机学院举办第八届计算机嘉年华...

当前,我们正迎来一个科技主导的全智能时代,为激发大家学习探索人工智能的兴趣,切身感受AI科技的魅力所在,计算机科学与技术学院/人工智能学院于6月20日在体育馆广场举办了“芯动盛夏 AI创南航”第八届计算机嘉年华活动。活动中&am…

爱尔兰都柏林圣三一大学计算机排名,2021年爱尔兰都柏林圣三一大学世界及专业排名 不愧是最古老的学府!...

它是参照牛津和剑桥大学模式兴建的欧索世界顶级研究型大学,其商学院也是欧洲培养企业家最多的商学院之一,这所名校就是爱尔兰都柏林圣三一大学,该校的科研实力雄厚,因此,每年都会吸引一大批的学子前往该校留学&#xf…

计算机系统的四种启动方式是,电脑启动方式有几种你知道吗?

关于电脑启动方式有几种,可能你会说,电脑启动不就是按电源按钮启动吗?实际上,电脑有三种启动方式,而且三种启动方式会对应不一样情况,虽然有些概念对现在的电脑略微有一点点落后,但是对于玩电脑…

安装杀毒软件是保障计算机安全,安装杀毒软件是保障计算机安全的唯一措施

摘要:脉搏8次/分,安装安全合的最适此时方式手术是,血压病人术时。软件综合征在最常见的青春前期表现临床是。障计糖病粘多目前据是确诊的依。...脉搏8次/分,安装安全合的最适此时方式手术是,血压病人术时。杀毒保算机施…

畅想未来计算机的绘画作品小学生,畅想未来儿童画绘画作品大全

畅想未来儿童画绘画作品大全导语:未来的科技在不断发展,未来的世界每天充满了新奇。下面是小编为您整理的儿童画,希望对您有所帮助。未来的世界是个先进的地方。我们的交通工具不再是飞机、轮船和汽车,而是宇宙飞船。家里的设备是…

计算机考在职研究生有必要吗,读在职研究生有必要辞掉工作吗?

很多在职场打拼多年的人员,为了以后能有更好的发展,决定读读在职研究生有必要辞掉工作吗?读在职研究生有必要辞掉工作吗?对此,相关老师指出,读在职研究生没必要辞掉工作,在职人员可以边工作边学习,利用休…

计算机word图标不显示,word图标不显示怎么办 设置图标显示的具体方法

word是我们常用的办公软件,有时在使用时,图标会莫名其妙不显示,那么word图标不显示怎么办?下面小编带来设置显示word图标的方法,希望对大家有所帮助。设置显示word图标的方法:按键盘上的Windows徽标健R键&a…

检查各计算机所属工作组ip,如何在Win8.1/RT 8.1中添加语言或键盘

通过添加语言,你可以更改用于在 Windows、应用和 Web 中读取和写入的语言。添加语言若要更改你的 Windows 显示语言或者添加键盘以进行键入,首先要将一种语言添加到语言列表中。从屏幕右边缘向中间轻扫,点击“设置”,然后点击“更…

计算机机器人方向,计算机考研想学习智能机器人方向都有那几个学校呢..._考研_帮考网...

caowengqin新兵答主12-11TA获得超过868个赞智能科学与技术专业考研方向1:计算机技术计算机技术是(专业硕士)工程下的二级学科专业。计算机技术领域重点研究得是如何扩展计算机系统的功能和发挥计算机系统在各学科、各类工程、人类生活和工作中的作用。计算机技术是信…

css3 flex 省略号,flex 布局下 CSS 文本超出单行宽度后显示省略号

布局两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间。image.png{{book.name}}{{book.author}}给 book-info 设置width: 0如果不设置宽度, .book-info 可以被子节点无限撑开;因此 .name 总有足够的宽…

karaf内嵌文件服务器,关于OSGI(Karaf) Classloader的几点说明

1. Java ClassLoaderJava通过Classloader加载Class,Classloader之间相互隔离。隔离真正的意思是:不同的Classloader可以加载相同的class定义,并且被jvm认定为不同的class。很多人对隔离有误解,认为不同的Classloader之间不能相互访…

eclipse debug(程序调试)单步执行 简述

eclipse debug(程序调试)单步执行 简述 1.在需要程序停止的地方 双击打一个断点 2.右键以debug模式执行(有个虫子标志的选项) 3.单步执行 观察变量的变化 如图所示: debug常见问题: 1.Variables(变量区…

微信小程序~如何设置页面的背景色

微信小程序~如何设置页面的背景色 众所周知,微信小程序每个页面由.json,.scss,.ts,.wxml这四个文件组成。 有的小伙伴会发现,需要给页面加背景色的时候,只需在此页面的.scss文件中写个page{background-colo…

Java JDK 自带排序(Arrays.sort(数组名))与自行编写的降序

JDK 自带排序(Arrays.sort(数组名))与自行编写的降序 jdk 自带的排序 Arrays.sort(数组名) 只能进行升序排列 可以与自己写的降序 配合使用 import java.util.Arrays;public class Test1 {//jdk 自带升序public static void m1(int [] arr1) {Arrays.sor…

javaee 中遇到的jdk自带的异常(Exception)

javaee 中遇到的异常(Exception) 如果输入了类型不匹配的数据,则会报InputMismathException(输入不匹配异常) 如果访问超过数组范围的下标将会报数组下标越界异常:ArrayIndexOutOfBoundsException ( 数组越界异常) 在多态的向下转…

Java 访问权限修饰符简述

访问权限修饰符简述 1.类的访问修饰符 public 最大访问权限,本项目中的任何位置都可以访问 默认不写 :包级别的访问权限,智能在同包中访问 package com.qfedu.test2;//public修饰的类 public class A {public static void main(String[] arg…

java super关键字简述

java super关键字简述 super关键字访问父类属性,访问权限必须是允许的super关键字访问父类属性,访问权限必须是允许的当创建子类对象时,默认调用父类的无参构造方法,除非显式调用父类的有参构造方法,也就是说**子类创建…