HTML 零基础入门：用 AI Agent 做个人主页并部署上线

文章前半段面向零基础读者讲网页基础：网页、网站和 Web 应用的区别，网页项目的文件夹与根目录结构，index.html 的作用，HTML、CSS、JavaScript 各自负责什么，相对路径为什么容易出错，以及「修改、保存、刷新、验证」的工作循环，并带读者亲手搭出一个能打开的最小页面。后半段进入 Agent 实战，用黄色 Punk 个人主页演示找对标网页、让 Agent 先只做设计分析、再发制作指令、按四步循环继续修改、在电脑端和手机端做最终验收，最后用 GitHub Pages 部署上线，并提到绑定自有域名这一步。

一、先分清网页、网站和 Web 应用

这三个词经常混在一起，其实很好区分。

可以这样记：

网页是一页纸
网站是一本书
Web 应用是一台机器

你今天要做的是一个网页。以后增加作品详情、博客和联系页面，它会慢慢变成一个网站。

二、网页项目就是一套文件和文件夹

一个网页项目不等于一个 HTML 文件。它通常包含页面、样式、互动、图片和说明文档。

你可以把它想成一套房子：

这些内容需要放在同一个大文件夹里，这个最外层文件夹叫项目根目录。

一个常见结构是：

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

这里的 my-first-site 是整个项目，也是根目录。css、js、images 是用来分类的小抽屉，实际内容放在文件里。

第一个练习：只搭文件夹，不写代码

现在就做一遍：

在电脑上新建文件夹，命名为 my-first-site；
进入它，再新建 css、js、images 三个文件夹；
在根目录新建 index.html；
再新建 README.md；
在 README 里写一句：「这是我的第一个网页项目。」

完成后，对照上面的目录树检查。文件夹层级一样，就算过关。

先把抽屉分好，后面才知道每样东西应该放在哪里。

三、认识网页里的常见文件

文件名最后的小尾巴叫「扩展名」。它告诉电脑这个文件是什么类型。

你在屏幕上看到的一个按钮，通常由三个文件一起完成：

HTML：页面里有一个按钮
CSS：按钮是什么颜色、大小和形状
JavaScript：点击按钮后发生什么

这就是常说的「骨架、皮肤、大脑」：

HTML 管结构和内容；
CSS 管样式和外观；
JavaScript 管行为和互动。

三个文件分开以后，项目更容易修改。想改文案就找 HTML，想换颜色就找 CSS，按钮没反应再检查 JavaScript。

四、index.html 为什么最重要

在大多数简单网页项目里，index.html 同时承担首页和入口文件两个角色。

访客打开网站地址时，服务器通常会先在根目录寻找 index.html。文件不存在、名字写错或者被移到其他文件夹，首页就可能打不开。

所以新手先记住三件事：

index.html 放在项目根目录；
不要随意重命名它；
文件名全部使用英文小写。

HTML 页面里面有什么

一个 HTML 页面可以分成两块：

html
├── head：网页设置
└── body：用户看到的内容

head 里通常放网页标题、中文编码、手机显示设置，以及 CSS 和 JavaScript 的地址。body 里放标题、段落、图片、按钮等可见内容。

页面内部还会继续分区：

body
├── header：顶部和导航
├── main：页面主要内容
│   ├── section：自我介绍
│   ├── section：作品展示
│   └── section：联系方式
└── footer：页脚

这些标签能帮助浏览器、搜索引擎和屏幕阅读器理解页面。

你暂时只需要认识几个常用标签：

五、亲手做出第一个能打开的页面

理论讲完一半，现在让浏览器出现第一行属于你的文字。

第一步：准备一张图片

把一张自己的照片或头像放进 images 文件夹，命名为 avatar.jpg。

如果你的图片是 PNG，就命名为 avatar.png，后面的 HTML 也要写相同的扩展名。文件名和代码里的地址必须完全一致。

第二步：写入最小 HTML

用你选好的编辑器打开 index.html，复制下面这小段：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，这是我的第一个网页。</h1>
  <p>我正在学习网页是怎样组成的。</p>
  <img src="images/avatar.jpg" alt="我的个人头像">
  <button id="hello-button" type="button">和我打个招呼</button>
</body>
</html>

这段不用背。你只要能看出这些事：

title 是浏览器标签页上的名字；
h1 是页面里的大标题；
p 是介绍文字；
img 从 images 文件夹读取头像（这里的 images/avatar.jpg 就是「文件路径」，告诉浏览器头像放在哪里，第八章会详细解释）；
button 在页面里放了一个按钮。

第三步：保存，再用浏览器打开

