1.1
第一章 · 第 1 节

网页是什么 + 做你的个人主页

这一节你会拿到

你会做出一个能在浏览器里打开的个人主页，改它一行，画面马上跟着变。

回头一题

这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。

给 Agent 发第一句话时，加上哪句最能帮你之后找到产出？

这一节不写代码，只把一个最基本的问题弄明白：网页到底是什么。

一句话：网页就是一份"带标签的文本文件"

你看到的任何网页，本质都是一份普通的文本文件。文件里用一种叫 HTML 的"标签"把内容一段段标出来，告诉浏览器：这里是标题，这里是段落。浏览器再把这些标记翻译成你看到的画面。这个翻译过程称为渲染（Render）。

<h1>你好，我是 ____</h1>
标签(tag):告诉浏览器"这是一级标题" 内容：真正显示给人看的字

标签成对出现：<h1> 是开始标签，</h1> 是结束标签，比开始标签多一道斜杠。夹在中间的字，就是浏览器上显示出来的内容。h1 表示一级标题，p 表示段落，button 表示按钮。不用背，见多了自然就记住了。

动手尝试（见下方互动框）:改一行，马上看变化

上面那块是一个极简个人主页的文本，下面那块是浏览器渲染出来的样子（宽屏上左右并排）。直接在文本里改字,右边实时跟着变。先把 <h1> 里的 ____ 换成你的名字，再把那两句介绍改成你自己的情况。改坏了刷新页面就回原样。

在文本框里改 → 在渲染结果里看
你刚才做的事

你没写一行代码，只是在一份文本文件里改了几个字，浏览器立刻就渲染出了新的页面。网页就是这么回事：一份文本文件，用标签标出结构，交给浏览器渲染成画面。

有一样东西你改不动

背景颜色、按钮大小、字体这类视觉效果（样式），光改标签里的文字是改不动的。它们归另一套东西管，叫 CSS（层叠样式表，Cascading Style Sheets）。这一节你不用碰 CSS；想改样子，直接跟 Agent 说一句就行，比如"把背景换成浅灰""把按钮改大一点"。你说，它改。这就是你和 Agent 的分工：内容你定，长什么样交给它。

小测：哪种改动会让画面变样

上面这份文本里，下面哪一处改动，浏览器渲染出来的画面会跟着变？

动手：让 Agent 给你做一个个人主页

接下来要离开这个页面，回到终端真做一遍。

操作 · 准备工作。

打开终端（见 0.6），对 Agent 说："帮我在桌面新建一个叫 my-homepage 的文件夹，然后进入这个文件夹。" 建好之后，Agent 后续生成的所有文件都会落在这个文件夹里，不会找不到。

准备工作完成后，把下面这段话发给 Agent。名字和三件事填你自己的，随便填就行，这个页面只是拿来练手的：

在 my-homepage 文件夹里，帮我做一个单页的个人主页，一个 HTML 文件就行。
包含：我的名字是[填你的名字]、一句介绍、我会做的三件事、一个"联系我"按钮。
做完告诉我文件在哪个文件夹里，把完整路径给我，我要用浏览器打开看。
Agent 反问你要信息（比如"名字是什么？哪三件事？"）——

照实答就行，随便填也没问题。这只是练习页面，下一关才做正式作品。Agent 问什么你就答什么，它拿到信息就能继续。

操作 · 确认文件位置。

Agent 做完会告诉你文件的完整路径（长这样 C:\Users\你的用户名\Desktop\my-homepage\index.html）。如果它只说"已创建"但没给路径，追问它："把 index.html 的完整路径给我。"

终端里大致会是这样（仿真示意，你那边的路径和内容不一样是正常的）：

终端 · my-homepage
my-homepage $ 在 my-homepage 文件夹里，帮我做一个单页的个人主页……
正在生成 index.html...
已创建 index.html，完整路径：
C:\Users\你的用户名\Desktop\my-homepage\index.html
包含姓名、介绍、三件事和联系按钮，要在浏览器里看一眼吗？

看到类似上面这样的完整路径，就说明文件已经到位了。

拿到路径后，照下面的办法在浏览器里打开它。打开文件的方法：Mac 上右键这个文件，在"打开方式"里挑一个浏览器，或者直接把文件拖进浏览器窗口；Windows 上双击一般就会用默认浏览器打开，要是打开后看到的是一堆代码，就右键"打开方式"，自己挑个浏览器。下一节 用 VS Code 打开 会更省事。

页面能正常打开之后，接着一小步一小步地指挥 Agent，一次只说一件事，比如"把背景换成浅灰""把按钮改大一点""加一张占位头像"。每说完一条，回浏览器刷新一下，看看到底哪儿变了。这种改一点、看一眼的做法，1.4 还会专门练习。

自检：对照你真做出来的那个页面

下面几项，对着你真打开的那个页面逐条核对，符合就勾上。别凭印象勾，要真看到了再勾。

这一节的自检卡

勾上你真做到的项，四项都勾上就算过。

打不开、没反应？看这里


文件双击打不开、或打开是一堆代码:别双击，改成右键"打开方式"挑一个浏览器(Chrome、Safari、Edge 都行);拖进浏览器窗口也行。
改了字渲染结果没反应:本页的文本框是改了即变；如果是你自己那个文件，改完要保存再回浏览器刷新一下才看得到。
想改背景、按钮大小却没头绪:那是 CSS 的事，不用自己弄，直接对 Agent 说"把背景换成浅灰"这种话，让它替你改。

别把这两件事搞混

这个个人主页只是练手用的沙盒（Sandbox），名字、介绍随便填，做坏了也不要紧。这一期真正要交的作品，是后面统一命题的「Steve's Repair」电脑维修店官网（见 1.3 先想后做）。那个才要认真做，眼下这个只是让你先把流程走一遍。

卡住了？比如文件打不开、改了没反应、想要某种效果又不知道怎么开口。把情况发到群里问问大家，或者直接向 Abel 或助教提问。

答对了！