浅谈HTML5 & CSS3的新交互特性


Posted in HTML / CSS onJuly 19, 2016

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

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

什么是HTML5和CSS3

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

浅谈HTML5 & CSS3的新交互特性

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

HTML5和CSS3是HTML和CSS的最新版本,它们目前均未确定标准,但是已经公布的新特征已经让我们心动不已。

HTML5的新特新

1. 新的内容标签

浅谈HTML5 & CSS3的新交互特性

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

2. 更好的表格体系

浅谈HTML5 & CSS3的新交互特性

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

3. 音频、视频API

浅谈HTML5 & CSS3的新交互特性

浅谈HTML5 & CSS3的新交互特性

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

4.画布(Canvas) API

浅谈HTML5 & CSS3的新交互特性

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

5. 地理(Geolocation) API

浅谈HTML5 & CSS3的新交互特性

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

6. 网页存储(Web storage) API

浅谈HTML5 & CSS3的新交互特性

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

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

浅谈HTML5 & CSS3的新交互特性

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

CSS3新特性

1. RGBa

浅谈HTML5 & CSS3的新交互特性

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

2. Multi-column layout

浅谈HTML5 & CSS3的新交互特性

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

3.Round corners

浅谈HTML5 & CSS3的新交互特性

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

4. @font-face

浅谈HTML5 & CSS3的新交互特性

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

5. 其他特性

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

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

HTML5和CSS3的兼容性

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

http://fmbip.com/litmus

以上这篇浅谈HTML5 & CSS3的新交互特性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/androidshouce/archive/2016/07/19/5683426.html

HTML / CSS 相关文章推荐
css3动画效果抖动解决方法
Sep 03 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 #HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 #HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 #HTML / CSS
HTML5之语义标签介绍
Jul 07 #HTML / CSS
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
nodejs中方法和模块用法示例
2018/12/24 NodeJs
vue实现手机端省市区区域选择
2019/09/27 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python 错误和异常代码详解
2018/01/29 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python操作qml对象过程详解
2019/09/26 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python 如何在字符串中插入变量
2020/08/01 Python
浅析Python requests 模块
2020/10/09 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
《燕子》教学反思
2014/02/18 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
五好关工委申报材料
2014/05/31 职场文书
意向书范本
2014/07/29 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
工人先进事迹材料
2014/12/26 职场文书
教师学期末个人总结
2015/02/13 职场文书
出国留学英文自荐信
2015/03/25 职场文书