HTML 多媒体标签：深入解析让你的网页栩栩如生的元素

HTML 多媒体标签

多媒体内容在现代网页中至关重要，因为它可以吸引用户、传达信息并提高参与度。HTML 提供了广泛的多媒体标签，允许开发人员向页面添加图像、视频、音频、画布和嵌入式内容。

图像标签 ()

图像标签用于在页面上显示图像。其属性包括 class="lazy" data-src（图像源）、alt（图像替代文本）、width（宽度）和 height（高度）。

<img class="lazy" data-src="image.png" alt="公司徽标">

视频标签 (

视频标签允许播放视频文件。它支持各种属性，例如 class="lazy" data-src（视频源）、autoplay（自动播放）、controls（显示控件）和 loop（循环播放）。

<video class="lazy" data-src="video.mp4" autoplay controls loop>
  <source class="lazy" data-src="video.webm" type="video/webm">
</video>

音频标签 (

音频标签用于播放音频文件。其属性类似于视频标签，包括 class="lazy" data-src（音频源）、autoplay 和 controls。

<audio class="lazy" data-src="audio.mp3" autoplay controls>
  <source class="lazy" data-src="audio.ogg" type="audio/ogg">
</audio>

画布标签 ()

画布标签提供了在 HTML 页面上创建动态图形的可能性。它使用 JavaScript API 绘制形状、文本和图像。

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 100);
</script>

嵌入标签 (