多媒体和嵌入

在开始本模块之前，您应该对 HTML 的基础知识有合理的了解，如之前在HTML 简介中所述。如果您尚未学习过此模块（或类似内容），请先学习，然后再回来！

本模块包含以下文章，它们将带您了解在网页上嵌入多媒体内容的所有基础知识。

HTML 中的图像

还有其他类型的多媒体需要考虑，但从简单的<img>元素开始是合理的，该元素用于在网页中嵌入简单的图像。在本文中，我们将更深入地了解如何使用它，包括基础知识、使用<figure>添加标题注释，以及它与 CSS 背景图像的关系。

视频和音频内容

接下来，我们将了解如何使用 HTML <video> 和 <audio> 元素在页面上嵌入视频和音频，包括基础知识、向不同浏览器提供对不同文件格式的访问权限、添加字幕和隐藏式字幕，以及如何为旧版浏览器添加后备方案。

从 <object> 到 <iframe> — 其他嵌入技术

在这一点上，我们想稍微偏离一下，看看几个允许您将各种内容类型嵌入网页中的元素：<iframe>、<embed> 和 <object> 元素。<iframe> 用于嵌入其他网页，另外两个允许您嵌入外部资源，例如 PDF 文件。

向 Web 添加矢量图形

矢量图形在某些情况下非常有用。与 PNG/JPG 等常规格式不同，它们在放大时不会失真/像素化——它们在缩放时可以保持平滑。本文向您介绍了矢量图形是什么以及如何在网页中包含流行的SVG格式。

响应式图像

在本文中，我们将学习响应式图像的概念——在具有截然不同的屏幕尺寸、分辨率和其他此类功能的设备上都能正常工作的图像——并了解 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备上的性能。响应式图像只是响应式设计的一部分，这是您将来需要学习的 CSS 主题。

以下评估将测试您对以上指南中涵盖的材料的理解。

Mozilla 启动页面

在本评估中，我们将测试您对本模块文章中讨论的一些技术的了解，让您将一些图像和视频添加到一个关于 Mozilla 的有趣首页中！

在图像顶部添加热图

图像地图提供了一种机制，可以使图像的不同部分链接到不同的位置。（想象一下，一张地图链接到您单击的每个不同国家/地区的更多信息。）这种技术有时可能很有用。

Web 素养基础 II

一个优秀的 Mozilla 基金会课程，探讨并测试了本多媒体和嵌入模块中讨论的一些技能。更深入地了解网页创作、可访问性设计、资源共享、使用在线媒体和开放式工作（意味着您的内容可供他人自由使用和共享）的基础知识。