0

0

HTML5与CSS3的新交互特性

怪我咯

怪我咯

发布时间:2017-04-08 10:35:11

|

1865人浏览过

|

来源于php中文网

原创

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

有的,html5css3就可以满足你的需求。甚至,它可以做的更多,更好。作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进一步思考通过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,你可以没有任何难度的给指定的什么是html50添加圆角。并且你还可以定义圆角的大小,以及哪个角是圆角,哪个角不是圆角。

4. @font-face

HTML5与CSS3的新交互特性

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

5. 其他特性

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

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

html5和css3的兼容性

html5和css3的标准并未正式完成,各家浏览器对其支持程度也不尽相同。了解 html5和css3的兼容性是十分必要的。

Ztoy网络商铺多用户版
Ztoy网络商铺多用户版

在原版的基础上做了一下修正:增加1st在线支付功能与论坛用户数据结合,vip也可与论坛相关,增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文

下载

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.9万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 3.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号