码迷,mamicode.com
首页 > Web开发 > 详细

HTML5和CSS3中的交互新特性

时间:2017-05-28 22:25:39      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:级别   标准   order   接口   效率   元素   div   top   hot   

当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到。并且因为图片的体积不算小。可能在网速慢的的时候不得不耐心的等待图片的刷新。

所以。我们来谈谈有没有一种新的方法能够避免这些缺点。

 

什么是HTML5和CSS3

 

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这样的语言。我们能够向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。

 

HTML 5的新特性

 

1. 新的内容标签

HTML4中的内容标签级别同样,无法区分各部分内容。

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

 

2. 更好的表格体系

如今,你能够抛弃JavaScript或者是PHP,仅仅通过HTML5来定义表格。你能够定义每一个表格单元的输入格式,也能够定义这个单元是否是必填的等等。

 

3. 音频、视频API

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

 

4. 画布(Canvas) API

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

 

5. 地理(Geolocation) API

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

 

6. 网页存储(Web storage) API

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

 

7. 拖拽释放(Drag and drop)API

我们能够通过HTML5的Drag and drop API来完毕网页中的拖拽释放效果,避免了以往的网页在拖拽释放过程中须要不停改动元素的位置,代码繁多的弊端。

 

CSS3 新特性

 

1. RGBa

CSS3的RGBa新特性同意你对每一个元素进行色彩以及透明度的设置。而原来经常使用的opacity命令仅仅能对元素及其子元素进行设置。

 

2. Multi-column layout

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

 

3. Round corners

圆角功能可能是CSS3提供的最有用的功能了。通过Border-radius。你能够没有不论什么难度的给指定的HTML元素加入圆角。而且你还能够定义圆角的大小,以及哪个角是圆角,哪个角不是圆角。

 

4. @font-face

当网页显示某种用户没有安装的字体时。CSS3提供的@font-face功能会自己主动的、默默地帮用户从网络上下载对应字体。

从而让设计师更加自由的发挥。而不用考虑用户的机器是否安装了对应字体。

 

5. 其它特性

此外,CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。利用好CSS3,你能够更快捷的得到以往用非常多插件才干得到的效果。

同过使用元素本身来代替大部分图片,网页的载入速度会得到提升,这些原本是图片的内容,也能够被搜索引擎检索到。

 

HTML5和CSS3的兼容性

 

HTML5和CSS3的标准并未正式完毕。各家浏览器对其支持程度也不尽同样。了解HTML5和CSS3的兼容性是十分必要的。

HTML5和CSS3中的交互新特性

标签:级别   标准   order   接口   效率   元素   div   top   hot   

原文地址:http://www.cnblogs.com/jhcelue/p/6916733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!