第 3 章

保存、运行，得到一个真实网页

WorkBuddy 给了你一大段代码。现在把它变成双击就能打开的网页。

从代码到网页：三步操作

📋

第 1 步

复制代码
全选 WorkBuddy
给的全部内容

→

💾

第 2 步

保存文件
记事本粘贴后
另存为 .html

→

🌐

第 3 步

双击打开
浏览器里看到
你的主页

在 WorkBuddy 的回复里，找到代码块（通常以 <!DOCTYPE html> 开头，以 </html> 结尾）。

💡 一定要全选

代码里少一个 < 或者多一个 }，页面就可能打不开。用"全选"（Ctrl+A / ⌘+A），不要手动拖动选择。

Windows 和 Mac 操作略有不同：

🪟 Windows

1. 打开"记事本"
2. 粘贴代码
3. 文件 → 另存为
4. 文件名写 个人主页.html
5. 编码选 UTF-8
6. 保存

🍎 Mac

1. 打开"文本编辑"
2. 粘贴代码
3. 格式 → 制作纯文本
4. 文件 → 存储
5. 文件名写 个人主页.html
6. 编码选 Unicode (UTF-8)

⚠️ 常见错误

保存后文件名叫 个人主页.html.txt？这说明文件扩展名被隐藏了。Windows 用户需要在文件夹的"查看"菜单里勾选"文件扩展名"，然后手动删掉 .txt 后缀。

找到刚才保存的 个人主页.html 文件，双击。你的默认浏览器会自动打开它。

你会看到一个有圆形头像、名字、简介和三个按钮的页面——你"写"的第一个网页。

个人主页.html

张三

一个正在学习用 AI 做东西的人

我的 GitHub

给我发邮件

我的微博

问题	原因	解决
打开是空白页	代码没复制全	回到 WorkBuddy，确认从 `<!DOCTYPE>` 到 `</html>` 全部复制
中文显示乱码	保存时编码没选 UTF-8	重新另存为，编码选 UTF-8
样式全乱了	复制时代码被截断	全选复制，手动拖动容易漏
按钮点了没反应	代码有 bug	把代码和描述发给 WorkBuddy："请检查并修复"

到现在为止，你完成了：

这个循环——描述需求 → AI 写代码 → 保存运行——就是 AI 编程的核心。后面所有章节都是在这个循环上加花样。