当前位置：文江博客知识库简体中文文档 Learn HTML Multimedia_and_embedding Mozilla_splash_page

Mozilla醒目页面 - 学习 Web 开发编辑

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

学习本章节的要求:	在开始这个测验之前，你应该了解了多媒体与嵌入模块的其他文章.
目的:	测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML 响应式图片技术。

起点

为了开始这次测验，你需要从 mdn-splash-page-start 这个GitHub目录下下载HTML和图片。保存在你本地设备上。

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

注意: 这个示例的 HTML 文件包含一些页面的 CSS 样式。你不需要去碰 CSS 的内容，而只是 <body> 元素中的 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 添加一个图标

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

为主 article 添加一个视频

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

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

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