第一次让AI生成网页

说一句话，AI帮你写出第一个网页

📖知识引入

🗣️需求要说清楚

像点菜一样：「做一个介绍我家小狗豆豆的网页，要有大标题、一段介绍、轻松可爱的风格」。菜名、口味、分量说全，AI一次到位。

🧪工具随你挑

ChatGPT、Claude、Kimi、豆包都能写网页代码；想要更专业就用v0。哪个顺手用哪个，代码质量都不差。

💾保存成文件

AI给的代码要存成一个 .html 文件，就像把菜谱抄进本子。文件名用英文小写，比如 dog.html。

👀双击就能看

保存好的 .html 文件双击一下，浏览器自动打开——你的网页诞生了！不用联网、不用花钱，全在自己电脑上。

🔁不满意就改

「标题再大一点」「背景换成蓝色」——AI会一直耐心改，改100遍也不翻脸。这待遇，人类程序员可给不了你！

💡

对AI提需求像点餐：菜名（做什么）+口味（什么风格）+分量（多复杂）！

<!DOCTYPE html>
<html>
<head>
  <title>豆豆的小天地</title>
</head>
<body>
  <h1>🐕 豆豆的小天地</h1>
  <p>豆豆是一只3岁的柯基，屁股圆圆的，
  最爱吃鸡肉干，最讨厌洗澡。</p>
</body>
</html>

五步做出人生第一个网页：

第1步：打开Claude或ChatGPT 💬

第2步：输入需求（参考模板）：「请帮我写一个介绍我家小狗豆豆的网页，要有大标题、一段介绍文字，风格轻松可爱。」

第3步：复制AI给的代码 📋

第4步：新建文件，粘贴保存为「dog.html」（记得显示文件扩展名）

第5步：双击 dog.html 🎉 浏览器打开——你的网页出现了！

试试这几个进阶需求： ·「标题改成橙色」 ·「加一段豆豆的趣事」 ·「背景加一个爪印图案」

⚠️ 新手常见翻车：把代码存成了 dog.txt 或 dog.docx 浏览器就不认识了——必须是 .html！

第1题：AI给的网页代码应该保存成什么文件？

第2题：保存好的HTML文件怎么在浏览器里打开？

第3题：让AI改代码时，最好怎么说？

第4课完成！继续探索下一课吧 🚀

上一课

第3课

下一课

第5课