HTML5和css3的总结四

HTML5的新东西总结四:

1》video和audio
声明方法(可以制作背景音乐)
var oV/oA=new Video()/Audio();
oV/oA.src=‘‘;
oV/oA.play();

双标签声明:
<video src=""></video>
<audio src=""></audio>

属性:
a、src和poster poster:指定一张图片,当视频数据无效时显示(加载、地址错误等);
b、preload 是否预加载,默认为auto,还有none和metadata
c、loop 是否自动循环,布尔值属性
d、controls 显示播放控件
e、width和height
f、source标签 包含type(媒体类型的src) 默认为all

功能:
a、暂停 pause 播放 play
b、音量控制 volume+=0.1 volume-=0.1 (默认的值是0-1)
c、静音 muted 返回布尔值,true表示静音 false表示不静音
d、快进和快退 currentTime++ 快进 currentTime-- 快退
e、全屏 Video.webkitRequestFullscreen();
f、滚动条 事件Video.ontimeupdate 事件对象中含有 Video.currentTime 已经播放的时间 Video.duration 总时间
g、播放完毕 事件onended
h、当双击的时候(事件) ondblclick

2》动画
transition 过渡 用于简单的过渡动画
animation
定义:@keyframes name{
from/0%{ }
to/100%{ }
}
调用:animation:1s name linear/ease infinite forwards;

分写:
animation-name:name; 名称
animation-duration:4s; 时间
animation-timing-function:linear; 运动状态
animation-fill-mode:forwards; 最后状态
animation-iteration-count:infinite; 动画次数

分享一个css3动画特效库 animation.css 网址: https://daneden.github.io/animate.css/

3》地理位置
对象:navigator-geolocation

navigator-geolocation.getCurrentPosition(function(ev){alert(‘成功时包含ev事件对象,可以打印出来‘);ev.coords},function(ev){ev.code})

ev.coords:坐标
latitude——纬度
longitude——经度
accuracy——精确度,单位米
altitude——高度,单位米 海拔
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度 朝向
speed——运动的速度(假设你在地平线上运动),单位米/秒
accuracy >70 可用 精确度

ev.code的返回值:
1 用户拒绝
2 获取超时 网络问题
3 获取失败

实时获取地理位置:navigator.geolocation.watchPosition();
和定时器相同可以清除;
清除方法:navigator.geolocation.clearWatch();

时间: 2024-10-08 02:14:37

HTML5和css3的总结四的相关文章

HTML5与CSS3权威指南.pdf8

第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-” background-clip的值有border(背景范围包括边框区域)和padding(背景范围包括padding

HTML5与CSS3权威指南.pdf2

第三章 HTML5的结构 article元素更强调独立性,section元素强调分段,div元素强调css的套用,aretcle元素和section元素在核实的情况下可以调换 nav元素用作页面导航的链接组,通常里面包含<ul><li><a>元素 aside元素表示页面或文章的附属信息部分,可以是与当前页面或内容相关的参考资料,名词解释 time元素表示24小时中的某个时刻或日期<time datetime="2014-8-6T19:53-14:00&q

《html5与css3基础教程》(第8版)个人笔记

<html5与css3基础教程(第8版)个人笔记 四至六章 small 行内 短语版权符号:&copy 可任意嵌套,html和html5表示含义不一样 strong 重要 em 强调 html5中 b i figure:图figcaption可以用来添加署名? blockquote中的cite:提供引述文本的位置 很多开发人员避免使用q,而是手动添加引号或字符实体datetime可以用于在web应用之间同步日期和时间 YYYY-M-DDThh:mm:ss或hh:mm.sssUTC全球标准时间

(转)浅谈HTML5与css3画饼图!

神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制作饼图大多使用flash,或者后台语言生成,如PHP,Python只要安装相应的基础库就能实现画图.但很少有站点这么干,因为耗费服务器资源. cnzz里使用的就是flash PHP生成的 HTML5与CSS3也能画出饼图 不得不说,HTML5与CSS3的推出,将推翻老一代的网页制作者.特别在当今浏览

HTML5与CSS3权威指南之CSS3学习记录

title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) 官方网站: 华章图书 书中所有代码下载链接: 链接:http://pan.baidu.com/s/1c0oGMn2 密码:f7zt 选择器 属性选择器 [att=val]选择器--选择属性att值为val的元素 [att*=val]选择器--选择属性att值包含val的元素 [att^=val]选择器--选

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译

【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与HTML4在语法上的区别. HTML5的结构元素. 表单与文件.   图形绘制.   多媒体播放. 本地存储.   离线应用. 通信API. Web Workers. 地理位置获取等 第2部分:CSS3的相关知识,包括  选择器.  文字与文字的样式. 颜色的样式. 盒的样式. 背景与边框的样式. 布

浏览器 HTML5 和 CSS3 兼容 【转自网络】

浏览器厂商的竞争促使各大浏览器对 HTML5 和 CSS3 的支持越来越完善,下面的图表列出了 IE,Chrome,Firefox, Safari,Opera 五大主流浏览器,在 Mac 和 Windows 两个平台,对 HTML5 和 CSS3 各种特性最新的支持情况的详细清单(个别数据可能有误,大家可以通过 caniuse.com 查询更为详细的信息). CSS3 属性 从表中可以看出,除了 Overflow Scrolling 还没有浏览器支持之外,其它属性在 Windows 平台,Chr

HTML5和CSS3中的交互新特性

当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免这些缺点. 什么是HTML5和CSS3 HTML和CSS并不难理解.HTML为构成网页的主要语言.通过这样的语言.我们能够向计算机说明网页格式.内容.显示效果等等.而CSS则是专门用来控制网页显示效果的语言. HTML 5的新特性 1. 新的内容标签 HTML4中的内容标签级别同样,无法区分各部分内