主题
第2课：用AI做你的第一个网页
今天你要亲手做出一个真正的网页！别紧张，有Claude Code在，你只需要"说"，它来"做"。
⏱️ 预计用时：40 分钟
学习目标
学完这节课，你将能够：
- 理解网页是什么，HTML是怎么回事
- 用Claude Code创建一个属于你自己的个人介绍网页
- 学会在浏览器中打开你做的网页
- 掌握如何让Claude Code帮你修改网页
- 理解"好的提示词"为什么很重要
网页到底是什么？
你每天都在看网页——打开浏览器、搜索东西、刷B站——你看到的每一个页面都是网页。
但你有没有想过，网页是用什么做出来的？
答案是：HTML！
HTML = 积木块
你可以把HTML想象成搭积木。每个积木块在HTML里叫做一个标签（Tag）。不同的积木块有不同的作用：
| 积木块（标签） | 作用 |
|---|---|
<h1> | 大标题，就像文章的题目 |
<p> | 一段文字 |
<img> | 一张图片 |
<button> | 一个按钮 |
<div> | 一个容器，用来把其他积木装在一起 |
这些积木块组合在一起，就变成了你看到的网页！
小贴士
你不需要记住这些标签！Claude Code知道所有的标签。你只需要用中文描述你想要什么，它就会帮你选择合适的积木块来搭建网页。这就是AI编程的魅力！
想了解更多？
HTML长什么样？
一个简单的网页代码大概长这样：
html
<h1>大家好！</h1>
<p>我叫小明，今年13岁。</p>
<p>我喜欢画画和打游戏。</p>看到了吗？每个标签都是一对"尖括号"包裹的英文单词。<h1> 表示开始，</h1> 表示结束。中间的文字就是显示在网页上的内容。
不过现在你完全不用担心这些细节——Claude Code会帮你处理！随着你做的项目越来越多，你会自然而然地看懂这些代码的。
用AI做网页的流程
用Claude Code做网页超级简单，就三步：
第一步：告诉Claude Code你想要什么 → 用中文描述就行
第二步：Claude Code帮你创建文件 → 它会自动写好代码
第三步：在浏览器里打开 → 看看你的作品！就像你告诉一个画家"帮我画一幅春天的风景画"，画家就会帮你画出来。你要做的就是清楚地描述你想要什么。
动手时间：做一个个人介绍网页！
好，废话不多说，开始动手吧！
第一步：创建一个文件夹
首先，我们需要一个地方来放你的网页文件。打开终端，输入：
bash
mkdir my-webpage这行命令的意思是"创建一个叫 my-webpage 的文件夹"。mkdir 就是 "make directory"（创建文件夹）的缩写。
然后进入这个文件夹：
bash
cd my-webpagecd 就是 "change directory"（换到另一个文件夹）的意思。
第二步：启动Claude Code
输入：
bash
claude等它启动好。
第三步：施展魔法咒语！
现在到了最激动人心的时刻——告诉Claude Code你想做什么！
魔法咒语
把下面这段话复制粘贴到Claude Code里：
帮我创建一个个人介绍网页，要求：
1. 页面标题是"关于我"
2. 有一个大标题写我的名字（你先用"你的名字"占位）
3. 有一段自我介绍的文字
4. 列出3个兴趣爱好，每个爱好配一个有趣的emoji
5. 放一张占位图片（用placeholder图片就好）
6. 整体风格要可爱一点，颜色搭配好看
7. 用一个HTML文件就行，CSS写在里面按下回车，然后等待……
Claude Code会开始工作，你会看到它在创建文件、写代码。它可能会问你一些问题（比如确认是否创建文件），你按照提示操作就好。
第四步：打开你的网页！
Claude Code创建完文件后，你需要在浏览器里打开它来看看效果。
在终端里输入：
bash
start index.html小贴士
start 是Windows系统用来打开文件的命令。它会用你的默认浏览器打开 index.html 这个文件。
浏览器会自动弹出来，然后你就能看到你的网页了！
是不是很有成就感？这是你人生中第一个网页！
下面是一个简单网页的例子，你可以看看效果：
让Claude Code帮你修改网页
做出来的网页不太满意？没关系！你可以继续跟Claude Code说，让它帮你修改。
魔法咒语
试试这些修改指令：
改颜色：
把背景颜色改成浅粉色，标题文字改成紫色加内容：
在兴趣爱好下面再加一个"我最喜欢的歌曲"板块，列出3首歌改风格：
给页面加一个好看的渐变背景，从浅蓝色到浅紫色加特效：
给我的名字加一个漂亮的阴影效果，让它看起来更酷每次修改之后，记得刷新浏览器（按 F5 或者 Ctrl+R）来看看最新的效果。
注意
每次让Claude Code修改之前，先想清楚你想要什么效果。一次说一个修改就好，不要一口气提太多要求，这样更容易得到你想要的结果。如果同时说太多，Claude Code可能会搞混或者遗漏一些。
重要概念：怎么写好提示词？
今天我们学到了一个非常重要的技能：写好提示词。
这就像你去餐厅点菜一样：
| 不太好的点法 | 更好的点法 |
|---|---|
| "给我来个网页" | "帮我做一个粉色背景的个人介绍网页，有标题、自我介绍和爱好列表" |
| "好看一点" | "用浅紫色和粉色搭配，字体用圆润的风格" |
| "加点东西" | "在页面底部加一个'联系我'的板块，里面放邮箱地址" |
发现规律了吗？好的提示词有这几个特点：
- 说清楚你要什么：不是"好看的网页"，而是"粉色背景、有标题和爱好列表的个人介绍网页"
- 具体描述细节：颜色、位置、数量、风格……越具体越好
- 一次一个任务：不要把十个修改塞在一句话里
小贴士
你可以把和Claude Code对话想象成跟一个很厉害但是看不到你屏幕的朋友远程协作。它什么都能做，但是它只知道你告诉它的信息。所以你描述得越清楚、越详细，它做出来的东西就越接近你的想象！
今天的项目成果
恭喜你！你今天完成了一个个人介绍网页！
让我们回顾一下你做了什么：
- 创建了一个文件夹来存放项目文件
- 用Claude Code生成了一个完整的HTML网页
- 在浏览器中打开并查看了你的作品
- 学会了让Claude Code帮你修改和美化网页
这些可都是真正的开发者会做的事情！你已经迈出了编程的第一步。
小测验
来检验一下这节课学到了多少吧！
1. HTML 标签 <h1> 和 <p> 分别代表什么？
2. 下列哪个是写好提示词的秘诀？
3. 你做好的 HTML 网页应该怎么查看效果？
挑战任务
现在轮到你发挥创意了！
你的任务是： 给你的个人介绍网页添加至少2个你自己想出来的板块。
可以是：
- "我的愿望清单"——列出你未来想做的事
- "我的好朋友"——介绍一下你的朋友们
- "我最近在看的"——推荐你喜欢的书、动漫或电影
- "我的一天"——描述你典型的一天是怎么度过的
- 或者任何你能想到的创意板块！
魔法咒语
这是一个参考咒语，你可以根据自己的想法修改：
在网页上加一个新板块叫"我的愿望清单"，用好看的卡片样式，每个愿望用一个带图标的小卡片展示，一共列出5个愿望记住，这是你的网页，你想放什么都可以。大胆尝试，做出一个独一无二的页面吧！
下节课预告：我们要让网页动起来！加上动画、点击效果，还要做一个超酷的性格测试小游戏！
留言讨论