[学习笔记]今天开始学HTML5!

1,href和src的区别:href有“连接,引用”之意,指两者的连接关系,如<a href=""></a>,<link href="**.css"/>;

          src有“获取”之意,指拿来使用,如<img src="./**.jpg"/>。

2,HTML5标签

1>,<video>,视频标签,仅支持ogg,mpeg4,webm格式视频

<video scr="‘ width="" height="" controls="controls"></video>支持宽,高,开始暂停音量控件;

<video>

  <source src="**.ogg" type="video/ogg">

  <source src="**.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>如有多个视频来源,source标签引用多个视频来源,浏览器选择支持的格式,当浏览器不支持video标签是,显示内部文本。

video支持DOM控制,提供play(),pause()方法,提供属性paused

<!DOCTYPE html>
<html>
<body> 

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button>
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br />
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
  myVideo.play();
else
  myVideo.pause();
} 

function makeBig()
{
myVideo.width=560;
} 

function makeSmall()
{
myVideo.width=320;
} 

function makeNormal()
{
myVideo.width=420;
}
</script> 

</body>
</html>

2>,<audio>音频标签,用法类比<video>

3>,html5好难啊。。。

时间: 2024-10-12 19:16:04

[学习笔记]今天开始学HTML5!的相关文章

《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力

一.了解DOM 1.DOM是Document Object Model的缩写,即文档对象类型,是文档在内存中的表示形式,是一个应用程序接口,定义了文档的逻辑结构以及一套访问和处理文档的方法. 2.HTML DOM与Core DOM的区别:前者提供了大量的方法和属性,与现有的程序模型一致,更便于脚本的编写者控制. 二.document对象 使用window.document属性返回一个document对象,代表当前window内加载的文档.window可以省略.winName.document返回

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

Canvas 学习笔记1

#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里. 首先推荐大家先看看阮一峰大大写的这个[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.ht

WPF的Binding学习笔记(二)

原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的皮毛, 然后就做别的事去了, 等回头再来看WPF的时候, 哈忘记了~ 于是写个例子补一下, 在继续学习Binding. 1, 首先准备好一个类 public class Hero { public Hero(int id, string name, string skill, bool hasM)

HTML5独家分享:原生JavaScript学习笔记2——程序流程控制

当当当当 .....楼主又来了!新一期的JS学习笔记2--程序流程控制更新了! 当当当当 .....楼主又来了!新一期的JS学习笔记2--程序流程控制更新了! 想一键获取全部JS学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1. 顺序结构 2. 分支结构 3. 循环结构 顺序结构:程序从第一行开始执行,按顺序执行到最后一行 分支结构:就像一条岔路口,必须选择且只能选择其中一条道路继续走下去,不能同时执行两个分支里的代码. 我们可以使用如下三种方式来实现程序的分支

【学习笔记】HTML5视频的属性、方法、事件介绍 详解

规划了一下学习路线 HTML5 -> CSS3  -> JS ->综合 7.31日开始,做好笔记做好记录 认真学习. HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement)所以音频文件和视频文件大多数都是一样的,除了标签名称 <video> <audio> HTML视频 大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2