Mac 按 Command + S，Windows 按 Ctrl + S 保存。然后双击 index.html，用 Chrome、Edge、Firefox 或 Safari 打开。

你应该能看到标题、介绍、图片和按钮。页面会很朴素，图片也可能很大，这是正常的。HTML 此时只负责把内容放出来。

常见翻车现场： 如果浏览器显示一堆代码，先检查文件后缀名是不是被改成了 index.html.txt（Windows 记事本经常干这事）。如果图片裂开，对照 images 文件夹里的真实文件名，大小写和扩展名一个都不能错。

这一关的验收标准：浏览器能打开页面，文字和图片都能出现。

六、用 CSS 给页面加上外观

接下来让页面有颜色、有间距，图片也缩小一点。

第一步：连接 CSS 文件

在 index.html 的 head 里面加入这一行：

<link rel="stylesheet" href="css/style.css">

这句话的意思是：请去 css 文件夹里读取 style.css。

href="css/style.css" 也是一个文件路径——下一级 css 文件夹里的 style.css 文件。

第二步：给 style.css 写几条规则

用编辑器打开 css/style.css，复制下面这段：

body {
  margin: 0;
  padding: 48px;
  color: #111111;
  background: #f5f5f5;
  font-family: Arial, "PingFang SC", sans-serif;
}

img {
  display: block;
  width: 240px;
  margin: 24px 0;
  border-radius: 24px;
}

button {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
}

这里不用逐个记属性。先观察它们改了什么：

body 负责整个页面；
background 把背景改成浅灰色；
padding 给页面四周留出空白；
width 把头像限制为 240 像素；
border-radius 让头像和按钮出现圆角。

CSS 的写法可以简单理解为：

找到谁 → 改什么 → 改成什么

保存 CSS，回到浏览器刷新。Mac 可以按 Command + R，Windows 可以按 Ctrl + R。

这一关的验收标准：背景变成浅灰色，头像缩小，按钮出现圆角。

七、用 JavaScript 让按钮有反应

现在按钮已经出现，但点击它还没有任何变化。接下来给它加一个最简单的互动。

第一步：连接 JavaScript 文件

在 index.html 的 body 结束标签前（也就是 </body> 的上一行）加入：

<script src="js/script.js"></script>

注意：为什么放 body 底部，而不是 head 里？因为浏览器是从上往下读代码的。如果 script 放在 head，它会在按钮还没出现时就去找按钮——然后什么都找不到。放在 body 底部，确保按钮已经「出生」在页面上，JavaScript 再来找它。

第二步：写入按钮行为

用编辑器打开 js/script.js，复制下面这段：

document.querySelector("#hello-button").addEventListener("click", () => {
  alert("你好呀！谢谢你来到我的网页。");
});

它做的事情很简单：找到 hello-button，等用户点击，然后弹出一句话。

保存文件、刷新浏览器，再点击按钮。出现弹窗，就说明 HTML 里的按钮和 JavaScript 已经连上了。

这一关的验收标准：点击按钮后，浏览器会出现欢迎语。

八、文件路径为什么经常让小白翻车

页面想读取图片、CSS 和 JavaScript，都要先知道它们在哪里。这个地址就叫文件路径。

到目前为止，你已经用过了三种路径：

css/style.css        下一级 css 文件夹里的样式
js/script.js         下一级 js 文件夹里的脚本
images/avatar.jpg    下一级 images 文件夹里的头像

项目内部优先使用这种相对路径。好处是：整个项目被搬到另一个位置时，这些地址仍然可以继续工作。

路径可以这样记：

同一层：直接写文件名；
下一层：文件夹名/文件名；
上一层：../；
文件、大小写和扩展名必须一致。

新手阶段遵守「三不」会省很多时间：

不随意删除文件；
不随意移动文件；
不随意重命名文件。

如果一定要移动或改名，对应的路径也要一起修改。

九、学会「修改、保存、刷新、验证」

这是网页学习中最值得养成的习惯。

修改 → 保存 → 刷新 → 验证
  ↑                    ↓
  └──── 不满意再修改 ────┘

一次只改一个地方。先换标题，保存并刷新；确认正确后，再改背景颜色。HTML、CSS 和 JavaScript 同时大改，出错后很难知道问题来自哪里。

最常见的翻车现场是：「我明明改了，为什么没效果？」

先检查两件事：文件有没有保存，浏览器有没有刷新。

这个四步工作法以后同样适用于 Agent。Agent 改完文件，你仍然要回到浏览器验证。

十、打开文件、运行项目和公开上线

双击 index.html 时，浏览器地址通常以 file:// 开头。这个方法适合检查最小页面。

