在计算机系统中，多媒体指组合两种或两种以上媒体的一种人机交互式信息交流和传播媒体。使用的媒体包括文字、图片、照片、声音、动画和影片，以及程式所提供的互动功能。HTML作为一门前端开发的超文本标记语言，HTML中的许多标签都和多媒体息息相关，在页面上反馈出了很多的元素信息。下面我们一起来看看HTML标签中都有哪些多媒体标签。

1.image

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">

caption添加标题

 <figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

2.audio

单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

3.video

单一url 浏览器厂商，针对视频的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

浏览器适配问题

<video controls width="400" height="400"
       autoplay loop muted preload="auto" 
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

4.svg

image引用svg

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

html引用svg

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

iframe等中引用svg

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

5.canvas

canvas与svg不同，canvas基于像素,svg基于矢量图

#html
<canvas id="my-canvas" width="600" height="400"></canvas>

6.嵌入元素

iframe, embed and object

iframe

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>

我们在很多页面上看到的五颜六色和丰富多彩的元素很多都是通过HTML标签反馈出来的，想要了解更多的HTML标签，可以到动力节点在线网站的HTML课程中找到HTML标签大全，里面涵盖了我们在多数情况下能用到的HTML标签，并给出了相关的用途，想学习的小伙伴不要错过哦。