起始点
要解决此挑战，我们希望您创建一个简单的网站项目，可以在计算机硬盘驱动器的文件夹内完成，也可以使用在线编辑器，例如 CodePen 或 JSFiddle。您需要的代码大部分已经提供。
-
在计算机的合适位置创建一个名为
splash-page-challenge的新文件夹（或者打开一个在线编辑器并采取必要的步骤创建一个新项目）。 -
将以下 HTML 代码保存在您文件夹中的一个名为
index.html的文件中（或将其粘贴到在线编辑器的 HTML 面板中）。html<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Creepy crawlies!</title> <link href="style.css" rel="stylesheet" /> </head> <body> <header> <nav> <ul> <li><a href="#beetles">Beetles</a></li> <li><a href="#true_bugs">True bugs</a></li> <li><a href="#butterflies_moths">Butterflies and moths</a></li> <li><a href="#flies_mosquitos">Flies and mosquitos</a></li> <li><a href="#bees_wasps_ants">Bees, wasps, and ants</a></li> <li><a href="#spiders">Spiders</a></li> </ul> </nav> <section> <h1>Creepy-crawlies splash page!</h1> <p> In casual language, people use “bugs” to mean all sorts of small creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs) are actually just one order of insects (Hemiptera). This page provides a summary of the main classes or groups of creepy-crawlies. </p> </section> </header> <main> <section id="beetles"> <h2>Beetles (Coleoptera)</h2> <p> Beetles make up the largest order of insects, with more than 350,000 known species. They are recognized by their hardened forewings (elytra) that cover and protect the delicate hindwings and abdomen. This feature gives them a tough, armored look and helps them survive in many environments, from forests to deserts. Beetles can vary greatly in size, color, and habits, ranging from tiny grain beetles to massive stag beetles with impressive jaws. </p> <p> Many beetles play important ecological roles. Some, like ladybugs, are beneficial predators that feed on crop pests such as aphids. Others, such as dung beetles, recycle nutrients by breaking down animal waste. However, certain species like the Colorado potato beetle or Japanese beetle are major agricultural pests. Their diversity and adaptability make beetles one of the most successful groups of insects on Earth. </p> <p class="copyright"> Image by URSchmidt - Own work, CC BY-SA 4.0, <a href="https://commons.wikimedia.org/w/index.php?curid=70137401" >https://commons.wikimedia.org/w/index.php?curid=70137401</a >. </p> </section> <section id="true_bugs"> <h2>True Bugs (Hemiptera)</h2> <p> True bugs include a wide range of insects such as stink bugs, cicadas, aphids, and water striders. Unlike beetles, their forewings are partly hardened and partly membranous, and they possess distinctive piercing-sucking mouthparts. These mouthparts are adapted for feeding on plant sap, blood, or other insects. Many true bugs have scent glands that produce strong odors as a defense mechanism, which is why some are called “stink bugs.” </p> <p> True bugs are found worldwide and occupy a variety of habitats, including plants, soil, and water. While some species are harmless or even beneficial predators, others are destructive agricultural pests that weaken plants by draining their sap. Certain bugs, like bed bugs and kissing bugs, can also affect humans directly by biting or transmitting diseases. </p> <p class="copyright"> Image created by user B. Schoenmakers at Waarneming.nl, a source of nature observations in the Netherlands. - This image is uploaded as image number 29046158 at Waarneming.nl, a source of nature observations in the Netherlands.This tag does not indicate the copyright status of the attached work. A normal copyright tag is still required. See Commons:Licensing for more information. This site now requires authentication, however, the same image and copyright information is also available via <a href="https://world.observation.org/foto/view/29046158" >https://world.observation.org/foto/view/29046158</a > since it uses the same data, CC BY 3.0, <a href="https://commons.wikimedia.org/w/index.php?curid=92410673" >https://commons.wikimedia.org/w/index.php?curid=92410673</a >. </p> </section> <section id="butterflies_moths"> <h2>Butterflies & Moths (Lepidoptera)</h2> <p> Butterflies and moths are some of the most recognizable insects thanks to their large, often colorful wings covered in tiny scales. These scales give their wings shimmering, patterned appearances and are one of the defining traits of this group. Butterflies are usually active by day, while moths are mostly nocturnal, though there are exceptions. Both undergo complete metamorphosis, with a dramatic transformation from caterpillar to winged adult. </p> <p> As caterpillars, they primarily feed on leaves, sometimes causing damage to crops and plants. As adults, butterflies and many moths are important pollinators, transferring pollen as they sip nectar from flowers. They are also ecologically vital as food sources for birds, bats, and other animals. Their beauty and ecological importance make them a favorite group for nature enthusiasts and scientists alike. </p> <p class="copyright"> Image by Didier Descouens - Own work, CC BY-SA 4.0, <a href="https://commons.wikimedia.org/w/index.php?curid=19303857" >https://commons.wikimedia.org/w/index.php?curid=19303857</a >. </p> </section> <section id="flies_mosquitos"> <h2>Flies & Mosquitoes (Diptera)</h2> <p> Flies and mosquitoes belong to the order Diptera, meaning “two wings.” Unlike most other insects, they have only one functional pair of wings; the hind pair has evolved into tiny balancing organs called halteres. This adaptation gives them incredible agility in flight. Their mouthparts vary widely: some species have sponging mouthparts (like houseflies), while others have piercing-sucking ones (like mosquitoes). </p> <p> These insects are among the most ecologically and medically significant. Many flies are decomposers, helping break down waste and recycle nutrients. Mosquitoes, however, are infamous as disease vectors, spreading malaria, dengue, and other illnesses. Despite their negative reputation, flies and mosquitoes are essential in ecosystems, serving as pollinators and as a major food source for many animals. </p> <p class="copyright"> Image created by user Dick Belgers at Waarneming.nl, a source of nature observations in the Netherlands. - This image is uploaded as image number 5105758 at Waarneming.nl, a source of nature observations in the Netherlands.This tag does not indicate the copyright status of the attached work. A normal copyright tag is still required. See Commons:Licensing for more information. CC BY 3.0, <a href="https://commons.wikimedia.org/w/index.php?curid=27659589" >https://commons.wikimedia.org/w/index.php?curid=27659589</a >. </p> </section> <section id="bees_wasps_ants"> <h2>Bees, Wasps, Ants (Hymenoptera)</h2> <p> Bees, wasps, and ants are a diverse group known for their complex behaviors and social structures. Many species live in colonies with distinct roles for workers, queens, and males. Bees are especially famous for pollination, producing honey, and communicating with each other through dances. Wasps are often predators or parasitoids, while ants are skilled builders and cooperative foragers. </p> <p> This group has a huge ecological impact. Bees and wasps contribute to pollination, supporting food crops and wild plants. Some wasps help control pest populations by preying on or parasitizing other insects. Ants are critical soil engineers, aerating the ground and recycling nutrients. While stings and aggressive behaviors make some species feared, they are vital players in natural and agricultural systems. </p> <p class="copyright"> Image by Trounce - Own work, CC BY-SA 2.5, <a href="https://commons.wikimedia.org/w/index.php?curid=1997709" >https://commons.wikimedia.org/w/index.php?curid=1997709</a >. </p> </section> <section id="spiders"> <h2>Spiders (Araneae)</h2> <p> Spiders are arachnids, not insects, and are easily distinguished by their eight legs and lack of antennae. Almost all spiders are predators, using venom and silk to capture prey. Many build intricate webs to trap insects, while others are active hunters that chase or ambush their food. Their silk is an incredibly strong and versatile material, used for webs, egg sacs, or safety lines. </p> <p> Spiders are found in nearly every habitat on Earth, from deserts to caves to homes. While some people fear them, very few species pose a danger to humans. In fact, spiders are highly beneficial because they help control insect populations, including pests. They play a crucial role in balancing ecosystems, making them one of the most important non-insect “bugs” people commonly encounter. </p> <p class="copyright"> Image by AJC ajcann.wordpress.com from UK, CC BY-SA 2.0 <a href="https://creativecommons.org/licenses/by-sa/2.0" >https://creativecommons.org/licenses/by-sa/2.0</a >, via Wikimedia Commons. </p> </section> </main> </body> </html> -
将以下 CSS 代码保存在您文件夹中的一个名为
style.css的文件中（或将其粘贴到在线编辑器的 CSS 面板中）。css/* type */ body { font: 1.2em / 1.5 system-ui; margin: 0 auto; width: 90%; min-width: 800px; max-width: 1200px; } h1 { text-align: center; } .copyright { font-size: 0.8em; } /* nav menu */ ul { padding: 0; list-style-type: none; text-align: center; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } li { flex: auto; } nav a { font-size: 1.2em; padding: 0 20px; } /* General link styles */ a { text-decoration: none; color: red; } a:hover, a:focus { text-decoration: underline; } /* header section layout */ header section { display: grid; grid-template-areas: "heading heading" "text video" "text video"; grid-template-columns: 1fr 2fr; gap: 20px; } h1 { grid-area: heading; } header p { grid-area: text; margin: 0; } video { grid-area: video; width: 100%; border: 1px solid black; } /* image floats */ figure { float: right; margin-left: 20px; padding: 20px; background: orange; border: 1px solid black; } figcaption { font-size: 0.6em; }
稍后，您需要在页面中包含以下 URL。
bee.jpg：“蜜蜂、黄蜂、蚂蚁（膜翅目）”部分的图片。beetle.png：“甲虫（鞘翅目）”部分的图片。butterfly.jpg：“蝴蝶和飞蛾（鳞翅目）”部分的图片。mosquito.jpg：“苍蝇和蚊子（双翅目）”部分的图片。spider.jpg：“蜘蛛（蜘蛛目）”部分的图片。true_bug.jpg：“真虫（半翅目）”部分的图片。bug_video_640.mp4：标题视频。
项目简介
在此次评估中，我们为您提供了一个大部分已完成的关于不同爬行类生物的宣传页。不幸的是，尚未添加任何图片或视频——这是您的任务！您需要添加一些媒体来让页面看起来更有趣。以下子节详细介绍了您需要做的事情。
在标题中添加视频
在 <h1> 正下方，添加一个 <video> 元素，将我们的标题视频嵌入页面。我们希望它能实现以下功能：
- 指定视频的媒体类型。
- 加载时自动播放视频（要在至少某些浏览器中实现此功能，您还需要指定视频应被静音）。
- 无限循环播放，而不是只播放一次。
- 预加载视频内容。
- 不显示任何控件。
添加章节图片
在每种昆虫的详细信息扩展部分，在每个 <h2> 下方，我们希望您添加一个图像元素，嵌入每个章节的相应图片。为每张图片提供一些适当的替代文本，以方便屏幕阅读器用户（以及在图片未加载时）使用，并将每张图片的尺寸限制为 250 x 180。
此外，我们希望您为每张图片添加说明文字；请考虑需要使用哪个容器元素才能在语义上将两者关联起来。不要让说明文字重复替代文本；它应该与替代文本和图片协同工作。
为导航菜单和 <h2> 添加昆虫表情符号或图标
为了增加趣味性，我们希望您在每个导航列表项的开头添加图标，并在每个对应的 <h2> 开头也添加相同的图标。您可以使用嵌入式图片来实现这一点，但直接找到合适的表情符号并将其添加到 HTML 文本本身会更简单。
提示和技巧
- 您可以使用 W3C HTML 验证器来捕获 HTML 中的错误。
- 您无需了解任何 CSS 即可完成此评估；您只需要编辑提供的 HTML 文件。CSS 部分已经为您完成。
示例
以下屏幕截图显示了宣传页应有的外观。如果您在如何实现其中某些功能方面遇到困难，请参阅实时示例下方的解决方案。
点击此处显示解决方案
您完成的 HTML 应该看起来像这样
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creepy crawlies!</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#beetles">🪲 Beetles</a></li>
<li><a href="#true_bugs">🪳 True bugs</a></li>
<li><a href="#butterflies_moths">🦋 Butterflies and moths</a></li>
<li><a href="#flies_mosquitos">🦟 Flies and mosquitos</a></li>
<li><a href="#bees_wasps_ants">🐝 Bees, wasps, and ants</a></li>
<li><a href="#spiders">🕷️ Spiders</a></li>
</ul>
</nav>
<section>
<h1>Creepy-crawlies splash page!</h1>
<video
src="https://mdn.github.io/shared-assets/videos/learn/bug_video_640.mp4"
type="video/mp4"
autoplay
loop
muted
preload="auto"></video>
<p>
In casual language, people use “bugs” to mean all sorts of small
creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs)
are actually just one order of insects (Hemiptera). This page provides
a summary of the main classes or groups of creepy-crawlies.
</p>
</section>
</header>
<main>
<section id="beetles">
<h2>🪲 Beetles (Coleoptera)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/beetle.png"
alt="A black six-legged beetle with a shield-shaped body and long antennae"
width="250"
height="180" />
<figcaption>A shiny, black beetle.</figcaption>
</figure>
<p>
Beetles make up the largest order of insects, with more than 350,000
known species. They are recognized by their hardened forewings
(elytra) that cover and protect the delicate hindwings and abdomen.
This feature gives them a tough, armored look and helps them survive
in many environments, from forests to deserts. Beetles can vary
greatly in size, color, and habits, ranging from tiny grain beetles to
massive stag beetles with impressive jaws.
</p>
<p>
Many beetles play important ecological roles. Some, like ladybugs, are
beneficial predators that feed on crop pests such as aphids. Others,
such as dung beetles, recycle nutrients by breaking down animal waste.
However, certain species like the Colorado potato beetle or Japanese
beetle are major agricultural pests. Their diversity and adaptability
make beetles one of the most successful groups of insects on Earth.
</p>
<p class="copyright">
Image by URSchmidt - Own work, CC BY-SA 4.0,
<a href="https://commons.wikimedia.org/w/index.php?curid=70137401"
>https://commons.wikimedia.org/w/index.php?curid=70137401</a
>.
</p>
</section>
<section id="true_bugs">
<h2>🪳 True Bugs (Hemiptera)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/true_bug.jpg"
alt="A green, six-legged beetle with fairly long antennae and stripy markings"
width="250"
height="180" />
<figcaption>A green stripey bug.</figcaption>
</figure>
<p>
True bugs include a wide range of insects such as stink bugs, cicadas,
aphids, and water striders. Unlike beetles, their forewings are partly
hardened and partly membranous, and they possess distinctive
piercing-sucking mouthparts. These mouthparts are adapted for feeding
on plant sap, blood, or other insects. Many true bugs have scent
glands that produce strong odors as a defense mechanism, which is why
some are called “stink bugs.”
</p>
<p>
True bugs are found worldwide and occupy a variety of habitats,
including plants, soil, and water. While some species are harmless or
even beneficial predators, others are destructive agricultural pests
that weaken plants by draining their sap. Certain bugs, like bed bugs
and kissing bugs, can also affect humans directly by biting or
transmitting diseases.
</p>
<p class="copyright">
Image created by user B. Schoenmakers at Waarneming.nl, a source of
nature observations in the Netherlands. - This image is uploaded as
image number 29046158 at Waarneming.nl, a source of nature
observations in the Netherlands.This tag does not indicate the
copyright status of the attached work. A normal copyright tag is still
required. See Commons:Licensing for more information. This site now
requires authentication, however, the same image and copyright
information is also available via
<a href="https://world.observation.org/foto/view/29046158"
>https://world.observation.org/foto/view/29046158</a
>
since it uses the same data, CC BY 3.0,
<a href="https://commons.wikimedia.org/w/index.php?curid=92410673"
>https://commons.wikimedia.org/w/index.php?curid=92410673</a
>.
</p>
</section>
<section id="butterflies_moths">
<h2>🦋 Butterflies & Moths (Lepidoptera)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/butterfly.jpg"
alt="A butterfly with large black and orange wings"
width="250"
height="180" />
<figcaption>A typical butterfly.</figcaption>
</figure>
<p>
Butterflies and moths are some of the most recognizable insects thanks
to their large, often colorful wings covered in tiny scales. These
scales give their wings shimmering, patterned appearances and are one
of the defining traits of this group. Butterflies are usually active
by day, while moths are mostly nocturnal, though there are exceptions.
Both undergo complete metamorphosis, with a dramatic transformation
from caterpillar to winged adult.
</p>
<p>
As caterpillars, they primarily feed on leaves, sometimes causing
damage to crops and plants. As adults, butterflies and many moths are
important pollinators, transferring pollen as they sip nectar from
flowers. They are also ecologically vital as food sources for birds,
bats, and other animals. Their beauty and ecological importance make
them a favorite group for nature enthusiasts and scientists alike.
</p>
<p class="copyright">
Image by Didier Descouens - Own work, CC BY-SA 4.0,
<a href="https://commons.wikimedia.org/w/index.php?curid=19303857"
>https://commons.wikimedia.org/w/index.php?curid=19303857</a
>.
</p>
</section>
<section id="flies_mosquitos">
<h2>🦟 Flies & Mosquitoes (Diptera)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/mosquito.jpg"
alt="A hairy flying insect with long legs"
width="250"
height="180" />
<figcaption>A mosquito.</figcaption>
</figure>
<p>
Flies and mosquitoes belong to the order Diptera, meaning “two wings.”
Unlike most other insects, they have only one functional pair of
wings; the hind pair has evolved into tiny balancing organs called
halteres. This adaptation gives them incredible agility in flight.
Their mouthparts vary widely: some species have sponging mouthparts
(like houseflies), while others have piercing-sucking ones (like
mosquitoes).
</p>
<p>
These insects are among the most ecologically and medically
significant. Many flies are decomposers, helping break down waste and
recycle nutrients. Mosquitoes, however, are infamous as disease
vectors, spreading malaria, dengue, and other illnesses. Despite their
negative reputation, flies and mosquitoes are essential in ecosystems,
serving as pollinators and as a major food source for many animals.
</p>
<p class="copyright">
Image created by user Dick Belgers at Waarneming.nl, a source of
nature observations in the Netherlands. This image is uploaded as
image number 5105758 at Waarneming.nl, a source of nature observations
in the Netherlands. This tag does not indicate the copyright status of
the attached work. A normal copyright tag is still required. See
Commons:Licensing for more information. CC BY 3.0,
<a href="https://commons.wikimedia.org/w/index.php?curid=27659589"
>https://commons.wikimedia.org/w/index.php?curid=27659589</a
>.
</p>
</section>
<section id="bees_wasps_ants">
<h2>🐝 Bees, Wasps, Ants (Hymenoptera)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/bee.jpg"
alt="A furry black and yellow striped flying insect with six legs"
width="250"
height="180" />
<figcaption>A bumblebee.</figcaption>
</figure>
<p>
Bees, wasps, and ants are a diverse group known for their complex
behaviors and social structures. Many species live in colonies with
distinct roles for workers, queens, and males. Bees are especially
famous for pollination, producing honey, and communicating with each
other through dances. Wasps are often predators or parasitoids, while
ants are skilled builders and cooperative foragers.
</p>
<p>
This group has a huge ecological impact. Bees and wasps contribute to
pollination, supporting food crops and wild plants. Some wasps help
control pest populations by preying on or parasitizing other insects.
Ants are critical soil engineers, aerating the ground and recycling
nutrients. While stings and aggressive behaviors make some species
feared, they are vital players in natural and agricultural systems.
</p>
<p class="copyright">
Image by Trounce - Own work, CC BY-SA 2.5,
<a href="https://commons.wikimedia.org/w/index.php?curid=1997709"
>https://commons.wikimedia.org/w/index.php?curid=1997709</a
>.
</p>
</section>
<section id="spiders">
<h2>🕷️ Spiders (Araneae)</h2>
<figure>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/crawlies/spider.jpg"
alt="A black bodied spider with eight legs, feelers, and jaws"
width="250"
height="180" />
<figcaption>A spider.</figcaption>
</figure>
<p>
Spiders are arachnids, not insects, and are easily distinguished by
their eight legs and lack of antennae. Almost all spiders are
predators, using venom and silk to capture prey. Many build intricate
webs to trap insects, while others are active hunters that chase or
ambush their food. Their silk is an incredibly strong and versatile
material, used for webs, egg sacs, or safety lines.
</p>
<p>
Spiders are found in nearly every habitat on Earth, from deserts to
caves to homes. While some people fear them, very few species pose a
danger to humans. In fact, spiders are highly beneficial because they
help control insect populations, including pests. They play a crucial
role in balancing ecosystems, making them one of the most important
non-insect “bugs” people commonly encounter.
</p>
<p class="copyright">
Image by AJC ajcann.wordpress.com from UK, CC BY-SA 2.0
<a href="https://creativecommons.org/licenses/by-sa/2.0"
>https://creativecommons.org/licenses/by-sa/2.0</a
>, via Wikimedia Commons.
</p>
</section>
</main>
</body>
</html>