当网页变得更复杂时，理想的方式是启动一个「本地服务器」，让浏览器地址变成 http://localhost 开头的形式——这样更接近真实的线上环境。

不过你现在不需要手动折腾这个。好消息：后面用的 Agent 会自动启动本地服务器并打开预览，你只需要在浏览器里看。这里先记住概念就好：

双击打开：先看内容
本地运行：完整测试
公开上线：让别人访问

电脑端正常也不代表手机端正常。缩窄浏览器窗口，检查标题有没有被裁掉、图片有没有超出屏幕、按钮有没有挤在一起。响应式设计会让页面根据屏幕宽度调整字号、间距和排列方式。

到这里，你已经从零搭出了第一个网页项目，也知道每个文件负责什么。接下来进入 Agent 演示。

小白：从手动搭建到用 Agent 搭建

你可能在想：前面手写了这么多代码，后面 Agent 真的能全自动吗？

答案是：能。但你不需要理解 Agent 写的每一行代码。

前面十章只想帮你拿到三样东西，你不需要因此变成程序员：

一套术语——你知道「CSS」「文件路径」「根目录」「响应式」这些词是什么意思，所以你能跟 Agent 说清楚；
一个工作习惯——修改、保存、刷新、验证。Agent 改完代码，你仍然要自己打开浏览器检查；
一种判断力——图片裂了大概率是路径写错了，按钮没反应大概率是 JS 没连上。你不需要会修，但你能告诉 Agent 往哪个方向排查。

接下来用的 Agent 叫 [Codex / 你实际使用的工具名]。它是一个 AI 编程工具——你跟它聊天，它帮你写代码、建文件、启动预览。你负责描述想要什么、检查做得对不对；它负责实现。

好，现在进入实战。

十一、最终演示：用 Agent 做黄色 Punk 个人主页

前面的小页面用来学习。现在用 Agent 做一个可以展示的版本。

这次演示使用 Punk 的个人信息和像素头像，目标是完成下面这张个人主页：

第一步：准备个人内容

在项目的 images 文件夹里放入像素头像，命名为 punk.jpg。

再准备这些信息：

名字：Punk
介绍：我用 AI、设计和内容，把想法做成作品。
身份：中科大 MBA、HerName 首席设计师、Stanley 商学院执行院长
页面：关于我、作品、联系方式
头像：images/punk.jpg

第二步：找一两个对标网页

可以从这些设计网站开始：

Recent、Awwwards、Siteinspire 等设计灵感网站入口的截图

网站入口：Recent｜Awwwards｜Siteinspire｜Land-book｜One Page Love

以 Recent 为例，先点进喜欢的作品，再打开它对应的真实网页。复制具体页面地址，并记下自己喜欢的部分。

一次选一两个就够了。你可以喜欢 A 页的配色，也可以喜欢 B 页「左边文字、右边照片」的首屏。

第三步：先只分析对标网页

第一条提示词只负责分析。先让 Agent 把配色、排版、字体、按钮和动效说清楚，暂时不要创建网页，也不要修改项目文件。

下面这段提示词看起来很长，但你要做的只是把方括号 [ ] 里的内容替换成你自己的，然后整段复制给 Agent。不需要理解每一行，Agent 会按要求一条一条分析。

在 Agent 中打开项目文件夹，把下面方括号里的内容替换掉，再整段复制。

请阅读并分析下面的对标网页：

参考网页 A：[粘贴具体网页 URL]
我喜欢它的部分：[例如：黄色配色、超大标题、首屏留白]

参考网页 B：[没有第二个就删除这一项]
我喜欢它的部分：[例如：左侧文字、右侧人物照片、按钮样式]

这一步只做设计分析。暂时不要创建网页、不要写代码，也不要修改当前项目中的任何文件。

请分别分析每个网页，并用简单的中文说明：

1. 页面结构
- 顶部导航、首屏、内容区、作品区和页脚怎样排列；
- 内容最大宽度、左右对齐方式、网格和留白大概是多少；
- 哪些内容最先吸引注意力，视觉顺序是什么。

2. 配色
- 主色、辅助色、背景色、文字色和按钮色；
- 给出接近的 HEX 色值；
- 说明每种颜色用在什么位置、大概占多少比例；
- 检查文字和背景是否容易阅读。

3. 文字和字体
- 标题、正文、导航、按钮分别是什么字体气质；
- 估算电脑端和手机端的字号、字重、行高和字间距；
- 分析标题怎样换行，正文一行大约多长；
- 分析文案的层级、长度和语气，不复制原文。

