认识专业AI编程工具 Trae · 必做任务 + 选做任务 + 思考题 + 结业检查 + 提示词
对照以下每一项，确认自己是否掌握。打勾的越多，说明你学得越扎实。
恭喜你完成第三课！你已经安装了专业AI编程工具，能用Builder模式让AI自动帮你做网页了。这是从"聊天复制粘贴"到"真正AI编程"的重要一步。下节课我们会用Trae做一个更完整的项目，继续加油！
使用方法：复制模板 → 发给Trae里的AI →（括号里的内容换成你自己的）
帮我做一个个人介绍网页，要求如下： 1. 用HTML+CSS+JavaScript实现，页面要好看、现代、简洁 2. 页面包含以下部分： - 顶部：名字和一句简短的自我介绍 - 关于我：一段自我介绍文字 - 技能/兴趣：几个标签卡片 - 联系方式：邮箱或微信 3. 设计要求： - 背景用渐变色，整体风格干净 - 内容居中显示 - 卡片有圆角和阴影 - 按钮和链接有悬停效果 - 在手机上也能正常显示 4. 先用占位内容（比如"你的名字""一句话介绍自己"），我之后会替换 5. 请直接创建文件并运行项目让我看到效果
请把网页内容改成我的真实信息： - 名字改成：[你的名字或昵称] - 一句话介绍改成：[比如"一个正在学AI的水果店老板"] - 关于我改成：[写一段你自己的介绍，2-3句话就行] - 技能兴趣改成：[比如"卖水果、研究AI、拍短视频"] - 联系方式改成：[你的邮箱或微信号]
"把背景颜色改成深蓝色系" "标题再大一点" "加一个'我在学什么'板块" "把卡片颜色换成绿色系" "加一个回到顶部的按钮" "加一个深色/浅色模式切换按钮" "给页面加入场动画效果" "加一个头像区域，用圆形占位图"
请根据这张截图，用HTML和CSS还原这个页面。要求： 1. 尽量还原截图中的布局、颜色、字体、间距 2. 用一个HTML文件实现，CSS写在style标签里 3. 页面要响应式，在手机上也能正常显示 4. 按钮和链接要有悬停效果 5. 不需要真实功能，只需要界面看起来一样
给这个页面加上交互功能： 1. 按钮点击有反馈效果 2. 导航栏点击可以滚动到对应区域 3. 加一个简单的表单，填写后弹出提示
💡 提示：打开 Trae（Builder模式），粘贴模板，替换[]内容即可使用