Mozilla醒目页面

在这个测验中，我们将测试你对于本模块文章所讨论的技术的掌握程度，让你将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上！

学习本章节的要求:
在开始这个测验之前，你应该了解了 多媒体与嵌入 模块的其他文章.
目的:
测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML 响应式图片技术。
起点
为了开始这次测验，你需要从 mdn-splash-page-start 这个GitHub目录下下载HTML和图片。保存在你本地设备上。

访问 originals 文件夹中不同的图片文件，然后用同样的方法将它们下载到本地。现在，你需要将这些图片文件保存到不同的目录下，因为在这些图片准备好被使用之前，你需要使用图像编辑器来处理这些图片.

注意: 这个示例的 HTML 文件包含一些页面的 CSS 样式。你不需要去碰 CSS 的内容，而只是 元素中的 HTML 部分，只要你插入了正确的标记，样式就会正确显示。

项目概要
在这个测验中，我们为你呈现了一个接近完成了的 Mozilla醒目页面，旨在说明一些关于Mozilla的有趣的事情，以及提供一些更一步的资源链接。但目前还没有添加任何视频或图片，这份工作就交给你了！你需要添加一些图片、视频等多媒体元素，好让页面变得更漂亮和更有意义。下一小节详细描述了你需要做的工作：

准备图片
使用你最爱的图片编辑器，创建下面几张图片的 400px 宽的版本和 120px 宽的版本：

firefox_logo-only_RGB.png
firefox-addons.jpg
mozilla-dinosaur-head.png
给它们取个有意义的名字，例如firefoxlogo400.png 和firefoxlogo120.png。

这些图片将和 mdn.svg 一起作为further-info区内资源链接的图标和网站页眉的火狐图标。将这些图片副本保存在与 index.html文件的同一个目录下。

接着，创建一个 1200px 宽的 red-panda.jpg风景图片版本，和一个 600px 宽的肖像版本，用来显示更近镜头下的熊猫. 同样地，为它们取一个你可以轻松分辨出来的名字. 将它们的副本保存在与 index.html文件相同的目录下。

注意：你应该在看起来还行的前提下尽量优化 JPG 和 PNG 图片的大小，tinypng.com为此提供了很好的服务。

为 header 添加一个图标
在

元素中添加一个 元素，嵌入一个小尺寸版本的火狐图标。

为主 article 添加一个视频
就在

元素中（开放标签下面），嵌入一个 Bilibili 视频（https://www.bilibili.com/video/BV1rs411d7hC?p=2），使用 Bilibili 生成嵌入代码。视频的宽度应该是 400px。

为 further info 的链接添加响应式图片
在further-info类的

里你会看到四个 元素，每个都指向一个有趣的、关于 Mozilla 的页面。为了完成这一部分，你需要在每个 元素里插入一个 元素，需要包含合适的 src，alt，srcset 和 sizes 属性。

我们希望每张图片（除了某个本身就是响应式的）在浏览器的视口的宽度小于等于480px时使用的120px宽的图片，其他情况下选择400px 的版本.

确保正确的链接匹配了正确的图片！

注意: 为了正确的测试 srcset/sizes 示例，你需要把你的网站上传到服务器（使用 Github pages 是一个简单免费的方法），访问服务器上的网页，你就可以使用浏览器开发者工具来测试它们是否正常工作，如 响应式图片：有用的开发工具中所说

一张小熊猫的艺术照
在red-panda类的

中，我们希望插入一个元素，在视口宽度小于等于600px时使用那张比较小的纵向的熊猫图片，在其他情况下则使用大的横向的图片。