AIGuide 书页标识AIGuide

本页可直接阅读、选中文本复制或打印。文中的复制按钮、判断练习和成果保存，请使用互动版。

中文教程 · 独立阅读版

用 ChatGPT 桌面版，创建第一个本地网页

用一份完整需求单，创建无需安装依赖、能在本地打开的个人主页。

内容整理：2026-09-15 · 资料核对：2026年9月15日

进入互动版，练习并保存成果

开始前准备

使用设备
电脑和 ChatGPT 官方桌面应用，进入其中的 Codex；手机可阅读，不能代替电脑文件操作。
账号与访问
能访问官方服务、完成登录，并在应用中使用 Codex。网络可达不等于账号或所在地区已获支持。
费用与安装
本站材料免费。本课无需 API Key；Codex 的额度、支持系统与付费条件请在官网和账号内核对。
练习成果
index.html、README.md，以及你填写的创建、修改和验收记录。

核对范围：安装、登录、文件夹和 New chat 入口有官方文档依据。账号内生成与文件写入尚未实测，参考网页由本站编写。

1. 先检查网络，再安装 ChatGPT 并进入 Codex

先打开下方 ChatGPT 官方页面并检查账号能否正常登录。已经能使用就继续，不需要额外配置网络；无法访问时先完成网络准备教程。安装的软件现在叫 ChatGPT desktop app（ChatGPT 桌面版），应用里仍保留 Codex 编程入口。选择 Codex，再用 New chat（新建聊天）开始。本课的“网页”是本地作品，不是云端任务。

先让工具说明当前工作目录，确保它看到的是这次练习文件夹。不要把桌面上的旧项目当作空白目录。服务访问、系统支持和账号权益以官方当前说明为准；仅安装成功不代表已经能执行任务。

  1. 在电脑的“文档”中创建 AIGuide-practice 文件夹，再在其中创建空的 personal-page 文件夹。Windows 用文件资源管理器，Mac 用访达。
  2. 先确认官方页面可打开，再从下方入口安装支持当前系统的 ChatGPT 桌面应用；打开后按官网提示登录。
  3. Windows 直接使用原生桌面环境即可。本课不需要先装 WSL；开始前保留应用的审批与沙盒设置，逐次阅读涉及文件或命令的请求。
  4. 使用应用中的打开文件夹入口，选择刚创建的 personal-page。选择 Codex，再用 New chat（新建聊天）开始任务。
  5. 先发送：“不要修改文件，只报告当前完整工作目录和已有文件。”核对路径与自己的空目录一致，再继续下一步。
ChatGPT 官方桌面安装与入门Windows 官方说明服务还打不开？先做网络准备还没准备好？先从网页入门

2. 先看要做出什么

这次只做三个板块：简介、项目、联系说明。下面的参考作品由本站编写，帮助你理解验收目标；它不是Codex账号内生成结果，也不代表你已经完成课程。

练习需求 · 虚构信息
个人主页需求单（虚构练习信息）
名字：林同学
简介：正在学习用AI整理资料、改进日常工作和制作小网页。
项目一：读书清单｜给想读的书做分类与简短笔记。
项目二：活动计划｜把活动准备事项整理成可核对的清单。
项目三：学习手记｜记录每周学会的一项小技能。
联系说明：练习页面，暂不提供真实联系方式。

页面要求：简介、三个项目、联系说明三个部分；中文界面；导航跳到对应板块。
实现要求：只创建index.html和README.md，样式写在HTML中，不安装依赖，不请求外部图片、字体或接口。
验收：双击index.html可打开；320px和1440px宽度内容完整；Tab可聚焦链接；刷新正常。
边界：本地练习，不添加登录、支付、表单或公开部署。
下载完整需求单
打开参考作品（新标签页）

3. 把完整任务交给 Codex

下面的提示词可以直接发送。明确只创建两个文件、无需安装依赖，让第一次练习的运行方式足够简单。

任务提示词
请在当前练习目录中完成这份需求。
先检查目录，说明计划与文件范围，再开始创建。若已有同名文件，先说明内容，保留原文件。
只生成index.html和README.md：样式写在HTML中，无构建步骤，无需npm或其他依赖。
完成后给出两个文件的位置和双击HTML的打开方式；只报告实际完成的检查。

个人主页需求单（虚构练习信息）
名字：林同学
简介：正在学习用AI整理资料、改进日常工作和制作小网页。
项目一：读书清单｜给想读的书做分类与简短笔记。
项目二：活动计划｜把活动准备事项整理成可核对的清单。
项目三：学习手记｜记录每周学会的一项小技能。
联系说明：练习页面，暂不提供真实联系方式。

