多媒体与嵌入
我们在这门课程中已经见到了很多文本，但是如果只使用文本，网页就会变得非常无聊。让我们开始学习如何在网页中添加更有趣的内容吧！这个模块将探讨如何用 HTML 在网页中包含多媒体，包括不同的图片插入方式，以及如何嵌入视频、音频，甚至整个网页。
预备知识
指南
本模块包含以下文章，将带你了解在网页上嵌入多媒体所需的所有基础知识。
- HTML 中的图片
-
虽然还有很多其他类型的多媒体要考虑，但是从简单的
<img>元素开始比较符合逻辑，它常常被用来在网页中嵌入简单的图片。在这篇文章中，我们将学习怎样更深入的使用它，包括基础知识，使用<figure>来为图片增加说明，以及它如何关联到 CSS 背景图片。 - 视频和音频内容
-
接下来，我们将学习怎样在我们的页面上用 HTML 的
<video>和<audio>元素来嵌入视频和音频；包括基础知识，向不同的浏览器提供不同文件格式的访问方式，增加标题和副标题，以及增加对过时的浏览器的兼容。 - 从 <object> 到 <iframe>——其他嵌入技术
-
在这一节，我们将来了解一些另辟蹊径的内容，学习一组特殊的元素，你可以用它们在页面中嵌入许多不同类型的内容：
<iframe>、<embed>和<object>元素。<iframe>用来嵌入其他网页，而另外两者可以帮助你嵌入外部资源（例如 PDF 文件）。 - 在页面中添加矢量图像
-
矢量图像在一些特定场景下非常有用。不同于常见的格式（比如 PNG/JPG），它们不会在放大的时候变得扭曲或者显示出像素格——它们可以在缩放时保持光滑。本文将为你介绍矢量图像，以及如何在网页中添加流行的 SVG 格式图像。
- 响应式图片
-
在这篇文章中，我们将学习响应式图片的概念（即能够适应不同屏幕尺寸、分辨率和其他特性的图片），并且了解 HTML 提供了哪些工具来实现它们。这有助于提高不同设备上的性能。响应式图片只是响应式设计的一部分，你会在之后学习到相关 CSS 主题的内容。
测验
以下测验将测试你对上述指南中涵盖的 HTML 基础知识的理解：
- Mozilla 启动页面
-
在这个测验中，我们将测试你对本模块文章中讨论的一些技巧的了解，让你将一些图像和视频添加到一个关于 Mozilla 的时髦的页面！
参见
- 在图像的顶部添加点阵图
-
图像映射提供了一种机制，使图像的不同部分链接到不同的地方（想想地图，链接到有关你点击的每个不同国家的更多信息。）这种技术有时可能是有用的。
- 网络素质基础 2
-
这是一门优秀的 Mozilla 基金会课程，它探索和测试了本多媒体和嵌入模块中讨论的一些技能。深入了解编写网页、设计无障碍、共享资源、使用在线媒体和开放工作（意味着你的内容可以自由地被其他人获取和分享）的基础知识。