HTML5基础教程(五)
讲解HTML的多媒体标签
HTML的多媒体标签如下：
| 标签 | 含义 |
|---|---|
| hr | 定义水平线 |
| del | 加删除线 |
| img | 定义图片,alt属作用是图像没有下载或者加载失败，会用文字来代替图像显示,其次搜索引擎可以通过这个属性的文字来抓取图片。title属性，是当网页上的图片被加载完成后，鼠标移动到上面提示的文字 |
| video | 定义视频,支持三种视频格式： MP4, WebM, 和 Ogg |
| audio | 定义音频,三种音频格式文件: MP3, Wav, 和 Ogg |
| embed | 义嵌入的内容，比如插件 |
| mark | 需要突出显示或是高亮的文本 |
| canvas | 画布（功能强大）,必须结合javascript使用 |
| progress | 定义进度条 |
| time | 定义公历的时间（24 小时制）或日期,目前所有主流浏览器都不支持time标签，不会在任何浏览器中呈现任何特殊效果 |
通过一个实例，理解以上标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<h1>多媒体标签</h1>
<hr>
html5已经废弃<del>CENTER</del>标签<br>
<img src="http://img.simoniu.com/html5%E7%AE%80%E4%BB%8B001.jpg" title="提示HTML5" alt="HTML_logo"/><br>
<video src="http://media.simoniu.com/test.mp4" controls autoplay width="400px" type="video/mp4"></video>
<br>
<audio src="http://media.simoniu.com/Applause.mp3" controls autoplay type="audio/mp3"></audio>
<br>
<!--使用embed播放flash插件-->
<object>
<embed src="http://media.simoniu.com/legend.swf"/>
</object>
<br>
<p>不要忘记学习 <mark>HTML5</mark> 哦！</p>
<!--使用canvas标签绘制一个红色的矩形-->
<canvas id="myCanvas" width="200" height="100"></canvas><br>
<!--显示50%的进度条-->
<progress value="50" max="100"></progress><br>
<p>
我在 <time datetime="2008-02-14">情人节</time> 有个约会。
</p>
<script>
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
运行效果：
