用 AI 搭一个 HTML 网页（Win11 小白版）

你会做出什么：一个能在浏览器里打开的网页，有标题、有颜色、有按钮，点一下会弹出”你好”。 你需要什么：一台 Win11 电脑 + 30 分钟 + 一颗照做的心。 你不需要：任何编程基础。

0. 先看成品长啥样

跟着本教程做完，你会得到这样一个文件 my-first-page.html，双击就能在浏览器里打开：最终成品

▲ 截图占位：浏览器打开的成品页，能看到标题、淡蓝背景、红色按钮 整个过程只需要 4 步：

装环境

装一个 AI 编程工具（约 10 分钟）

说需求

用大白话告诉 AI 你要什么（约 2 分钟）

保存代码

把 AI 给的代码存成 .html 文件（约 3 分钟）

双击打开

用浏览器看效果（约 1 分钟）

1. 装环境（10 分钟）

目标：装上 TRAE（一个对小白最友好的国产 AI 编程工具），它是免费的，自带 AI 对话框。

1.1 下载 TRAE

打开浏览器（推荐 Win11 自带的 Edge），在地址栏输入：
https://www.trae.ai
点页面上的 「下载 for Windows」 按钮。

▲ 截图占位：TRAE 官网首页，红框圈出”下载 for Windows”按钮

浏览器左下角会出现下载进度，等它下载完（约 200 MB，几分钟）。

1.2 安装 TRAE

下载完成后，双击左下角那个 .exe 文件（或者去 下载 文件夹里找）。
弹出「用户账户控制」窗口，问”是否允许此应用对你的设备进行更改”，点 「是」。
一路点 「下一步」→「我同意」→「安装」→「完成」。

▲ 截图占位：TRAE 安装向导的”安装”按钮界面

小白常问：装在哪个盘？默认 C 盘就行，不用改。改错了反而麻烦。

1.3 第一次打开

桌面出现 TRAE 图标，双击打开。
第一次会问你是否登录，可以选 「跳过」（不登录也能用 AI 基础功能）。
界面主题随你选（深色 / 浅色都行），点 「开始」。

▲ 截图占位：TRAE 首次启动的欢迎界面 看到主界面就算成功：左边是文件列表，右边是空白的代码区，右下角或侧边栏有一个 AI 对话框——接下来全靠它。主界面标注

▲ 截图占位：TRAE 主界面，用箭头标出”AI 对话框”的位置

2. 说需求（2 分钟）

目标：用大白话告诉 AI 你想要什么，让它给你写出代码。

2.1 找到 AI 对话框

在 TRAE 主界面，按 快捷键 Ctrl + I，或者点右侧的 AI 图标，会弹出一个对话框。

2.2 复制粘贴这段提示词

把下面这段话完整复制，粘贴到 AI 对话框里，按回车：

帮我写一个 HTML 网页，要求：
网页标题叫"我的第一个网页"
背景是淡蓝色
页面正中间有一行大字，写"Hello, World!"
大字下面放一个红色按钮，按钮上写"点我"
点击按钮时，弹出一个提示框，写"你好！这是我的第一个网页"
把所有代码放在同一个 HTML 文件里，我可以直接保存为 .html 用浏览器打开

2.3 等 AI 出代码

按回车后，AI 会”思考”几秒钟，然后哗啦啦输出一段代码（大约 30~50 行）。 AI 生成代码

▲ 截图占位：AI 对话框中正在输出代码的界面

小白常问：AI 没反应 / 报错怎么办？

检查网络是否连接
重试一次（再按一次回车）
还不行就关掉 TRAE 重开

3. 保存代码（3 分钟）

目标：把 AI 给的代码原样保存成 .html 文件。

3.1 让 AI 帮你存（最简单）

直接在 AI 对话框里再说一句：

把上面的代码保存到一个叫 my-first-page.html 的文件里，
保存位置放在桌面，方便我找到

AI 会自动帮你创建文件，并告诉你保存路径。保存成功提示

▲ 截图占位：AI 对话框显示”文件已保存到桌面/my-first-page.html”

3.2 手动保存（备选方法）

如果 AI 没自动保存，也可以手动：

在 TRAE 左上角点 「文件」→「新建文件」
把 AI 给的代码整段复制粘贴进去
按 Ctrl + S 保存，文件名输入 my-first-page.html
保存位置选 「桌面」

文件名后缀必须是 .html，不是 .txt！如果保存后看到文件图标是记事本样子，说明后缀错了，需要重命名把 .txt 改成 .html。

▲ 截图占位：Win11 文件资源管理器中右键重命名，把 .txt 改成 .html

4. 双击打开（1 分钟）

目标：在浏览器里看到你的网页！

