> ## Documentation Index
> Fetch the complete documentation index at: https://docs.newenergycoder.club/llms.txt
> Use this file to discover all available pages before exploring further.
# 用 AI 搭一个 HTML 网页（Win11 小白版）
> 0 基础、30 分钟：在 Win11 上用 AI 写出你的第一个网页，含提示词模板与截图占位
> **你会做出什么**：一个能在浏览器里打开的网页，有标题、有颜色、有按钮，点一下会弹出"你好"。
> **你需要什么**：一台 Win11 电脑 + 30 分钟 + 一颗照做的心。
> **你不需要**：任何编程基础。
***
## 0. 先看成品长啥样
跟着本教程做完，你会得到这样一个文件 `my-first-page.html`，双击就能在浏览器里打开：
*▲ 截图占位：浏览器打开的成品页，能看到标题、淡蓝背景、红色按钮*
**整个过程只需要 4 步**：
装一个 AI 编程工具（约 10 分钟）
用大白话告诉 AI 你要什么（约 2 分钟）
把 AI 给的代码存成 `.html` 文件（约 3 分钟）
用浏览器看效果（约 1 分钟）
***
## 1. 装环境（10 分钟）
> 目标：装上 **TRAE**（一个对小白最友好的国产 AI 编程工具），它是免费的，自带 AI 对话框。
### 1.1 下载 TRAE
1. 打开浏览器（推荐 Win11 自带的 Edge），在地址栏输入：
```
https://www.trae.ai
```
2. 点页面上的 **「下载 for Windows」** 按钮。
*▲ 截图占位：TRAE 官网首页，红框圈出"下载 for Windows"按钮*
3. 浏览器左下角会出现下载进度，等它下载完（约 200 MB，几分钟）。
### 1.2 安装 TRAE
1. 下载完成后，**双击** 左下角那个 `.exe` 文件（或者去 `下载` 文件夹里找）。
2. 弹出「用户账户控制」窗口，问"是否允许此应用对你的设备进行更改"，点 **「是」**。
3. 一路点 **「下一步」→「我同意」→「安装」→「完成」**。
*▲ 截图占位：TRAE 安装向导的"安装"按钮界面*
**小白常问**：装在哪个盘？
默认 C 盘就行，不用改。改错了反而麻烦。
### 1.3 第一次打开
1. 桌面出现 TRAE 图标，**双击**打开。
2. 第一次会问你是否登录，可以选 **「跳过」**（不登录也能用 AI 基础功能）。
3. 界面主题随你选（深色 / 浅色都行），点 **「开始」**。
*▲ 截图占位：TRAE 首次启动的欢迎界面*
**看到主界面就算成功**：左边是文件列表，右边是空白的代码区，**右下角或侧边栏有一个 AI 对话框**——接下来全靠它。
*▲ 截图占位：TRAE 主界面，用箭头标出"AI 对话框"的位置*
***
## 2. 说需求（2 分钟）
> 目标：用大白话告诉 AI 你想要什么，让它给你写出代码。
### 2.1 找到 AI 对话框
在 TRAE 主界面，按 **快捷键 `Ctrl + I`**，或者点右侧的 AI 图标，会弹出一个对话框。
### 2.2 复制粘贴这段提示词
把下面这段话**完整复制**，粘贴到 AI 对话框里，按 **回车**：
```
帮我写一个 HTML 网页，要求：
1. 网页标题叫"我的第一个网页"
2. 背景是淡蓝色
3. 页面正中间有一行大字，写"Hello, World!"
4. 大字下面放一个红色按钮，按钮上写"点我"
5. 点击按钮时，弹出一个提示框，写"你好！这是我的第一个网页"
6. 把所有代码放在同一个 HTML 文件里，我可以直接保存为 .html 用浏览器打开
```
### 2.3 等 AI 出代码
按回车后，AI 会"思考"几秒钟，然后哗啦啦输出一段代码（大约 30\~50 行）。
*▲ 截图占位：AI 对话框中正在输出代码的界面*
**小白常问**：AI 没反应 / 报错怎么办？
* 检查网络是否连接
* 重试一次（再按一次回车）
* 还不行就关掉 TRAE 重开
***
## 3. 保存代码（3 分钟）
> 目标：把 AI 给的代码原样保存成 `.html` 文件。
### 3.1 让 AI 帮你存（最简单）
直接在 AI 对话框里再说一句：
```
把上面的代码保存到一个叫 my-first-page.html 的文件里，
保存位置放在桌面，方便我找到
```
AI 会自动帮你创建文件，并告诉你保存路径。
*▲ 截图占位：AI 对话框显示"文件已保存到 桌面/my-first-page.html"*
### 3.2 手动保存（备选方法）
如果 AI 没自动保存，也可以手动：
1. 在 TRAE 左上角点 **「文件」→「新建文件」**
2. 把 AI 给的代码**整段复制**粘贴进去
3. 按 **Ctrl + S** 保存，文件名输入 `my-first-page.html`
4. 保存位置选 **「桌面」**
**文件名后缀必须是 `.html`**，不是 `.txt`！
如果保存后看到文件图标是记事本样子，说明后缀错了，需要重命名把 `.txt` 改成 `.html`。
*▲ 截图占位：Win11 文件资源管理器中右键重命名，把 .txt 改成 .html*
***
## 4. 双击打开（1 分钟）
> 目标：在浏览器里看到你的网页！
1. 回到桌面，找到 `my-first-page.html` 文件
2. **双击它**
3. 系统会自动用默认浏览器（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
**原因**：文件后缀错了，变成了 `.txt`。
**解决**：右键文件 → 重命名 → 把 `.txt` 改成 `.html`。Win11 默认隐藏后缀，需要先在文件资源管理器里点 **「查看」→「显示」→「文件扩展名」** 打勾。
**不用**。本教程的核心思想就是"看不懂也能用"。你只需要：
1. 把 AI 给的代码**整段**复制保存
2. 双击打开看效果
3. 不满意就继续跟 AI 说"我要 XX 样"
等你做出 3\~5 个网页后，自然而然会看懂一些。
**方法 1**（最简单）：把 `my-first-page.html` 文件用微信/QQ 发给朋友，对方双击就能打开。
**方法 2**（在线访问）：把文件传到 GitHub Pages / Vercel / Cloudflare Pages 等静态托管，会得到一个网址，任何人都能访问。这超出了小白范围，可参考本仓库 `solutions/` 目录的部署教程。
在对话框里补一句：`继续，把剩下的代码写完`。AI 会接着上次的输出继续。
* 检查是否登录了账号（部分版本需要登录才能用 AI）
* 试试快捷键 `Ctrl + I` 或 `Ctrl + L`
* 菜单栏找 **「AI」→「打开对话框」**
推荐路线：
1. 跟着本教程改 3 个不同风格的网页（个人主页 / 产品介绍 / 在线简历）
2. 看本仓库的 [新人任务与成长指南](/start-here/first-good-issue)，找一个 `good first issue` 上手
3. 加入 NEC 社区，看看其他人在做什么 → [社区与活动](/community/recommended-groups)
***
## 7. 总结：你刚刚学会了什么
回到开头看看——你不需要懂 HTML、CSS、JavaScript，也能：
* ✅ 装一个 AI 编程工具
* ✅ 用大白话描述需求
* ✅ 把 AI 的输出变成真实可用的文件
* ✅ 在浏览器里看效果
* ✅ 反复迭代改样式
**这套"跟 AI 对话解决问题"的思路，不只适用于做网页，也适用于做 PPT、写文档、做数据分析、做小程序……**
***
## 8. 进阶阅读
跑通这个小白教程后，如果你想走向"用 AI 做更复杂的项目"：
* **[Vibe Coding 高阶手册](/start-here/vibe-coding)** —— Loop 流程、FDE 工程师协作逻辑、Skill 体系、Kimi Code `/tower` 多 agent 实验
* **[Claude Code 官方文档](https://docs.anthropic.com/en/docs/claude-code/getting-started)** —— CLI 进阶
* **[NEC Skill 技术库](/skills/index)** —— 飞书手册中提到的部分 Skill 已沉淀在这里
接下来的路，看你想往哪走：
看 frontend-design 技能，做更好看的页面
从 good first issue 开始实战
看本仓库所有 AI 技能
***
> **反馈与改进**：本教程是 NEC 社区共建文档。如果你按步骤做不下来、或发现更好的方法，欢迎在 GitHub 提 Issue 或直接 PR 改进。截图占位符位置见 `images/learn/build-html-with-ai/`，欢迎投稿真实截图替换。