HTML5标签属性及用法（一）

最新推荐文章于 2022-10-19 20:38:01 发布

aloneGirle

最新推荐文章于 2022-10-19 20:38:01 发布

阅读量615

点赞数

分类专栏： HTML5 文章标签： html5 标签 video canvas audio

本文链接：https://blog.csdn.net/u011325156/article/details/45395621

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.<video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

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>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="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>

效果图：

aloneGirle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5标签属性及用法（一）

1.属性值描述 autoplay 属性" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent">autoplayautoplay如果出现该属性，则视频在就绪后马上播放。 controls
复制链接

扫一扫