网页入门 · 专题 01
AI 小伙伴与第一张网页
个人 AI 名片编辑器。让学生把‘我想有一个网页’拆成目标用户、页面区块和验收标准。
作品工作台:个人 AI 名片编辑器
输入昵称和兴趣,点击更新就能看到自己的名片。 这是一个可直接操作的离线小作品,用来验证提示词和代码修改。
先操作作品,再把结果写进测试表。
小创作家
我正在学习:画画、做游戏
提示词版本对比
帮我做一个好看的个人介绍网站,里面有我的名字、兴趣和一个可以点击的按钮。请直接给我完整的 HTML 代码,我复制到 index.html 就能打开。
帮我做一个适合 10 岁学生的个人网站。我叫小宇,喜欢画画、做小游戏和学英语,想给同学看。页面要有自我介绍、兴趣、正在学习的内容和一个打招呼按钮。请给我完整的 HTML 代码,复制后就能打开,也不要放真实的联系方式。
帮我把我的个人网站做得更完整一点。我是 10 岁学生小宇,喜欢画画、做小游戏和学英语。请做成一个能离线打开的 HTML 页面,要有顶部菜单、个人介绍、英语单词站、圆周率计算器、贪吃蛇这三个作品、学习进度和留言区。菜单点了要跳到相应位置,留言提交后显示内容,没写内容时提醒“请先写一句话”,再加一个明暗主题按钮。请把所有代码放在一个 HTML 文件里。
帮我做一个可以交作业的个人网站。我是 10 岁学生小宇,喜欢画画、做小游戏和学英语。网站要有个人介绍、三个作品卡片(英语单词站、圆周率计算器、贪吃蛇)、学习进度、顶部菜单、明暗主题按钮和留言功能。不能使用外部网站、网络图片或真实联系方式,复制成一个 HTML 文件就能打开。做完请自己检查:页面能打开,菜单能跳转,主题按钮有效,输入“我今天完成了网页”后能显示原文,空着提交会提示“请先写一句话”,手机宽度 320px 时不横向滚动,按 Tab 能找到按钮和输入框。如果有问题先修好,再给我完整 HTML 代码和你实际检查的结果。
上面一组是老师整理后的测试版;下面一组保留基础模型原始输出,方便比较提示词和成品之间的差异。
每个独立作品都应打开后实际操作,再把输出差异和验证证据写进学习档案。
学习大纲
- HTML 标签、CSS 颜色与布局、输入与输出
- 让学生把‘我想有一个网页’拆成目标用户、页面区块和验收标准。
- 完成:输入昵称和兴趣,点击更新就能看到自己的名片。
学习过程
- 写需求卡与页面草图
- 依次运行 L0–L3 并记录输出差异
- 修改一个颜色或布局变量
- 测试按钮和空值边界
- 在桌面和手机宽度测试
实验与反思
- L0 只说‘好看’时,AI 自己做了哪些假设?
- 加入年龄、受众和验收标准后,返工次数有什么变化?
反思出口卡
哪个提示词改动最有效?AI 哪一点需要验证?你自己新增了什么规则?下一次只改一个变量,你会选什么?