HTML 5 & CSS 3的新交互特性

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

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

 

什么是HTML5和CSS3

 

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

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

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


 

HTML 5的新特新

 

1. 新的内容标签

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

2. 更好的表格体系

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

3. 音频、视频API

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

4. 画布(Canvas) API

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

5. 地理(Geolocation) API

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

6. 网页存储(Web storage) API

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

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

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

CSS3 新特性

 

1. RGBa

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

2. Multi-column layout

HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记(深入)”;

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

 

3. Round corners

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3126706.html

(0)
上一篇 2025年3月29日 20:29:47
下一篇 2025年3月29日 20:30:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 电热毯上面铺厚点好还是薄点

    电热毯是生活中比较常见的一种取暖用品,它使用起来比较方便,直接铺在床上,打开电源,设置档位就可以了,电热毯一般是不能直接接触皮肤的,上面要铺一层,但是不能铺太厚了,以免影响散热,存在一定的安全隐患。 电热毯上面铺厚点好还是薄点 电热毯上面铺…

    2025年4月12日
    661.6K00
  • H5你真的了解吗?(绝对干货)

         h5广告,包括广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解h5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的讲义内容仍然还有不少不完善和有待系统的内容。但是,我相信你在…

    2025年3月29日 编程技术
    100
  • 混合移动开发框架详解

      kerkee是一个多主体共存型hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有debug环境、彻底解决跨域问题。 hybrid   kerkee框架的诞生背景   Hybrid Ap…

    编程技术 2025年3月29日
    200
  • 基于javascript的组件开发方式

      作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。   下面我们来谈谈,在现有的知识体系下,如何很好的写组件。   比如我们要…

    编程技术 2025年3月29日
    100
  • 从登录框看前端

      我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。   在很多人眼里,前端就是 DIV+CS…

    编程技术 2025年3月29日
    100
  • 如何适配不同分辨率和不同屏幕尺寸的手机

      背景   开发移动端H5页面   面对不同分辨率的手机   面对不同屏幕尺寸的手机   视觉稿   在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。   对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以…

    2025年3月29日 编程技术
    200
  • React Native第一课

         前言   本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。   阅读本文…

    2025年3月29日 编程技术
    200
  • 三天学会HTML5 ——多媒体元素的使用

      目录   1. HTML5 Media-Video   2. HTML5 Media-Audio   3. 拖拽操作   4. 获取位置信息 立即学习“前端免费学习笔记(深入)”;   5. 使用Google 地图获取位置信息   多媒…

    2025年3月29日 编程技术
    200
  • 基于轻量级高性能的CSS3动画库

      简要教程   Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS3库具有更高的性能。 CSS3   安装   你可以通过bo…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论