html5标签的用法,HTML5标签属性及用法（一）

1.

值

描述

autoplay

如果出现该属性，则视频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

pixels

设置视频播放器的高度。

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

url

要播放的视频的 URL。

设置视频播放器的宽度。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

实例

Your browser does not support the video tag.

2、

属性

值

描述

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

如果出现该属性，则每当音频结束时重新开始播放。

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

url

要播放的音频的 URL。

3、在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

实例

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));

}

οndragοver="allowDrop(event)">

οndragstart="drag(event)" width="336" height="69" />

【说明】

为了使元素可拖动，把 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 内部完成：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,150,75);

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

实例 - 圆形

JavaScript 代码：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FFF000";

cxt.beginPath();

cxt.arc(70,18,15,Math.PI*2,true);

cxt.closePath();

cxt.fill();

canvas 元素：

Your browser does not support the canvas element.

效果图：