多媒体和嵌入

到目前为止，我们在本课程中已经学习了很多文本，但是仅使用文本的网络会非常无聊。让我们开始看看如何让网络充满更多有趣的内容！本模块探讨如何使用 HTML 在网页中包含多媒体，包括包含图片的不同方式，以及如何嵌入视频、音频甚至整个网页。

¥We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

先决条件

¥Prerequisites

在开始本模块之前，你应该对 HTML 的基础知识有一定的了解，如前面 HTML 简介中所述。如果你还没有完成此模块（或类似的模块），请先完成它，然后再回来！

¥Before starting this module, you should have a reasonable understanding of the basics of HTML, as previously covered in Introduction to HTML. If you have not worked through this module (or something similar), work through it first, then come back!

注意：如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备，你可以尝试在线编码程序（例如 JSBin 或 Glitch）中的（大部分）代码示例。

¥Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

指南

¥Guides

本模块包含以下文章，将引导你了解在网页上嵌入多媒体的所有基础知识。

¥This module contains the following articles, which will take you through all the fundamentals of embedding multimedia on webpages.

HTML 中的图片: 还有其他类型的多媒体需要考虑，但从用于在网页中嵌入简单图片的不起眼的 <img> 元素开始是合乎逻辑的。在本文中，我们将了解如何更深入地使用它，包括基础知识、使用 <figure> 用标题对其进行注释，以及它与 CSS 背景图片的关系。
视频和音频内容: 接下来，我们将了解如何使用 HTML <video> 和 <audio> 元素在页面上嵌入视频和音频，包括基础知识、为不同浏览器提供对不同文件格式的访问、添加字幕和副标题，以及如何为旧版本添加后备浏览器。
从 <object> 到 <iframe> — 其他嵌入技术: 此时，我们想采取一些横向步骤，看看几个允许你将各种内容类型嵌入到网页中的元素：<iframe>、<embed> 和 <object> 元素。<iframe> 用于嵌入其他网页，另外两个允许你嵌入外部资源，例如 PDF 文件。
将矢量图形添加到 Web: 矢量图形在某些情况下非常有用。与 PNG/JPG 等常规范式不同，它们在放大时不会扭曲/像素化 - 它们在缩放时可以保持平滑。本文向你介绍什么是矢量图形以及如何在网页中包含流行的 SVG 格式。
响应式图片: 在本文中，我们将了解响应式图片的概念（在屏幕尺寸、分辨率和其他此类功能差异很大的设备上运行良好的图片），并了解 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备上的性能。响应式图片只是响应式设计的一部分，未来 CSS 主题供你学习。

评估

¥Assessments

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

¥The following assessment will test your understanding of the material covered in the guides above.

Mozilla 启动页面: 在此评估中，我们将测试你对本模块文章中讨论的一些技术的了解，让你将一些图片和视频添加到有关 Mozilla 的时髦启动页面！

也可以看看

¥See also

在图片顶部添加命中图: 图片映射提供了一种使图片的不同部分链接到不同位置的机制。（想象一下一张地图，它链接到有关你点击的每个不同国家/地区的更多信息。）这种技术有时很有用。
网络素养基础 II: 这是一门优秀的 Mozilla 基础课程，探索和测试多媒体和嵌入模块中讨论的一些技能。深入了解编写网页、设计可访问性、共享资源、使用在线媒体和开放工作（意味着你的内容可供其他人免费使用和共享）的基础知识。