人人都能用 Agent 做一个自己的网页：从网页结构到 AI 建站实战

现在，人人都可以用 Agent 创建自己的网页。

打开一个 AI 编程工具（例如 Codex、Cursor、Claude Code），告诉它：“帮我做一个个人主页。”它可以创建文件、编写代码、调整样式，再启动浏览器预览。完成第一版网页，已经变得非常简单。

真正拉开差距的，是第二轮修改。

懂网页结构的人会告诉 Agent：

“检查 images 文件夹的相对路径。”

“手机端改成单列布局。”

“只调整 CSS，不要修改 HTML 内容。”

这类指令清晰、准确，Agent 很快就能定位问题并完成修改。

而不了解结构的人，通常只能说：

“图片怎么没了？”

“再高级一点。”

“怎么和刚才不一样？”

Agent 只能不断猜测，修改范围越来越大，页面也越来越难控制。

所以，HTML、CSS、JavaScript、根目录、相对路径、响应式设计这些看似传统的网页知识，在 AI 时代反而变成了使用 Agent 的核心能力。

你不需要靠它们手写几百行代码，但你需要用这些概念描述问题、限定修改范围，并判断最终结果是否正确。

这篇文章分两部分：

第一部分，从零认识网页项目，并亲手完成一个简单网页。

第二部分，进入 Agent 实战，用一个黄色 Punk 风格个人主页，完整体验“寻找参考 → 分析设计 → 生成网页 → 持续修改 → 浏览器验收”的全过程。

一、先理解网页、网站和 Web 应用

这三个概念经常被混淆。

可以简单理解：

网页：一页纸；
网站：一本书；
Web 应用：一台机器。

你现在制作的是一个网页。

以后加入作品展示、博客、联系方式等多个页面，它会逐渐发展成一个网站。

二、网页项目其实是一套文件结构

一个网页项目并不是只有一个 HTML 文件。

通常包含：

页面结构；
样式文件；
交互脚本；
图片资源；
项目说明。

它可以理解成一套房子：

项目根目录是房子本身，HTML、CSS、JavaScript 和图片分别放在不同房间。

一个常见结构：

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

其中：

index.html 是入口页面；
css 存放样式；
js 存放交互；
images 存放图片；
README.md 记录项目说明。

新手第一步，不需要急着写代码。

先创建：

一个项目文件夹；
css、js、images 三个子文件夹；
一个 index.html；
一个 README.md。

把结构搭对，后面 Agent 才知道文件应该放在哪里。

三、HTML、CSS、JavaScript 分别负责什么

网页里的一个按钮，通常需要三个文件共同完成：

HTML：

决定页面有什么。

CSS：

决定页面长什么样。

JavaScript：

决定点击后发生什么。

可以记成：

HTML 是骨架，CSS 是外观，JavaScript 是行为。

例如：

想修改文字 → 找 HTML。

想修改颜色 → 找 CSS。

按钮没有反应 → 检查 JavaScript。

文件分开以后，网页更容易维护，Agent 也更容易定位问题。

四、index.html 为什么重要

在简单网页项目里，index.html 通常就是首页，也是入口文件。

用户打开网站时，服务器通常会优先寻找：

index.html

因此：

它应该放在项目根目录；
不要随意改名；
文件名使用英文小写。

一个 HTML 页面主要分两部分：

head
└── 网页设置

body
└── 用户看到的内容

head 通常包含：

页面标题；
字符编码；
手机适配设置；
CSS 和 JavaScript 地址。

body 包含：

标题；
文字；
图片；
按钮；
页面内容。

常见结构：

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

这些标签帮助浏览器和搜索引擎理解页面结构。

五、亲手做一个最小网页

现在创建第一个真正能打开的页面。

首先，把头像放入：

images/avatar.jpg

然后编辑 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">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

保存后，用浏览器打开。

如果看到：

标题；
文字；
图片；
按钮；

说明 HTML 已经成功运行。

如果图片打不开，通常检查：

文件名；
大小写；
扩展名；
路径。

例如：

images/avatar.jpg

必须和真实文件完全一致。

六、CSS 让网页拥有设计感

HTML 负责内容，CSS 负责视觉。

在：

css/style.css

加入：

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

img {
  width:240px;
  border-radius:24px;
}

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

保存刷新后：

背景改变；
图片缩小；
按钮出现圆角。

CSS 可以简单理解：

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

七、JavaScript 让网页产生互动

连接：

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

然后在：

js/script.js

加入：

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

刷新页面，点击按钮。

