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 格式可優化加載速度（需兼容性檢查）。
