HTML5 学习笔记（一）——HTML5概要与新增标签 - SeeYouBug(5)_H5之家

3.2.10、canvas元素
定义图形，比如图表和其他图像。<canvas> 元素只是图形容器（画布），必须使用脚本来绘制图形。
<canvas></canvas><script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

3.2.11、command元素
表示命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。。
<menu>
<command>
Click Me!</command>
</menu>

3.2.12、details标签
用于描述文档或文档某个部分的细节。
可与 summary 标签配合使用，summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。

3.2.14、datalist标签
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

3.2.15、output标签
定义不同类型的输出，比如脚本的输出。
<form action="form_action.asp" method="get">
<output></output>
</form>

3.2.16、menu标签
定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别，menu专门用于表单控件。

3.3、多媒体标签

如果需要在页面中播放音频与视频我们经常会用使用的方法有：

a)、embed

b)、使用flash播放器

如一些三方插件，flowplayer602

html5多媒体组件指的是video(视频)组件和audio(音频)组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，HTML5多媒体组件的能力就显得尤为重要了。

3.3.1、video视频标签

用于在播放视频，电影

标签基本格式如下：

<video controls="controls" poster="content/1.jpg"> <source src="content/iceage4.mp4" type="video/mp4"></source> <source src="content/iceage4.webm" type="video/webm"></source> <object type="application/x-shockwave-flash" data="myvideo.swf"> <param value="myvideo.swf" /> <param value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="content/iceage4.webm">下载视频</a> </video>

运行效果：

source是视频源，可以有多种，当一种失败时将选择下一种，主要有如下3种：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

格式支持情况：

标签属性：

source子标签属性：

video API方法

video API属性

video API事件

注意：

<video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg"> 您的浏览器太老了，请升级，视频下载<a href="#">地址</a> </video>

多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的内容。

事件绑定与监听的区别：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件绑定与监听的区别</title> </head> <body> <button>按钮A</button> <button>按钮B</button> <script type="text/javascript"> var btnA = document.getElementById("btnA"); var btnB = document.getElementById("btnB"); btnA.onclick = function() { alert("你点了一下"); } btnA.onclick = function() { alert("你又点了一下"); } btnB.addEventListener("click",function(event){ alert("你点了一下"); },false); btnB.addEventListener("click",function(event){ alert("你又点了一下"); },false); </script> </body> </html>

运行结果：

使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件，也就是最后一个绑定的事件会生效；

使用addEventListener绑定事件则不会覆盖，可同时在一个元素上绑定多个相同的事件。

video API的属性与事件示例：