如果出现弹窗，说明 HTML、CSS、JavaScript 已经连接成功。

八、文件路径是新手最容易出错的地方

网页需要知道图片、CSS、JavaScript 在哪里。

这就是路径。

例如：

css/style.css

js/script.js

images/avatar.jpg

它们都是相对路径。

记住三个规则：

同一目录：

file.jpg

下一层：

folder/file.jpg

上一层：

../file.jpg

同时：

文件名不能错；
大小写不能错；
扩展名不能错。

很多“图片消失”“样式没加载”，本质都是路径问题。

九、养成修改网页的正确流程

网页开发最重要的习惯：

修改
 ↓
保存
 ↓
刷新
 ↓
验证

一次只改一个地方。

不要同时修改：

HTML；
CSS；
JavaScript。

否则出现问题，很难判断原因。

这个习惯同样适用于 Agent。

Agent 修改代码后，你仍然需要：

打开浏览器 → 检查效果 → 判断是否正确。

十、从手写网页进入 Agent 建站

前面的知识不是为了让你成为程序员。

你只需要掌握三件事：

第一，知道关键词。

例如：

CSS；
文件路径；
根目录；
响应式。

这样你能准确告诉 Agent 问题在哪里。

第二，保持验证习惯。

Agent 改完以后：

修改 → 浏览器检查 → 再继续优化。

第三，拥有判断能力。

图片裂开：

可能是路径问题。

按钮无反应：

可能是 JavaScript 没连接。

页面手机端混乱：

可能是响应式布局问题。

你不用亲自修，但你知道应该让 Agent 往哪里查。

十一、用 Agent 制作黄色 Punk 个人主页

现在进入完整实战。

目标：

制作一个黄色 Punk 风格个人主页。

内容：

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

第一步：寻找参考网页

不要直接让 Agent 开始写。

先找 1～2 个设计参考。

关注：

配色；
页面布局；
字体层级；
图片比例；
动效方式。

不要复制：

Logo；
图片；
文案；
源代码。

学习的是设计规律。

第二步：让 Agent 先分析，不制作

第一条指令只做设计分析。

告诉 Agent：

分析页面结构；
分析颜色；
分析字体；
分析按钮；
分析手机端变化；
总结设计 DNA。

不要让它马上写代码。

原因很简单：

方向错了，代码写得越快，返工越多。

第三步：确认设计后，再让 Agent 制作

制作要求：

使用原生 HTML、CSS、JavaScript；
文件结构清晰；
不使用框架；
使用自己的图片和内容；
保持原创；
完成电脑端和手机端测试。

同时要求 Agent：

启动本地预览；
检查 1440×900；
检查 390×844；
检查按钮；
检查图片；
检查控制台错误。

不要只听 Agent 说“完成”。

一定要看浏览器结果。

十二、如何继续优化第一版

第一版通常不会完美。

修改时不要说：

“高级一点。”

这种描述太模糊。

应该说：

“保持结构不变，把黄色背景提高亮度。”

“头像放大 20%，但保持完整显示。”

“只修改 CSS，不改变 HTML。”

越具体，Agent 越容易准确执行。

十三、最终验收

交给 Agent：

检查：

桌面端；
手机端；
图片加载；
CSS 加载；
JavaScript；
按钮功能；
页面滚动；
控制台错误。

发现问题：

修复 → 再检查。

十四、部署上线

电脑上的：

localhost

只有自己能访问。

部署，就是把项目上传到公开服务器。

对于简单 HTML/CSS/JavaScript 项目，可以使用 GitHub Pages。

基本流程：

创建 GitHub 仓库；
上传项目文件；
确认 index.html 在根目录；
开启 Pages；
获取公开网址；
再次检查网页。

上线前检查：

不要上传：

API Key；
私人电话；
家庭地址；
内部资料；
未授权图片。

结语：未来网页开发，不是会不会写代码，而是会不会描述问题

AI 让创建网页变得简单。

但真正决定结果的，不是你会不会让 Agent 生成代码，而是：

你是否理解网页结构；

你是否能准确描述问题；

你是否知道如何验收结果。

HTML、CSS、JavaScript 这些基础知识，不会因为 AI 出现而过时。

相反，它们正在成为人与 Agent 协作的新语言。

未来的网站开发，很可能不是程序员独自写代码，而是懂结构的人，通过 Agent 快速完成设计、实现和迭代。

文章版权归作者所有，未经允许请勿转载。

THE END

资源
# HTML 小白从 0 到 1

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