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学习历程的更多相关文章

  1. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  2. html5与css3学习实践--基础的内容划分标签

    从位置上划分出网页的区域以后,就需要用到网页的内容标签了,比如<article>.<aside>.<nav>.<p>.<h1>等.网页中,这 ...

  3. HTML5的动画学习历程

    一.三角学原理. function getRadio(d){//根据角度获得弧度,                return d*Math.PI/180;                }, fun ...

  4. 开辟html5和css3学习随笔（2015-3-2）

    1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  7. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  8. HTML5+CSS3学习笔记（一） 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

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

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

随机推荐

  1. java发送email(含代理方式，ssl方式，传统方式)

    package spring.vhostall.com; import java.security.Security; import java.util.Date; import java.util. ...

  2. C10K——千万级并发实现的秘密：内核不是解决方案，而是问题所在！（转）

    既然我们已经解决了 C10K并发连接问题,应该如何提高水平支持千万级并发连接?你可能会说不可能.不,现在系统已经在用你可能不熟悉甚至激进的方式支持千万级别的并发连接. 要知道它是如何做到的,我们首先要 ...

  3. idea 免费激活（破解）

      1.将补丁(JetbrainsCrack-2.7-release-str.jar)拷贝到idea的安装目录/bin下 下载破解补丁 从IntelliJ IDEA 注册码网站:http://idea ...

  4. SettingsSVNPlugin

      迁移时间:2017年5月20日11:24:50CreateTime--2016年9月18日17:53:20Author:Marydonmyeclipse/eclipse中配置svn插件参考链接:h ...

  5. 用户研究Q&A（1）

    近来,不少同事开始认同用户研究的价值,希望通过接触,理解和研究用户来获取提升产品的有效信息.这绝对是件好事,因为我一直抱持的理念是,研究并不是藏在实验室或者握在少部分人手中的稀罕货,更重要是一种理念和 ...

  6. Android 5.0 + IDA 6.8 调试经验分享

    如今升级快.网上的资料仅仅能做參考. 学到了NDK逆向这一块,昨天为了能让IDA 能动态调试SO,瞎折腾了非常久,这里分享一下我的经验. 工具: IDA pro 6.8 Android 5.x IDA ...

  7. 【mysql】mysql中单列索引、联合索引、Join联表查询建立索引 和 EXPLAIN的分析使用

    2.创建联合索引,从坐到右分别为:userid.openId.name   2. #### --------------  多表联合查询 update 2019/03/13  ------------ ...

  8. VS:"64位调试操作花费的时间比预期要长"的一解决途径

    解决办法之一: 在命令提示符那里打入如下命令: netsh winsock reset catalognetsh int ip reset reset.log hit 重启电脑后,即可

  9. HDUOJ----4006The kth great number(最小堆...)

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  10. java提高篇之详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...