网页是什么 + 做你的个人主页
本节课目标:你会做出一个能在浏览器里打开的个人主页,改它一行,画面马上跟着变。
这一节不写代码，只厘清一个基本问题：网页究竟是什么。
一句话:网页就是一份"带标签的文本文件"
你浏览到的任何网页，本质都是一份普通的文本文件。文件内用一种名为 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 或助教提问。