4. 排版
- 首屏是左右布局、上下布局还是居中布局；
- 文字、图片、按钮之间怎样对齐；
- 区块之间的上下间距和页面节奏；
- 图片是什么比例，有没有圆角、边框、旋转或阴影。

5. 按钮和组件
- 按钮的大小、颜色、圆角、边框、阴影和文字样式；
- 鼠标悬停、按下和点击后分别有什么变化；
- 导航、卡片、标签和联系方式分别怎样设计；
- 哪些组件承担主要操作，哪些只负责展示信息。

6. 动效
- 页面打开、滚动、悬停和点击时分别有什么动效；
- 动效从什么状态开始，到什么状态结束；
- 估算持续时间、延迟和速度变化；
- 哪些动效适合保留，哪些可能影响手机性能；
- 如果无法确认动效，请明确告诉我需要补充截图还是录屏。

7. 手机端
- 页面在窄屏上怎样重新排列；
- 标题、图片、按钮和导航怎样缩放；
- 有没有隐藏内容、折叠菜单或横向滚动；
- 电脑端和手机端最大的三个区别是什么。

分析完成后，请输出一份"设计 DNA"：
- 每个参考网页最值得借鉴的三条规律；
- 两个参考之间有没有冲突；
- 如果需要组合，应该怎样确定主次；
- 哪些规律适合个人主页；
- 哪些内容需要改成我的版本；
- 制作时最容易做错的地方。

最后列出你还需要我补充的信息。

再次提醒：这一步只分析，不创建文件，不开始制作网页。

如果参考网站阻止访问，把电脑截图、手机截图和一段滚动录屏放进 references 文件夹，再让 Agent 从这些材料开始分析。不要让它根据网站名字猜设计。

拿到分析报告后，先看三件事：它有没有抓住你喜欢的部分，有没有把两个参考的主次说清楚，给出的设计规律能不能落到你的个人主页上。

方向不对时，先继续追问。例如：

你对配色的分析比较准确，但首屏排版还不够具体。请补充文字区和图片区的宽度比例、对齐方式、上下留白和手机端变化。继续只做分析。

第四步：确认分析后，再发制作指令

分析方向确认以后，在同一个 Agent 任务中发送第二条提示词。这样它可以直接使用刚才整理的设计 DNA。

如果你换了一个新任务，需要先把上一轮的设计 DNA 一起粘贴过去。

请基于你刚才完成的对标网页分析和"设计 DNA"，在当前项目文件夹制作一个属于我的原创个人主页。

这一步开始创建和修改网页文件，不需要重新分析参考网站。

一、我的个人信息

- 名字：Punk
- 主标题：你好，我是 Punk。
- 介绍：我用 AI、设计和内容，把想法做成作品。
- 身份：中科大 MBA、HerName 首席设计师、Stanley 商学院执行院长
- 页面内容：关于我、作品、联系方式
- 头像：使用 images/punk.jpg

二、我的设计要求

- 整体使用明亮的黄色背景和黑色文字；
- 首屏左侧放标题和介绍，右侧放像素头像；
- "看看我的作品"使用通透的亮蓝色按钮；
- "和我打个招呼"使用明亮的正红色按钮；
- 头像完整显示，不裁掉人物、相机和萨克斯；
- 保留充足留白，页面清楚、有趣，手机上也容易阅读；
- 动效保持轻量，包含按钮悬停和适量的进入效果；
- 参考刚才的设计 DNA 决定具体字号、间距、图片比例和组件细节。

三、原创和文件要求

1. 使用原生 HTML、CSS 和 JavaScript；
2. 创建清楚的项目文件夹和 README；
3. 不安装前端框架；
4. 不复制参考网页的 Logo、品牌名、文案、图片、视频和源代码；
5. 不使用 iframe，也不把参考网页截图当成背景；
6. 可以借鉴配色比例、字体层级、网格、组件和动效规律；
7. 所有文件只写入当前项目文件夹；
8. 如果文件夹已有内容，先读取并说明准备修改哪些文件；
9. 图片添加准确的文字说明；
10. 动效需要照顾不希望看到动画的用户。

四、完成浏览器验收

制作完成后，请：
1. 启动本地预览；
2. 在 1440×900 的电脑尺寸检查页面；
3. 在 390×844 的手机尺寸检查页面；
4. 点击导航和所有按钮；
5. 检查标题裁切、图片变形、横向滚动和资源加载；
6. 检查浏览器控制台有没有报错；
7. 发现问题直接修复，再重新检查；
8. 保存电脑端和手机端截图；
9. 最后列出实际创建或修改的文件；
10. 说明最终页面分别采用了哪些设计 DNA，又做了哪些原创调整。

