第五章：图像与多媒体

在现代的 Web 开发中，图像和多媒体元素是不可或缺的一部分。它们不仅能够丰富页面的内容，还能够提高用户体验。

5.1 图像 (<img>)

5.1.1 基本用法

图像标签 <img> 是 HTML 中最常用的标签之一。它没有闭合标签，所有的属性都在开始标签内。

<img src="image.jpg" alt="描述文字" />

• **src**：图像的路径或 URL。
• **alt**：替代文本，在图像无法加载时显示。

5.1.2 属性与用法

除了 src 和 alt，<img> 还有其他一些重要的属性。

• **width** 和 **height**：设置图像的宽度和高度。
• **title**：为图像提供额外的信息，当用户将鼠标悬停在图像上时会显示。

<img src="image.jpg" alt="描述文字" width="300" height="200" title="图像标题" />

5.1.3 响应式图像

为了使图像在不同设备上都能良好显示，可以使用 CSS 的 max-width 属性。

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
<img src="image.jpg" alt="描述文字" />

这种方法确保图像不会超过容器的宽度，并且保持其原始比例。

5.2 音频 (<audio>)

5.2.1 基本用法

HTML5 引入了 <audio> 标签，用于在网页中嵌入音频文件。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  您的浏览器不支持 audio 标签。
</audio>

• **controls**：显示音频控件，如播放、暂停、音量控制等。
• **source**：音频文件的路径和格式。

5.2.2 多种格式

为了确保音频可以在所有浏览器中播放，通常需要提供多种格式的音频文件。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  您的浏览器不支持 audio 标签。
</audio>

5.3 视频 (<video>)

5.3.1 基本用法

与 <audio> 类似，HTML5 还引入了 <video> 标签，用于嵌入视频文件。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
  您的浏览器不支持 video 标签。
</video>

• **width** 和 **height**：设置视频的宽度和高度。
• **controls**：显示视频控件，如播放、暂停、音量控制、全屏等。

5.3.2 多种格式

为了确保视频可以在所有浏览器中播放，通常需要提供多种格式的视频文件。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  您的浏览器不支持 video 标签。
</video>

5.3.3 自动播放与循环播放

可以通过 autoplay 和 loop 属性设置视频自动播放和循环播放。

<video width="320" height="240" controls autoplay loop>
  <source src="video.mp4" type="video/mp4" />
  您的浏览器不支持 video 标签。
</video>

总结

本章介绍了 HTML 中如何使用图像和多媒体元素。通过 <img> 标签，你可以轻松地在网页中嵌入图像，并使用 CSS 来实现响应式设计。通过 <audio> 和 <video> 标签，你可以在网页中嵌入音频和视频文件，并提供多种格式以确保兼容性。希望通过本章的学习，你能够熟练掌握图像与多媒体元素的使用，为你的网页增色不少。

---

请在评论区留言讨论或者指正错误。下一章我们将深入探讨表单与输入元素的使用。