Mozilla 欢迎页面

在本评估中，我们将测试您对本模块文章中讨论的一些技术的了解，让您向一个关于 Mozilla 的时髦欢迎页面添加一些图像和视频！

先决条件	在尝试本评估之前，您应该已经完成了本模块中的所有文章。
目标	测试有关在网页、框架和 HTML 响应式图像技术中嵌入图像和视频的知识。

起点

要开始此评估，您需要获取 GitHub 上 mdn-splash-page-start 目录中提供的 HTML 和所有图像。将 index.html 的内容保存在本地驱动器上的名为 index.html 的文件中，位于一个新目录中。然后将 pattern.png 保存在同一目录中（右键单击图像以获取保存选项）。

访问 originals 目录中的不同图像并以相同的方式保存它们；您现在需要将它们保存在不同的目录中，因为您需要使用图形编辑器操作（其中一些）它们，然后才能使用它们。

或者，您可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。

注意：示例 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 区域内链接到更多资源的图标。您还将在站点标题中链接到 Firefox 徽标。将所有这些的副本保存在与 index.html 相同的目录中。

接下来，创建 red-panda.jpg 的 1200px 宽横向版本和 600px 宽纵向版本，该版本更近距离地显示熊猫。同样，为它们命名一些有意义的东西，以便您可以轻松识别它们。将这两个版本的副本保存在与 index.html 相同的目录中。

注意：您应该优化您的 JPG 和 PNG 图像以使它们尽可能小，同时仍然看起来不错。tinypng.com 是轻松完成此操作的绝佳服务。

向标题添加徽标

在 <header> 元素内，添加一个 <img> 元素，该元素将在标题中嵌入 Firefox 徽标的小版本。

向主要文章内容添加视频

就在 <article> 元素内（在开始标签下方），嵌入位于 https://www.youtube.com/watch?v=ojcNcvb1olg 的 YouTube 视频，使用相应的 YouTube 工具生成代码。视频宽度应为 400px。

向更多信息链接添加响应式图像

在类为 further-info 的 <div> 内，您会发现四个 <a> 元素 — 每个元素都链接到一个有趣的与 Mozilla 相关的页面。要完成本节，您需要在每个元素内插入一个 <img> 元素，其中包含适当的 src、alt、srcset 和 sizes 属性。