HTML5.0的一些新标签

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5中新增了一些比较高逼格的标签，稍微做个笔记，学习一下。

1、HTML5 规定了一种通过 video 元素来包含视频的标准方法。

但是，这种标准却只支持三种视频格式： 

带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件，ogg文件主要是类似于mp3格式音频文件。

带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件，后缀名为.mp4的视频

带有 VP8 视频编码和 Vorbis 音频编码的 WedM 文件。谷歌提出的一种视频压缩文件格式。

使用方式和其他的HTML标签一样,只不过是需要记住一些属性的设置，主要是controls显示播放按钮的，src输入播放视频的路径的。

<video src="movie.mp4" controls="controls" width="200px" height="200px">

</video>

2、HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

同样的，该标签也是支持三种音频的格式ogg、mp3、Wav.

基本上是和video标签一样的用法，属性设置基本也是一样的。

<audio src="music.ogg" controls="controls">

</audio>

3、HTML5的拖放事件

ondragstart="drag(event)";在要拖元素上需要触发的事件，调用drag()函数并且将当前的event事件当做参数传递给处理函数。

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

ondragover="allowDrop(event)";将拖动的元素放在什么位置。

function allowDrop(ev){

ev.preventDefault();

}

ondrop="drop(event)";当放置被拖动的数据时候会触发drop事件。

function drop(ev){

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

}

始终抓住关键点，哪个元素被拖动，拖动之后放在哪里。

4、HTML5中的Canvas标签与SVG标签

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

<canvas id="myCanvas" width="200px;" height="200px;"></canvas>

<script>

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

var cxt=c.getContext("2d");//创建 context 对象

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);//在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

</script>

svg标签是直接嵌入HTML代码中的，并不是通过JavaScript来操作的。Svg是使用xml来操纵2D图形的。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>

基本上就是这些没有加过的标签了，其实还有一些方法，不写入这里了，可以通过官网查看。http://www.w3school.com.cn/html5