HTML 媒体元素概述
HTML 提供了多种元素用于嵌入和控制多媒体内容，包括音频、视频、图像、画布等。以下是常用的 HTML 媒体元素及其用法：
音频 (<audio>)
<audio> 元素用于嵌入音频内容，支持 MP3、WAV、OGG 等格式。
示例代码：
<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频元素。
</audio>
controls属性显示播放控件（如播放/暂停按钮）。<source>指定多个音频源以提高兼容性。
视频 (<video>)
<video> 元素用于嵌入视频内容，支持 MP4、WebM、OGG 等格式。
示例代码：
<video width="320" height="240" controls><source src="video.mp4" type="video/mp4">您的浏览器不支持视频元素。
</video>
width和height设置视频尺寸。autoplay属性可自动播放（需注意浏览器限制）。
图像 (<img>)
<img> 用于嵌入静态图像，支持 JPEG、PNG、GIF 等格式。
示例代码：
<img src="image.jpg" alt="描述文字" width="500" height="300">
alt提供替代文本，对无障碍访问和 SEO 友好。
画布 (<canvas>)
<canvas> 提供动态绘图能力，需结合 JavaScript 使用。
示例代码：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.fillRect(10, 10, 150, 80);
</script>
嵌入外部内容 (<iframe>)
<iframe> 用于嵌入其他网页或媒体（如 YouTube 视频）。
示例代码：
<iframe src="https://www.youtube.com/embed/example" width="560" height="315" frameborder="0" allowfullscreen>
</iframe>
响应式媒体设计
通过 CSS 实现媒体内容的响应式适配：
video, img {max-width: 100%;height: auto;
}
媒体格式兼容性建议
- 音频：提供 MP3（广泛兼容）和 OGG（开源格式）。
- 视频：优先使用 MP4（H.264 编码）和 WebM（开源格式）。
- 图像：使用 WebP 格式可优化加载速度（需兼容性检查）。