第 1 关 · 你的第一个网页

用 15 分钟做一个个人主页，并在浏览器里把它打开。页面先不用复杂，只要别人能看到你的介绍和联系方式。

先看一个常见场景

阿琳学传媒，之前没有做过网页，也不熟悉网页和网站的区别。

社团招新时，她需要做一个介绍页。她原本准备找人写代码，或者花半天改现成模板。

这次她先把社团名称、活动内容、报名方式和喜欢的颜色写给 AI。20 分钟后，她拿到一个可以打开的页面。链接发到群里后，有 12 个人报名。

她没有从头写 HTML，但页面上放什么、先看到什么、用什么颜色，仍由她决定。

你要造什么

一个个人主页，里面有标题、自我介绍、照片或头像，以及你的联系方式。

别人打开页面后，应该能很快知道你是谁，以及怎样联系你。

动手（15 分钟）

第 1 步：打开 Google AI Studio（2 分钟）

还是上一关那个工具，浏览器打开：

👉 https://aistudio.google.com

登录后，在左侧菜单找到 “Create Prompt”（创建提示词），进入一个新的创作界面。

💡 如果你用的是 Gemini 2.5 Flash 模型，它已经能直接生成网页代码了，不需要装任何软件。

第 2 步：告诉它你想做什么（3 分钟）

在对话框里输入这句话，把【】换成你的信息：

帮我做一个个人主页网页，只需要一个文件 index.html。
要求：
1. 顶部是我的名字【陈小满】和一个简单的介绍
2. 中间是"关于我"，写我喜欢【摄影、徒步、做咖啡】
3. 下面放我的联系方式：【邮箱 chenxiaoman@example.com】
4. 风格：干净、现代、有一点暖色调
5. 所有文字都是中文
6. 输出完整的 HTML 代码

最后一行保留”输出完整的 HTML 代码”。这会要求 AI 直接给出可以保存的完整文件，而不是只解释做法。

第 3 步：拿到代码（3 分钟）

AI 会输出一大段以 <html> 开头、</html> 结尾的代码。

现在不用逐行读懂代码。先确认 AI 给出的是完整代码块，然后全部复制。

找到代码右上角的 “复制” 按钮（Copy），复制整段代码。

第 4 步：把它变成网页（5 分钟）

接下来用下面任一种方式预览：

方法 A（建议新手先用）：在线预览网站

打开 https://htmlpreview.github.io/ 或 https://codepen.io/pen/
把复制的代码粘贴进去
立即看到你的网页！

方法 B：在你自己电脑上打开

打开记事本（Windows）或文本编辑（Mac）
粘贴代码 → 保存
文件名保存为 index.html（注意是 .html 不是 .txt）
双击这个文件，浏览器就会打开

页面打开后，先检查姓名、自我介绍和联系方式有没有写对。

第 5 步：让它变得更好看（2 分钟）

回到 AI Studio，把你新的话发给它：

我觉得颜色有点普通，把主色调换成【深绿色】，
标题字体大一点，加一个【居中】的布局。
重新输出完整的 HTML 代码。

它改完后，重新复制 → 粘贴预览 → 对比前后变化。

如果只改对了一部分，就指出具体位置，例如”标题已经可以，背景颜色还要再深一点”。

记住上一关的三板斧：说清楚 → 看结果 → 不满意就提修改。

你的作品

你的成果是一个可以在浏览器里打开的 index.html 文件。

可以把文件发给朋友，也可以分享方法 A 生成的预览链接。请对方帮你检查文字和联系方式。

分享你的作品

截图你的网页，发到社区，配一句话：

“我的第一个网页可以打开了！没想到我没写一行代码 🤯”

如果有人问怎么做的，把你用过的提示词也一起发给他，比只发截图更有用。

完成后，进入下一关：做一个能处理具体任务的小工具。

这一关你学会了什么

一个简单网页可以放在 index.html 文件里，双击即可用浏览器打开
AI 可以生成第一版代码，你负责核对内容、预览效果并提出修改
暂时看不懂代码也能开始，但每次修改后都要重新打开页面检查

下一关：第 2 关 · 你的第一个小工具