[学习笔记]今天开始学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好难啊。。。
[学习笔记]今天开始学HTML5!的更多相关文章
- (6)《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- 【学习笔记】--- 老男孩学Python,day2
今天正式上课的第一天,好害怕.好紧张.好激动.好兴奋! 第一天的课程还算是比较简单吧,因为之前断断续续学的就是这点东西,算是这些都比较熟了吧 今天学习了如下课程: 1. 简单计算机组成 2. pyth ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- Javascript高级编程学习笔记(48)—— HTML5
HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML ...
- 【学习笔记】---老男孩学Python,day1
老早同学就推荐自己学编程了,因为各种事耽误了几年的时间,也可以说自己没有居安思危的意识吧… 直到今年2月份决定掏钱学线上课,但是又被兼职打断了,公司忙,兼职事多,拖来拖去只能把课程延期.这一拖就到了五 ...
- 【学习笔记】--- 老男孩学Python,day15 python内置函数大全,递归,二分法
1. lamda匿匿名函数2. sorted()3. filter()4. map()5. 递归函数 一. lamda 匿名函数 为了了解决一些简单的需求⽽设计的⼀句话函数 语法: 函数名 = lam ...
- 【学习笔记】--- 老男孩学Python,day6 字典
详细方法:http://www.runoob.com/python/python-dictionary.html 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 { ...
- 【学习笔记】--- 老男孩学Python,day5 列表 元祖
今日主要内容1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append( ...
随机推荐
- Oracle中强行断开用户连接的方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 首先查找目标用户的当前进程,注意是serial#而不是serial,网上有的介绍漏掉了#: select sid,serial# from v$s ...
- J2SE知识点摘记(二十一)
实现原理 前面已经提了一下Collection的实现基础都是基于数组的.下面我们就已ArrayList 为例,简单分析一下ArrayList 列表的实现方式.首先,先看下它的构造函数. 下列表格是在S ...
- [LeetCode][Python]Container With Most Water
# -*- coding: utf8 -*-'''https://oj.leetcode.com/problems/container-with-most-water/ Given n non-neg ...
- C++中实现链表的删除和颠倒
MFC工程中关于链表的操作 1.对于给定的整数n,编写算法删除链表中第n个节点,该链表的第一个节点由first指向. 由于C++中没有关于node的标准头文件,要先手动定义node类,此处只定义了简单 ...
- 美国TJX公司 - MBA智库百科
美国TJX公司 - MBA智库百科 TJX公司总部设在美国波士顿,在北美地区和许多欧洲国家开有连锁分店,仅在美国就有2500多家分店. TJX Companies, Inc. 是美国和全世界的服装和家 ...
- winds引导配置数据文件包含的os项目无效
我装了winds7与linux双系统,用easyBcd程序时,删除了一个winds7,之后winds7就进不去了, 进入winds7时显示winds未能启动,原因可能是最近更改了硬件或软件.解决此问题 ...
- JavaScript继承的实现
怎样在JavaScript中实现简单的继承? 以下的样例将创建一个雇员类Employee,它从Person继承了原型prototype中的全部属性. function Employee(name, ...
- Ext.Net 使用总结之查询条件中的起始日期
2.关于查询条件中起始日期的布局方式 首先上一张图,来展示一下我的查询条件的布局,如下: 大多数时候,我们的查询条件都是一个条件占一个格子,但也有不同的时候,如:查询条件是起始日期,则需要将这两个条件 ...
- 腾讯TGideas语义化标签(转)
--------引子--------------- 家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”:你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的 ...
- select2简单例子
1.html中静态值 html <%--multiple 为多选--%> <select multiple id="e1"> <option>& ...