html5和css3学习历程
1.video,audio视频和音频的应用
<!doctype html>
<html>
<head></head>
<body>
<!--<video src="movie.webm" controls="controls">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<hr />
多资源的视频播放
<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
您的浏览器不支持视频标签，还不赶快升级。
</video>-->
<hr />
使用以下VIDEO标签的API<br />
<video src="movie.webm" controls="controls" id="video" autoplay="autoplay">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<br />
<button onClick="bofang()">播放</button>
<button onClick="zanting()">暂停</button>
<button onClick="kuaijin()">快进10秒</button>
<button onClick="kuaitui()">快退10秒</button>
<button onClick="shutup(this)">闭嘴</button>
<button onClick="soso()">加速播放</button>
<button onClick="yu()">减速播放</button>
<button onClick="normal()">正常播放</button>
<button onClick="upper()">提高嗓门</button>
<button onClick="lower()">降低嗓门</button>
<script>
//获取对应的video标签
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暂停方法
function zanting(){
video.pause();
}
//快进10秒
function kuaijin(){
video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
}
//快退10秒
function kuaitui(){
video.currentTime-=10;
}
//静音按钮
function shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//加速播放(3倍速度)
function soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function yu(){
video.playbackRate=1/3;
}
//正常倍速
function normal(){
video.playbackRate=1;//默认的播放倍速是1
}
//调高声音
function upper(){
video.volume+=0.2;//声音值的范围是0-1
}
//调低声音
function lower(){
video.volume-=0.2;
}
</script>
<!--poster设置封面就是视频的封面--->
<video controls="controls" height="500" width="500" poster = "PLMM.jpg" loop="loop">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<hr />
音频标签的使用<br />
<audio src="我的好兄弟.mp3" controls="controls">
您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
</audio>
</body>
</html>
2.html5拖放
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
3.什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
下面的例子是一个简单的 SVG矢量图圆 文件的例子。SVG 文件必须使用 .svg 后缀来保存：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
html5和css3学习历程的更多相关文章
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
- html5与css3学习实践--基础的内容划分标签
从位置上划分出网页的区域以后,就需要用到网页的内容标签了,比如<article>.<aside>.<nav>.<p>.<h1>等.网页中,这 ...
- HTML5的动画学习历程
一.三角学原理. function getRadio(d){//根据角度获得弧度, return d*Math.PI/180; }, fun ...
- 开辟html5和css3学习随笔（2015-3-2）
1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
随机推荐
- 在Ubuntu Server是配置iptables防火墙
iptables 是一个安装在Ubuntu Server上的默认防火墙.在正常的ubuntu安装过程中,iptables是被安装上了的,但是它默认允许所有的流量(不管防火墙是否是无效的) 关于ipta ...
- 如何查询端口号和网址的ip地址?
import socket print socket.gethostname()#主机名 hostname=socket.gethostname() #传递主机名 print socket.getho ...
- 分离Command
要点: 1.请求类必须继承CommandBase 2.请求类类名为请求对象中的Key值,大小写可以不区分 3.类必须用public修饰,否则无法识别该请求,提示为无效请求 4.不能再调用NewRequ ...
- Linux系统中用stat命令查看文件的三个时间属性
在Linux中,没有文件创建时间的概念.只有文件的访问时间.修改时间.状态改变时间.也就是说无法知道文件的创建时间. [root@rhel7 yum.repos.d]# stat cdrom.repo ...
- rlwrap插件,实现sqlplus上下翻页
oracle在Linux下,sqlplus中不能上下翻,最主要我经常打错字!嘿嘿 01.下载 RPM :http://rpmfind.net/linux/rpm2html/search.php?qu ...
- 学习JUnit
一.为什么测试很重要? 塑造系统的设计.我们知道输入和输出应该是什么样的,但是我们需要创建什么对象来做到这一点呢?代码应该塑造成什么样的"形状"?编写测试可以让我们知道应该创建什么 ...
- iOS 网络编程 TCP/UDP HTTP
一.HTTP协议的主要特点: 1. CS模式 2. 简单快速:只需要传送请求方法和路径.(常用方法有GET,HEAD,POST) 3. 灵活:任意对象都可以,类型由Content-Type加以标记 4 ...
- android程序监听home键与电源键
01 private final BroadcastReceiver homePressReceiver = new BroadcastReceiver() { 02 final String SYS ...
- Windows命令-route
Windows route命令 添加一条永久网关:route add 0.0.0.0 mask 0.0.0.0 192.168.2.1 -p例如: route -p add 192.168.0.0 m ...
- NSUserDefault 的使用
1.NSUserDefault的使用: 作用:NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存,恢复应用程序相关的偏好设置,配置数据等等 ...