# :-: HTML多媒体与嵌入
## 一、课堂任务：
这个模块带你探索如何使用 HTML 在你的网页里如何包含多媒体信息，包含如何用各种方法包含图片，以及如何嵌入视频、音频，甚至是嵌入其他完整的网页。
## 二、课堂设计：
在这份教程中，到目前为止我们已经看到了许多的文字了。真的很多文字。但是网页除了文本之外什么都没有，真的非常无聊，所以，让我们开始看看怎样让网页动起来。用更多有趣的内容！本模块要探索怎样用HTML来让你的网页包含多媒体，包括可以包含图像的不同方式，以及怎样嵌入视频，甚至是整个其他的网页。
### 1、HTML 中的图片
[https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Images\_in\_HTML](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
还有其他类型的多媒体要考虑，但是从低调的 元素开始是符合逻辑的，它常常被用来在网页中嵌入一个简单的图片。在这篇文章中，我们要看看怎样更深入的使用它，包括基础，用标题注解 ，以及怎样把它关联到CSS背景图片。
### 2、视频和音频内容
[https://developer.mozilla.org/zh\_CN/docs/Learn/HTML/Multimedia\_and\_embedding/Video\_and\_audio\_content](https://developer.mozilla.org/zh_CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
接下来，我们将看看怎样在我们的页面上用HTML5的 和元素来嵌入视频和音频；包括基础，提供向不同的浏览器提供不同文件格式的访问方式，增加标题和副标题，以及增加对过时的浏览器的兼容。
### 3、从对象到 iframe — 其他嵌入技术
[https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Other\_embedding\_technologies](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
在这一节，我们将来了解一些另辟蹊径的内容，看一组元素，它们可以让你在页面中嵌入许多不同类型的内容： , 和 元素。 用来嵌入其他网页，而另外两者可以帮助你嵌入 PDF, SVG, 甚至是 Flash — 一种逐渐退出历史舞台的技术，不过也许你还是能时不时的看到它。
### 4、为 Web 新增向量图
[https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Adding\_vector\_graphics\_to\_the\_Web](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
矢量图像在一些特定场景中非常有用。不同于常见的格式，比如PNG/JPG, 它们不会在放大的时候变得扭曲或者显示出像素格——它们可以在缩放时保持光滑。本文将为你介绍什么是矢量图像，以及如何在网页中添加流行的 SVG 格式图像。
### 5、自适应图片
[https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Responsive\_images](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
现在有许多不同的设备类型能够浏览网络 \- 从手机到台式电脑 \- 在现代网络世界中掌握的一个基本概念就是响应式设计。这是指创建可以自动更改其功能以适应不同屏幕尺寸，分辨率等的网页。稍后将在CSS模块中详细介绍这一点，但是现在我们将看看HTML可用于创建响应式图像的工具，包括元素。
## 三、课后作业：
作业：Mozilla 醒目页面
在这个评估中，我们将测试您对本模块文章中讨论的一些技巧的了解，让您将一些图像和视频添加到一个关于Mozilla的时髦的页面！
[https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Mozilla\_splash\_page](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
## 四、教学总结：