页面要求：简介、三个项目、联系说明三个部分；中文界面；导航跳到对应板块。
实现要求：只创建index.html和README.md，样式写在HTML中，不安装依赖，不请求外部图片、字体或接口。
验收：双击index.html可打开；320px和1440px宽度内容完整；Tab可聚焦链接；刷新正常。
边界：本地练习，不添加登录、支付、表单或公开部署。

4. 打开实际文件，核对三个板块

在文件管理器里找到 index.html，双击用浏览器打开。核对页面上的林同学、三个项目和“暂不提供真实联系方式”，再点击导航看看是否到达相应板块。

如果浏览器显示源码或文件名是 index.html.txt，检查文件扩展名与保存格式。如果有构建命令或缺失依赖，先让 Codex对照需求恢复为单文件静态页面。

  1. 在 personal-page 目录确认 index.html 和 README.md 都存在，打开说明文件核对运行方式。
  2. 右键 index.html，选择“打开方式”中的浏览器。Windows 可先在资源管理器的“查看”中显示文件扩展名，避免误把 .txt 当网页。
  3. 逐项点“简介”“项目”“联系”导航，观察是否到达对应内容。
  4. 缩窄浏览器，再检查文字是否可读。把没检查的地方如实写进下方创建记录，后面的验收课再补。
出现命令请求，该怎么办？

先阅读命令用途。本练习无需安装第三方依赖；如果工具提出安装，请它解释当前静态页面为什么需要，再对照需求调整。

页面能打开，算已经上线了吗？

这里只完成本地作品。公开访问需要另外选择部署服务、核对发布内容与域名。

能直接拿参考作品当成我的结果吗？

参考作品用于理解目标。实操应在自己的练习目录完成生成、修改和核对，保存实际检查记录。

5. 保存创建记录，继续修改

网页文件留在自己的电脑目录。下面仅保存创建过程、打开方法和待解决问题，不会上传或执行你的网页代码。下一课沿用这个目录和Codex，不需要换编辑器。

遇到问题，找到下一步

装好了，但登录或 Codex 入口不可用
  1. 先检查应用是否来自官方安装入口，并核对当前版本和支持系统。
  2. 按实际账号页面核对 Codex 入口、地区、组织策略与使用额度。安装成功不等于服务已经可用。
  3. 先阅读需求单和参考作品；条件不足时可改学豆包网页路线，不必购买额外服务来完成本站阅读。
回到相关步骤
不知道文件夹在哪里，或选错了目录
  1. 在电脑“文档”里新建 AIGuide-practice，再在其中新建 personal-page。
  2. 通过应用的打开文件夹入口选择 personal-page，在任务中请它仅报告当前目录。
  3. 核对返回的完整路径。如果出现旧项目文件，停止本次生成，重新选择自己的空目录。
先不要修改任何文件。请报告这次任务的完整工作目录，并列出其中现有文件，让我确认是否为 personal-page 练习目录。
回到相关步骤
只看到聊天代码，没有实际 HTML 文件
  1. 在电脑文件管理器中打开刚才核对的路径，检查是否确实有 index.html 和 README.md。
  2. 若没有，向 Codex 说明你需要它在当前目录写入实际文件。
  3. 请它报告创建后的完整路径；再到文件管理器核对，不能只看“完成了”的回复。
我在练习目录没有找到文件。请核对当前工作目录，在本课要求的独立目录中实际创建 index.html 和 README.md，不只把代码贴在聊天里。完成后列出实际文件的完整路径；已有同名文件先说明，不覆盖。
回到相关步骤
页面显示源码、空白或要求安装依赖
  1. 先显示文件扩展名，确认文件是 index.html，而不是 index.html.txt。通过“打开方式”选择浏览器。
  2. 核对浏览器打开的路径和 Codex 修改的路径一致。
  3. 本课交付应可双击打开；将具体表现告诉 Codex，让它检查 HTML 内容、文件路径和外部依赖，再重新打开。
本课要求双击 index.html 即可打开，无需安装依赖。当前实际表现是：[填入你看到的情况]。请检查当前文件并修复，只修改本次练习文件，说明原因与实际检查结果。
回到相关步骤

练习与核对

按实际操作自查，完成标记与成果草稿请在互动版保存。

打开练习与核对

带走这一点

让 Agent 生成代码是开始，在真实页面中检查结果才是完成。

资料与核对记录

关键步骤有官方依据

已确认统一桌面应用中的 Codex、项目文件夹和新聊天流程。

本次核对公开官方资料，未登录产品账号、运行练习或发起付费调用。

步骤对不上？在互动版生成问题记录