在如今互联网时代，如果你连多媒体是什么都不知道的话，你真的白混了。多媒体是多种媒体的综合，一般包括文本，声音和图像等多种媒体形式。在互联网中，多媒体往往是指文字、图片、照片、声音、动画和影片，以及程式所提供的互动功能。相关内容，在HTML都有其对应的标签。

7.1 图片标签

至今，我仍然记得，我之前一个老板跟我说过的一句话：一图胜千字。之前我还不太理解，直接他给我看一张美女照片时，我才懂了，而且是秒懂的那种。在HTML中，照片秀，用的是<img>标签，它的属性有：

src：指定图片源文件，可以是本地的，也可以是网络上的；

alt ：图片未加载成功的提示文字；

width：指定图片的宽度；

height：指定图片的高度；

border：指定图片的边框样式。

程序员最喜欢看美女，不知道是真是假？<br/><img src="mm.jpg" alt="图片不见了，你别伤心" width="880px" height="500px" />

输出结果

7.2 声音标签

在HTML5之前，想实现播放MP3等音频时，大多数是通过插件(比如 Flash)来播放的，你知道插件是要安装的，对用户来说，真是麻烦。好在HTML5补充了在网页上嵌入音频元素的标签<audio>,这才让程序员日子好过了一些。

<audio>标签，支持常见的音频格式：MP3、Ogg和Wav。<audio>使用多个<source>元素链接不同的音频文件，浏览器将使用第一个支持的音频文件，如果都不支持，那就显示提示文字。

<audio>的常用属性autoplay：自动播放；controls：显示播放/暂停按钮；loop：循环播放；muted：静音，属性切换可通过javascript进行控制。

<source>的属性用的较多的是src：音频源；type： MIME 类型。

为了测试效果，建议你在网上随便找一个mp3文件，下载或拷贝url地址都可以。

<audio controls>    <source src="niu.ogg" type="audio/ogg">    <source src="niu.mp3" type="audio/mpeg">    您的浏览器不支持直接播放音频。</audio>

输出结果

7.3 视频标签

在HTML5提供了支持视频元素的标签<video> ，支持的视频格式有MP4、WebM和Ogg。相关属性除了width指定视频宽度、height指定高度之外，其他属性，同<audio>标签是一模一样的。方法也是一模一样的。

<video width="960" height="540" controls>    <source src="mv.mp4" type="video/mp4">    <source src="mv.ogg" type="video/ogg">    您的浏览器不支持直接播放视频。</video>

输出结果

好了，有关html多媒体的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##多媒体##程序员##视频#