HTML5标签属性及用法(一)
2015-04-30 15:39
387 查看
1.<video>
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2、<audio>
3、在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
实例
<!DOCTYPE HTML>
<html>
<head>
<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)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
【说明】
为了使元素可拖动,把 draggable 属性设置为 true 。
1)调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
2)通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
3)被拖数据是被拖元素的 id ("drag1")
4)把被拖元素追加到放置元素(目标元素)中
4、Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1)创建canvas
2)通过JS来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
JavaScript 使用 id 来寻找 canvas 元素:
然后,创建 context 对象:
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
实例 - 圆形
JavaScript 代码:
canvas 元素:
效果图:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
实例
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2、<audio>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
实例
<!DOCTYPE HTML>
<html>
<head>
<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)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
【说明】
为了使元素可拖动,把 draggable 属性设置为 true 。
1)调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
2)通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
3)被拖数据是被拖元素的 id ("drag1")
4)把被拖元素追加到放置元素(目标元素)中
4、Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1)创建canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
2)通过JS来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
实例 - 圆形
JavaScript 代码:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FFF000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
效果图:
相关文章推荐
- HTML5标签属性及用法(二)
- HTML5 <meta> 标签属性,所有meta用法都在这里了
- html5 script标签async属性用法
- html5 script标签async属性用法
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- html5 article标签的用法示例
- HTML5 超链接:a标签的href 属性
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- Jquery css函数用法(判断标签是否拥有某属性)
- HTML <label> 标签的 for 属性的用法及作用
- html5 音乐播放器 audio 标签用法
- HTML5 a标签的download属性
- 标签属性和用法
- 微信小程序的组件用法与传统HTML5标签的区别
- HTML5的Video标签的属性,方法和事件汇总
- HTML5中<script>标签中的defer与async属性详解
- html5新增标签和属性
- HTML5新标签语义及用法
- 详解HTML5中ol标签的用法
- html5 标签与对应属性详细使用方法