回到桌面，找到 my-first-page.html 文件
双击它
系统会自动用默认浏览器（Edge / Chrome）打开

▲ 截图占位：Win11 桌面，鼠标双击 html 文件 看到下面的画面就大功告成：

整个页面是淡蓝色
中间有大字 “Hello, World!”
下面有个红色按钮
点按钮，弹出”你好！这是我的第一个网页”

▲ 截图占位：浏览器中实际打开的效果

5. 改一改更漂亮（10 分钟，可选）

目标：学会怎么”继续跟 AI 对话”修改网页。

网页出来了，但想换个颜色？想加个图片？想改字体？不用自己改代码，继续跟 AI 说就行。

5.1 常用提示词模板

你想做什么	跟 AI 说
换背景色	`把背景色改成浅绿色`
换字体	`把字体改成微软雅黑，标题再大一点`
加图片	`在标题下面加一张猫咪图片，用 https://placekitten.com/400/300 这个链接`
加新按钮	`在原来的按钮旁边再加一个蓝色按钮，写"关于我"`
让按钮居中	`把所有内容都居中显示，左右留白对称`

5.2 改完看效果

每次 AI 改完代码，保存文件（Ctrl + S），然后回到浏览器按 F5 刷新页面，就能看到新效果。修改前后对比

▲ 截图占位：左右对比，改前 vs 改后

6. 常见问题 FAQ

Q1: 双击 .html 文件没反应 / 用记事本打开了？

原因：文件后缀错了，变成了 .txt。解决：右键文件 → 重命名 → 把 .txt 改成 .html。Win11 默认隐藏后缀，需要先在文件资源管理器里点 「查看」→「显示」→「文件扩展名」 打勾。

Q2: AI 输出的代码我看不懂，是不是要学编程？

不用。本教程的核心思想就是”看不懂也能用”。你只需要：

把 AI 给的代码整段复制保存
双击打开看效果
不满意就继续跟 AI 说”我要 XX 样” 等你做出 3~5 个网页后，自然而然会看懂一些。

Q3: 网页做好了，怎么发给别人看？

方法 1（最简单）：把 my-first-page.html 文件用微信/QQ 发给朋友，对方双击就能打开。 方法 2（在线访问）：把文件传到 GitHub Pages / Vercel / Cloudflare Pages 等静态托管，会得到一个网址，任何人都能访问。这超出了小白范围，可参考本仓库 solutions/ 目录的部署教程。

Q4: AI 写到一半不写了，代码不全怎么办？

在对话框里补一句：继续，把剩下的代码写完。AI 会接着上次的输出继续。

Q5: 我的 TRAE 没有 AI 对话框？

检查是否登录了账号（部分版本需要登录才能用 AI）
试试快捷键 Ctrl + I 或 Ctrl + L
菜单栏找 「AI」→「打开对话框」

Q6: 做完这个，下一步学什么？

推荐路线：

跟着本教程改 3 个不同风格的网页（个人主页 / 产品介绍 / 在线简历）
看本仓库的新人任务与成长指南，找一个 good first issue 上手
加入 NEC 社区，看看其他人在做什么 → 社区与活动

7. 总结：你刚刚学会了什么

回到开头看看——你不需要懂 HTML、CSS、JavaScript，也能：

✅ 装一个 AI 编程工具
✅ 用大白话描述需求
✅ 把 AI 的输出变成真实可用的文件
✅ 在浏览器里看效果
✅ 反复迭代改样式

这套”跟 AI 对话解决问题”的思路，不只适用于做网页，也适用于做 PPT、写文档、做数据分析、做小程序……

8. 进阶阅读

跑通这个小白教程后，如果你想走向”用 AI 做更复杂的项目”：

Vibe Coding 高阶手册 —— Loop 流程、FDE 工程师协作逻辑、Skill 体系、Kimi Code /tower 多 agent 实验
Claude Code 官方文档 —— CLI 进阶
NEC Skill 技术库 —— 飞书手册中提到的部分 Skill 已沉淀在这里

接下来的路，看你想往哪走：

做更多网页

看 frontend-design 技能，做更好看的页面

参与 NEC 项目

从 good first issue 开始实战

了解 AI 工具链

看本仓库所有 AI 技能

反馈与改进：本教程是 NEC 社区共建文档。如果你按步骤做不下来、或发现更好的方法，欢迎在 GitHub 提 Issue 或直接 PR 改进。截图占位符位置见 images/learn/build-html-with-ai/，欢迎投稿真实截图替换。

快速开始

新手上路

10 日集训

机构 SIG

视觉与嵌入式

AI 工具

模板与规范

解决方案

用 AI 搭一个 HTML 网页（Win11 小白版）

0. 先看成品长啥样

装环境

说需求

保存代码

双击打开