🌐 小白用 AI 做网页：先懂"造人逻辑"，再说一句话就够
分类：做网站 · 全流程实操
整理自 B 站 UP 主「秋芝2046」《用AI做一切网页！AI编程太爽了～【小白教程】》（BV18PXCYyEbt）。本站做了要点提炼与改写。
先把网页理解成"女娲造人"
做网页和造人是同构的三步：
- 捏结构 = HTML：先决定"几条腿、有没有脑袋"。网页就是一个大盒子套无数小盒子，上一块、下一块、中间一块。
- 捏外观 = CSS：腿是细长还是圆球、脑袋是圆是尖——也就是每个盒子的宽高、颜色、间距。
- 吹一口气 = JS：让小人睁眼、张嘴、会互动——网页里"点这里就怎样"的交互，都归 JS 管。
HTML 文件其实跟写文档一样：记事本写一段文字，后缀改成 .html，双击就能用浏览器打开。但浏览器需要"标签"才知道怎么渲染——p 是段落、img 是图片、h1 是一级标题、a 是超链接，就像给书名打上书名号。标签不用背，随手问 AI 一句"常用 HTML 标签有哪些"就够了。
CSS 和 JS 的最小认知
样式最原始的写法是直接写在标签里，比如给盒子加"50 像素实线红色边框"。样式多了就集中到 head 里的 style 块。JS 则是给动作起名字：按钮上写 onclick="playGame()"，意思是"被点击时执行 playGame 这个函数"，函数里用随机数抽一条惩罚——有时候编程就是这么简单。
顺带一个"看穿别人网页"的小技巧：任意网页右键 → 检查，就能看到它大盒子套小盒子的结构，点选某个区域还能定位到对应代码，甚至直接在浏览器里改文字、删图片（只改你本地的显示，刷新即还原）。这是小白理解网页最快的途径。
实战：豆包电脑版一句话生成"随机喝酒游戏"
视频里选的是豆包电脑版的 AI 编程功能，理由对小白很实际：免费不限量、能直接渲染 HTML 页面、能运行 Python、能生成和展开多文件项目，还能把代码圈起来随时提问。
- 打开豆包电脑版，选择「AI 编程」；
- 只说一句："写一个随机喝酒游戏的页面"，它就开始生成，点一下就能玩；
- 点开代码对照刚才的知识：head 里放的是元信息和样式，body 里其实只有三样东西——一个 h1 标题、一个 button 按钮、一个动态显示结果的 div；script 标签里存着惩罚清单和 playGame 函数。
提示词四要素：功能 + 结构 + 样式 + 交互
只说一句话生成的页面往往简陋，因为那句话只定义了"功能"。想让成品好看好用，把剩下三类补全：
做一个随机喝酒游戏网页。 结构：顶部写标题"不醉不归"，中间是大号随机游戏区，页脚放一句温馨提示。 样式：霓虹渐变色、赛博朋克风。 交互：点击按钮随机抽一条惩罚，每抽出一条都触发一个彩蛋动画。
改完不满意就继续提要求多生成几版——历史版本都会保留，随便切换，挑最接近想法的一版，圈起来再精调。
这套思路能做什么
生日贺卡、个人简历、数据报告看板、课堂互动游戏、番茄钟、抽奖页，甚至 PPT 和图文博客。前段时间 Manus 生成的各类页面，本质也是让 AI 写网页；很多公众号里的对比图、解释图、图表，同样是 AI 生成 HTML 页面后截图来的。
本站补充：网页调到满意后，可以让 AI 把它整理成"单个 HTML 文件"，直接发微信给朋友就能打开；想变成真正的网站，挂到 GitHub Pages 或 Cloudflare Pages 这类免费静态托管即可，零成本、不用买服务器。