HTML5 CSS3的新交互特性

什么是HTML5和CSS3

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

\

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

HTML5和CSS3是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提供了地理信息的应用接口Geolocation API。通过这个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兼容性的网站,有兴趣的朋友可以点击查看:

http://www.findmebyip.com/litmus

转载于:https://www.cnblogs.com/leeten/p/3434905.html

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

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

相关文章

基于Colab Pro Google Drive的Kaggle实战

原文:https://hippocampus-garden.com/kaggle_colab/ 原文标题:How to Kaggle with Colab Pro & Google Drive 译文作者:kbsc13 联系方式: Github:https://github.com/ccc013/AI_algorithm_notes 微信公众号&…

Focal Loss 论文笔记

论文:《Focal Loss for Dense Object Detection》 论文地址:https://arxiv.org/abs/1708.02002 代码地址: 官方 github:https://github.com/facebookresearch/detectrontensorflow:https://github.com/tensorflow/m…

SAP的软件设置

上次装的SAP有问题,懒得管那么多,重装系统得了。我的水平还不够看log里的错误代码的内容然后手动修改安装文件。Win2000AS装好,打上SP4补丁包。SAP的官方说法是,至少要升级到SP3包,但是有网友说不打补丁包也能装。当然…

php 构造骚扰短信发送机(仅供学习与参考,请勿用于非法用途)

最近在某宝买东西得罪了某黑心商家。。然后他就疯狂的给我发骚扰短信,烦死了。。。 短信大概就是利用一些网站的手机验证码来实现的。。 所以再被他疯狂骚扰后决定自己动手反击。。 php主要用到了curl的函数库扩展,然后主要要做的还是去抓包分析网站注册…

A Quantization-Friendly Separable Convolution for MobileNets

论文:《A Quantization-Friendly Separable Convolution for MobileNets》 论文地址:https://arxiv.org/pdf/1803.08607.pdf 这篇是高通在 2018 年发表的一篇论文,主要是针对在量化方面效果很差的 MobileNetV1 网络进行研究,探索…

神经稀疏体素场论文笔记

论文地址:https://proceedings.neurips.cc/paper/2020/file/b4b758962f17808746e9bb832a6fa4b8-Paper.pdf Github:https://github.com/facebookresearch/NSVF 摘要 使用经典计算机图形技术对真实世界场景进行逼真的自由视角渲染具有挑战性&#xff0c…

3dmax 学习

^_^,今天早上起来,外面黢黑一片还以为是深夜了,一看表才知道上课快要迟到了,迅速起床作整理工作,一边整理一边看看外面的天,真是太吓人了。别人说天狗吃月是晚上可以看到的,但是在这个东北&…

2013.11.18—2013.11.22周总结

一、工作 加班加班加班加班加班 一周就这样过来了,也实在没什么好说的了 二、学习 比较好的是,这段时间老找XW,好歹知道要怎么用ruby自己去调试自动化了,纲巴蝶! 三、生活 终于把房子找好了,三室一厅&#…

Linux学习系列之Linux入门(一)linux安装与入门

第一篇:安装并配置Linux开发环境 一、安装linux: 主要安装Linux的发行版,到目前为之,主要的发行版有: 比较常用的是Ubuntu、redhat和centOS,主要的安装方法详细: Ubuntu安装1、Ubuntu安装2,Redhat安装1、Re…

神经网络中的 Dropout 以及变体方法

Dropout 的学习笔记,主要参考文章: 12种主要的Dropout方法:如何应用于DNNs,CNNs,RNNs中的数学和可视化解释 【科普】神经网络中的随机失活方法 1. 简介 深度学习训练模型的一个主要挑战是协同适应,这意…

介绍我的一位同事的开源RSS阅读器

离开原来单位一个多月,自从我离开公司最近有好几位同事离开了。真心祝愿各位工作开心快乐。这是原来单位的一位同事制作的RSS阅读器,使用C#代码编写。简要介绍: 无限制级目录。方便的目录添加管理,不限制层次; 快捷添…

Js中数组Array的用法

js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr new Array(); arr[0] "aaa"; arr[1] "bbb"; arr[2] "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.leng…

【论文精读】Deep Rectangling for Image Stitching: A Learning Baseline

代码:https://github.com/nie-lang/DeepRectangling 链接:https://arxiv.org/abs/2203.03831 概览 目前图像拼接的一个问题是拼接后会产生不规则的边界,如下图1 b所示。目前解决这类问题主要是通过图像矩形化方法,并且通常是分…