HTML 提供了多种媒体标签，用于在网页中嵌入和显示各种媒体内容，如图像、音频、视频等。以下是常见的 HTML 媒体标签及其使用示例：

1. 图像标签 <img>

用于在网页中嵌入图像。

  • 基本用法：
<img src="image.jpg" alt="描述图像的文本">
  • 属性：
  • src：图像文件的路径。
  • alt：图像无法显示时的替代文本，有助于提高可访问性。
  • width 和 height：图像的宽度和高度，可以使用像素或百分比。
  • title：鼠标悬停在图像上时显示的文本。

2. 视频标签 <video>

用于在网页中嵌入视频。

  • 基本用法：
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
  • 属性：
  • controls：显示播放控件（播放、暂停、音量等）。
  • autoplay：页面加载后自动播放视频。
  • loop：视频播放结束后自动重新播放。
  • muted：视频默认静音。
  • poster：视频加载前显示的图片。

3. 音频标签 <audio>

用于在网页中嵌入音频。

  • 基本用法：
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签。
</audio>
  • 属性：
  • controls：显示播放控件（播放、暂停、音量等）。
  • autoplay：页面加载后自动播放音频。
  • loop：音频播放结束后自动重新播放。
  • muted：音频默认静音。

4. 嵌入标签 <embed>

用于在网页中嵌入外部内容（如PDF、Flash等）。

  • 基本用法：
<embed src="file.pdf" width="600" height="500">
  • 属性：
  • src：嵌入内容的路径。
  • width 和 height：嵌入内容的宽度和高度。

5. 对象标签 <object>

用于在网页中嵌入多种外部内容，包括HTML、图像、音频、视频、PDF等。

  • 基本用法：
<object data="file.pdf" type="application/pdf" width="600" height="500">
  如果您的浏览器不支持嵌入的内容，请提供替代内容。
</object>
  • 属性：
  • data：嵌入内容的路径。
  • type：嵌入内容的 MIME 类型。
  • width 和 height：嵌入内容的宽度和高度。

6. 图像地图标签 <map> 和 <area>

用于创建可点击的图像区域。

  • 基本用法：
<img src="map.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="区域1">
  <area shape="circle" coords="377,300,44" href="page2.html" alt="区域2">
</map>
  • 属性：
  • usemap：图像关联的图像地图的名称。
  • <area> 标签的 shape、coords、href 和 alt 属性用于定义可点击区域的形状、坐标、链接和替代文本。

7. 画布标签 <canvas>

用于在网页上绘制图形，通过 JavaScript 操作。

  • 基本用法：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.fillStyle = "#FF0000";
  context.fillRect(0, 0, 150, 75);
</script>
  • 属性：
  • width 和 height：画布的宽度和高度。

8. SVG标签 <svg>

用于在网页中嵌入可缩放矢量图形。

  • 基本用法：
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
  • 属性：
  • width 和 height：SVG 图形的宽度和高度。
  • 各种形状元素（如 <circle>、<rect>、<line>）有其特定属性，如 cx、cy、r 等。

这些HTML媒体标签可以在网页中嵌入和展示各种丰富的媒体内容，从而提升用户体验和页面的多样性。