工欲善其事，必先利其器 ｜ 课型：理实一体课 ｜ 建议课时：2节
一个留有"探索空间"的页面：隐藏的文字、可修改的样式，供学生用开发者工具去发现。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>开发者工具体验页</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 640px; margin: 40px auto; padding: 0 20px; color: #1f2a33; }
h1 { color: #123a52; border-bottom: 3px solid #38d6c4; padding-bottom: 8px; }
.card { background: #e7f7f4; border-radius: 12px; padding: 20px; margin: 16px 0; }
.secret { color: #e7f7f4; } /* 隐藏的文字：用开发者工具找到它 */
button { background: #0f8c7f; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-size: 16px; cursor: pointer; }
button:hover { background: #123a52; }
</style>
</head>
<body>
<h1>探索者任务</h1>
<div class="card">
<p>任务一：右键"检查"本页，找到标题对应的HTML标签。</p>
<p>任务二：在Elements面板中把本段文字改成你的名字。</p>
<p>任务三：<span class="secret">恭喜你发现了隐藏文字！</span>想办法让隐藏文字现形。</p>
</div>
<button onclick="console.log('我的第一条Console信息')">点我输出Console信息</button>
<p>打开Console面板，点击按钮看看发生了什么。</p>
</body>
</html>任务目标：独立完成开发环境搭建，并会用开发者工具查看任意网页的结构
| 任务内容与评分 |
|---|
| 任务1：创建名为 my-first-site 的文件夹，内部建立 css、images 两个子文件夹（10分） |
| 任务2：安装VS Code及Live Server扩展，截图扩展列表（20分） |
| 任务3：打开 demo1.html，完成页面中的三个探索任务（40分） |
| 任务4：在Console面板输出自己的名字拼音（10分） |
| 任务5：用Emmet缩写生成一个HTML骨架并保存为index.html（20分） |