代码写了一堆，全躺在编辑器里，家里人问你”你在干嘛”，你答不上来。

上一篇我们写了两个函数，跑通了、输出也对。但你没法把它发给任何人。

今天不一样。我们做一个网页——双击就能在浏览器打开、能发微信给朋友、能截图发朋友圈的真东西。而且——你一行代码都不用手写。

一、一个网页，其实只有三层

先破除误解：网页看着复杂，结构其实简单到离谱。

把网页想象成一个人：

就这三层。 淘宝、微博、公众号后台，拆开都是这三样。

再打个装修比方： HTML 是毛坯房，CSS 是装修，JS 是智能家居。关键认知：只有 HTML 的页面丑但能用；没有 JS 的页面静止但能看。 所以策略是——先让它出来，再让它好看，最后让它会动。

二、准备工作：你只需要两个东西

不用装环境，不用配服务器，不用注册账号。 你只需要：1）一个能写字的地方（记事本、VS Code、Cursor 都行）；2）一个浏览器（Chrome、Edge，你电脑里就有）。

操作只有三步： 1）桌面新建文件夹 我的第一个网页；2）新建文本文件，改名 index.html（扩展名从 .txt 改成 .html）；3）用记事本打开，等着粘代码。

Windows 提醒：看不到 .txt 后缀？打开文件资源管理器 → 查看 → 勾选 “文件扩展名”。不做这步，你会得到 index.html.txt，双击打开是记事本而不是浏览器。

为什么一个文件搞定？ HTML、CSS、JS 可以全塞在一个文件里。专业项目会拆三份，但你不需要。少一个文件，少一个出错的地方。

三、把页面需求说清楚：五要素

第61篇讲了函数的”四要素”，描述页面是五要素。

1. 这是个什么页面（定位）：一句话。”个人名片页”“产品介绍页”。
2. 页面上有哪些内容（区块清单）：从上到下列出来，这是最重要的一条。
3. 长什么样（风格）：别说”好看”，AI 不知道你审美。说具体形容词 + 参照物。✅”简洁风格，白底深灰字，主色蓝 #2563eb，圆角卡片，类似苹果官网”
4. 要能动什么（交互）：点”复制微信号”→ 复制到剪贴板，按钮变”已复制”，两秒后变回。
5. 技术约束（决定你能不能跑起来）：单文件、不引外部依赖、手机可看、加中文注释。

最后这条是新手救命符。 不写它，AI 大概率给你一个需要 npm install 才能跑的 React 项目，第一步就卡死。

四、实操：从零做一个个人名片页

第1步：把五要素发给 AI（完整模板见文末）。第2步：把代码整个粘进 index.html——要从第一行复制到最后一行，一个字别漏，Ctrl+S 保存。第3步：双击 index.html，浏览器打开，你的页面出现了。

第4步：长得不对怎么改？这是绝大多数人翻车的地方。

❌ 错误：”不好看，重做一个”——AI 给你一个完全不同的页面，满意的部分全没了。 ✅ 正确：一次只改一处，并指明位置。

页面很好，我只想改一处：把三个技能标签背景色改成浅蓝（#dbeafe），文字改主色蓝（#2563eb）。
严格要求：1. 只改这三个标签样式，其他一模一样；2. 给我完整 index.html，不要片段；3. 告诉我改了哪几行。

“给我完整文件，不要片段”这句话必须每次都写。 因为你不知道片段该贴哪儿——贴错位置的代价，比重写还大。

五、进阶：让页面”活”起来

名片页做完了，想加点东西？原则：一次加一个功能。

比如加深色模式：右上角加个圆形按钮（用文字 🌙 代替图标），点击整页切到深色（背景 #111827、文字 #f9fafb、卡片 #1f2937），再点切回；切换带 0.3 秒过渡。要求同上：只新增、不动原有、给完整文件。

注意：纯本地留言只存在你自己的浏览器，别人打开看不到。要所有人都能看，需要后端——那是下一篇的事。

六、三个最常见的”我这儿怎么打不开”

• 症状1：双击一片空白——多半文件名还是 index.html.txt。右键 → 属性 → 看”文件类型”是不是”HTML 文档”。
• 症状2：全是黑白文字没样式——只复制了一部分代码，CSS（<style> 那段）漏了。看代码是不是以 </html> 结尾。
• 症状3：按钮点了没反应——按 F12 看 Console 有没有红字，有就整段复制发给 AI。

复制到剪贴板的功能，在 file:// 直接双击打开时部分浏览器会拦截。不生效就让 AI 加”降级方案”——直接对 AI 说就行。

七、把它发给别人看

• 方式1：直接发文件（最简单）：把 index.html 微信发过去，对方下载双击打开。
• 方式2：截图（最保险）：你想要的往往只是”看，我做的”那一刻。
• 方式3：免费托管（想更进一步时）：上传一个 html 就得到网址，但对现在的你是可选项，不是必修课。

先把”做出来”做熟，再考虑”发出去”。

八、三条铁律

• 铁律一：一次只改一件事。 改了三处出问题，你不知道是哪处。改一处、跑一次、满意再改下一处。
• 铁律二：每次都要完整文件。 “给我完整的 index.html，不要片段”——写进你每一条修改指令。
• 铁律三：满意的版本立刻另存一份。 复制改名叫 index_备份_v1.html。AI 一定会有把页面改崩的那天，有备份的人五秒恢复，没备份的从头再来。

提示词模板盒子（可直接复制）

模板 1｜从零生成一个页面（五要素万能版）

我完全不会写代码，请帮我做一个网页。

【定位】【一句话说明这是什么页面、给谁看】
【内容】从上到下依次是：1.【区块一】 2.【区块二】 3.【区块三】（越具体越好）
【风格】【背景色、文字色、主色给色值、圆角、阴影、整体宽度、参照哪个网站】
【交互】【点什么会发生什么，写清变化前后状态】
【技术要求】
1. HTML、CSS、JS 全部写在一个 index.html 文件里
2. 不引入任何外部框架、CDN、字体库、图标库
3. 手机上打开要正常显示（响应式）
4. 每个区块前加中文注释
5. 给我完整代码，不要用"省略"这种写法

模板 2｜只改一处，不许重写

页面整体我很满意，只想改一处：【具体说明改什么，改成什么样，能给色值/数值就给】

严格要求：
1. 只改这一处，其他所有部分保持一模一样
2. 不要调整结构顺序，不要改类名
3. 给我完整的 index.html，不要只给片段
4. 改完告诉我：你动了哪几行，原来是什么，现在是什么

模板 3｜页面报错求助

我的网页出问题了。
现象：【具体描述，如"点按钮没反应""页面空白"】
浏览器：【Chrome / Edge】  打开方式：【双击文件】
浏览器 F12 → Console 面板里的报错：【完整粘贴红字，没有就写"没有报错"】
我的完整代码：【粘贴完整 index.html】
请：1. 用大白话告诉我哪里错了、为什么；2. 给我修好的完整文件；3. 告诉我以后怎么避免。

速查：页面需求五要素

速查：三条改页面铁律

下篇预告

页面做出来了，但致命短板是数据都是写死的。下一篇我们讲后端接口（REST API）——接口就是个”服务窗口”，怎么让 AI 写出能存数据、查数据的后端，以及不会写代码的人怎么把前后端接上。从这一篇起，你做的东西才算真正”活”了。