PricingLoginStart free
HTML for Kids · 课时

HTML 寻宝游戏

使用 HTML 解开线索并找到隐藏消息

第 2 / 2 课10 个步骤

HTML 寻宝游戏 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 2 节课，共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 2 节课。

开始寻宝

HTML 寻宝游戏

欢迎参加 HTML 寻宝游戏！您的任务是通过解决隐藏在 HTML 代码中的线索，找出隐藏的宝藏。请仔细完成每一步，并修改代码以继续前进。

目标：完成每项任务，找到宝藏！

HTML 寻宝游戏 — 插图 1

设置藏宝图

第 1 步：设置藏宝图

第一条线索隐藏在注释中。打开 HTML 代码，找到这条线索！

以下是初始 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Treasure Hunt</title>
  </head>
  <body>
    <h1>Welcome to the Treasure Hunt!</h1>
    <p>Follow the clues to find the treasure.</p>
    
    <!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
    
  </body>
</html>

添加藏宝图

第 2 步：添加藏宝图

您添加藏宝图了吗？下面是一个示例：

<img src="treasure-map.jpg" alt="Treasure Map" />

收拾工具

第 3 步：收拾工具

要继续进行，请创建一个列表，列出您会带去寻宝的工具。使用 <ul> 和 <li> 标签。

示例：

<ul>
  <li>Compass</li>
  <li>Flashlight</li>
  <li>Map</li>
</ul>

查找更多信息

第 4 步：查找更多信息

使用 <a> 标签添加一个指向寻宝相关网站的链接。

示例：

<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>

最终挑战

第 5 步：最终挑战

宝藏即将属于您！要解锁宝藏，请创建一个按钮，使其在点击后显示隐藏消息。

请参考以下示例：

<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
  Reveal the Treasure
</button>

测试您的页面

第 6 步：测试您的页面

现在您已经添加了所有元素，请测试页面。请确保：

  • 图片能够正确显示。
  • 工具列表可见。
  • 链接会在新标签页中打开网站。
  • 按钮会显示宝藏消息。

如果一切正常，恭喜您——您已经完成了寻宝游戏！

最终宝藏

最终页面可能如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Treasure Hunt</title>
  </head>
  <body>
    <h1>Welcome to the Treasure Hunt!</h1>
    <p>Follow the clues to find the treasure.</p>
    
    <!-- Step 1: Added the treasure map -->
    <img src="treasure-map.jpg" alt="Treasure Map" />
    
    <!-- Step 2: Listed tools for treasure hunting -->
    <h2>My Treasure Hunting Tools</h2>
    <ul>
      <li>Compass</li>
      <li>Flashlight</li>
      <li>Map</li>
    </ul>
    
    <!-- Step 3: Added a useful link -->
    <h2>Learn More</h2>
    <a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
    
    <!-- Step 4: Added the hidden treasure -->
    <h2>Your Treasure</h2>
    <p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
    <button onclick="document.getElementById('hidden-message').style.display='block';">
      Reveal the Treasure
    </button>
  </body>
</html>

寻宝游戏回顾

Great Job!

Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!

HTML 寻宝游戏 — 插图 10
免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
16
课程
35
免费开始学习查看完整课程

常见问题解答

「HTML 寻宝游戏」课时是免费的吗？

是的 — 「HTML 寻宝游戏」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 2 节课。

「HTML 寻宝游戏」这节课中我会学到什么？

使用 HTML 解开线索并找到隐藏消息 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 2 节。

「HTML 寻宝游戏」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML for Kids 课中编写并运行代码吗？

能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 跟着编程：构建简单网页
  2. HTML 寻宝游戏
← 返回 HTML for Kids