浅谈HTML5新增和废弃的标签

2020-04-21 07:02:57易采站长站整理
2.10、canvas元素

定义图形,比如图表和其他图像。<canvas> 元素只是图形容器(画布),必须使用脚本来绘制图形。 


<canvas id="myCanvas"></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>

2.11、command元素

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


<menu> ​
<command onclick="alert('Hello World')"> ​
Click Me!</command>
​</menu>

2.12、details标签

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

2.14、datalist标签

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

2.15、output标签

定义不同类型的输出,比如脚本的输出。


<form action="form_action.asp" method="get" name="sumform">
​<output name="sum"></output>
​</form>

2.16、menu标签

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

3、多媒体标签

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

a)、embed

 


<embed src='http://huoche.7234.cn/images/jb51/awc3fkk50ec.swf">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="a.mp4">下载视频</a>
</video>