入门实践 · 一个文件，一个完整作品

做出你的第一个个人展示页

从描述需求开始，亲手保存、打开、修改和验收一个页面。你可以直接开始，遇到概念再回到基础课程查阅。

真实 HTML 样例，可滚动和点击；英文示例文字可以换成你的介绍。下载完整 index.html
下载受限？查看完整源码

复制下方全部内容，保存为 index.html（UTF-8），再用浏览器打开。

开始前准备什么

  • 一台能保存文件的电脑、一个浏览器和一个纯文本编辑器。
  • 可选：你已有的 AI 对话或编程工具。使用该工具可能需要联网、账号或付费，请查看其当前服务说明；本教程不要求购买。
  • 运行参考样例无需账号、服务器、API 密钥或额外依赖，下载后可以离线练习。
  • 技术范围为标准 HTML 与 CSS。完成时间因基础和工具而异，按步骤推进即可。

从想法到可运行页面

  1. 1. 准备一个项目文件夹

    新建 first-website 文件夹。打开纯文本编辑器，创建 index.html；打开系统的文件扩展名显示，确认不是 index.html.txt。

    检查结果：文件夹里有一个后缀为 .html 的文件。暂时不用安装 Node.js 或任何依赖。

  2. 2. 把需求交给 AI，或先运行参考样例

    将下方需求提示词粘贴到你已有的 AI 工具，填写介绍和作品说明。复制完整 HTML，不包含代码块开头和结尾的反引号。如果暂时不能使用 AI，就下载上方完整样例。

    检查结果：得到从 <!doctype html> 到 </html> 的完整文件，而不是零散片段。

  3. 3. 保存并打开页面

    把完整代码保存进 index.html，编码选 UTF-8。双击文件，或将文件拖入浏览器。下载样例时如果得到 .txt 文件，先重命名为 index.html。

    检查结果：浏览器显示有排版的介绍、作品和学习记录；地址以 file: 开头也正常，这是本地预览。

  4. 4. 做一次你自己的修改

    在编辑器中把 Lin 换成你的昵称，把作品描述换成自己的内容；保存后刷新浏览器。再把 CSS 中 #5b21b6 换成 #1e40af，观察强调色变化。

    检查结果：昵称、介绍与颜色发生变化。每次只改一类内容，便于发现哪里出了问题。

  5. 5. 检查链接与手机布局

    点击 My work、About 和主按钮，检查是否跳到对应区域。缩窄浏览器，再用 Tab 和 Enter 操作链接。

    检查结果：所有按钮有真实去向，正文没有被裁掉，焦点可见，页面没有横向溢出。

  6. 6. 验收并进入下一课

    对照下方清单检查你的文件。通过后可以使用页面上的“标记完成”记录学习状态，再进入精进技能。

    检查结果：你有一个能打开、能修改、能解释结构的作品。标记完成是你的学习记录，不代表自动通过作品审核。

需求提示词

复制后修改方括号中的内容。AI 的输出可能不同，下面的验收标准才是你判断结果的依据。

请帮我制作一个个人展示页，只输出完整的 index.html 文件。
目标：介绍我是谁、展示一个作品、记录我学到了什么。
要求：
1. 只使用 HTML 和内嵌 CSS，不用框架、JavaScript、外部字体或图片。
2. 页面包含姓名、简短介绍、作品区和学习记录区。
3. 导航与主按钮通过页内锚点跳转到真实存在的区域。
4. 在手机宽度下可阅读，正文有足够对比度，键盘焦点清楚。
5. 使用虚构的示例资料，不添加登录、支付、统计或表单提交。
6. 添加 UTF-8 编码与 viewport 标签。
我的介绍：[在这里填写非敏感的个人介绍]
作品说明：[在这里填写你想展示的内容]

我的作品验收清单

逐项操作确认；这些勾选仅用于本次自查，课程完成状态由“标记完成”保存。

遇到问题时

打开后是一页代码

检查文件名是否为 index.html，而不是 index.html.txt；使用浏览器打开，不是编辑器。

中文乱码或修改不生效

以 UTF-8 保存，保留 meta charset 标签。确认正在编辑与打开的是同一个文件，保存后再刷新。

AI 要我安装依赖或配置密钥

本项目不需要这些步骤。追加说明：请重写成单个 HTML 文件，只使用内嵌 CSS，不依赖框架、脚本或外部服务。

页面没有样式或按钮跳转失败

确认复制了完整 style 内容和结束标签；检查链接的 #work、#about 是否与目标区域的 id 完全一致。可以与下载样例逐段比较。

AI 输出的功能越来越多

保留介绍、一个作品、学习记录三个区域。把新增功能写进以后清单，先让当前版本满足验收要求。

完成后，再向前一步

给作品区增加第二个项目，并保持窄屏布局正常。先写下验收要求，再让 AI 修改，最后自己检查。

公开发布是可选步骤。本地文件不会自动被别人访问；选择托管平台前，确认账号要求、费用和公开范围，并移除个人敏感资料。需要时再学习 部署与运维。

想尝试其他项目，可以继续查看 全栈实践、网页生成工具 或 Fabric 工作流。

内容来源与反馈

资料核对：2026-09-22。参考样例版本 v1；不依赖第三方框架。

反馈本教程的问题，请说明卡在哪一步及实际看到的结果。