请直接完成制作和验收，不要在聊天里粘贴整段网页代码。

两步拆开以后，你可以在 Agent 动手前先纠正设计方向。分析通过，再进入制作，返工会少很多。

不要让 Agent 下载对方的照片、Logo 或源代码。最终页面借鉴设计规律，名字、文字、图片和品牌都来自自己的项目。

十二、第一版出来以后，怎样继续修改

第一版很少一次到位。你可能觉得头像太小、黄色偏暗，或者按钮颜色不够亮。

按照前面学过的四步循环继续：

说清修改内容 → Agent 修改 → 刷新浏览器 → 检查结果

例如：

请继续修改当前网页：

1. 保留现有结构和文字；
2. 黄色背景再明亮一点；
3. 蓝色和红色按钮提高亮度，但不要使用荧光色；
4. 头像稍微放大，保持完整显示；
5. 其他内容不要改动。

修改后重新检查电脑端和手机端。

"做得高级一点"很难执行。颜色、位置、大小、间距和动效都可以说得更具体。

十三、最后验收，别只听 Agent 说完成

把下面这段交给 Agent：

请对当前网页做一次最终检查：

1. 分别使用电脑和手机尺寸打开；
2. 点击导航、链接和按钮；
3. 检查标题、正文和图片有没有被裁掉；
4. 检查页面有没有横向滚动；
5. 检查图片、CSS 和 JavaScript 是否成功加载；
6. 检查浏览器控制台有没有报错；
7. 修复问题后重新截图。

请告诉我每个问题的原因和修复结果，不要粘贴大段代码。

手机端应该可以顺着向下阅读：

十四、部署上线：让别人通过网址打开

到这里，网页已经能在你的电脑上运行。但地址栏里的 localhost 只有你自己能访问。

部署，就是把项目文件放到公开服务器上。部署完成后，平台会给你一个公开网址，你可以把它发给任何人。

第一个纯 HTML、CSS、JavaScript 项目，可以使用 GitHub Pages。官方入门流程支持从仓库分支直接发布

最简部署流程

登录 GitHub，新建一个公开仓库；
把项目里的 index.html、css、js、images 和 README 上传到仓库；
确认仓库最外层可以直接看到 index.html；
打开仓库的 Settings → Pages；
在 Build and deployment 中选择 Deploy from a branch；
选择存放网页文件的分支和根目录；
保存设置，等待平台生成公开网址；
打开网址，再检查一次电脑端、手机端、图片和按钮。

你也可以让 Agent 带着你完成：

请检查当前网页是否适合部署到 GitHub Pages。

先完成这些检查：
1. 确认 index.html 位于项目根目录；
2. 检查 CSS、JavaScript 和图片是否全部使用相对路径；
3. 检查项目中有没有密码、API Key、私人地址或不应该公开的文件；
4. 检查电脑端和手机端没有明显错误。

检查通过后，请按照 GitHub Pages 当前的官方流程，一步一步带我部署。
每一步说明我要点击哪里、应该看到什么。
等我确认以后再进入下一步，不要替我猜账号、仓库名或权限设置。

部署完成后，请帮我打开公开网址并做一次最终检查。

公开前再看一眼项目内容。私人电话、家庭地址、合同、公司内部资料、API Key 和没有授权的图片，都不要放进公开仓库。

当 GitHub 提供的网址能够正常打开时，你的网页已经上线了。

十五、最后一步：给网页买一个自己的域名

平台提供的网址可以用，但域名更短、更好记。买域名和绑定稍微复杂一些，我单独写了一篇：

Adrian Punk@AdrianPunk115

X 引用

我用 Codex 做了网页，又拥有了自己的域名

这篇教程面向没有网站部署经验的新手，作者先解释 HTML 文件、托管平台、域名和 DNS 四个概念，然后记录自己用 Codex 生成 HTML 页面、先部署到 Vercel 但因国内访问需要 VPN 而改用 Cloudflare Pages 的过程。文章分三步讲解：把 HTML 部署到 Cloudflare Pages、在 Cloudflare 购买域名、把域名绑定到 Page…

阅读完整整理 →

从空文件夹，到公开网址，再到自己的域名，这条路线才算完整走通。

当别人输入你的域名，看见你亲手规划、再由 Agent 帮你完成的网页时，第一个网站就正式完成了。

关于作者

Punk｜中科大 MBA｜HerName 首席设计师｜Stanley 商学院执行院长｜AI提示词｜3个月赚了8位数｜Learn in Public｜@AdrianPunk115

HTML 小白从 0 到 1：学懂网页基础，再用 Agent 做出个人主页