Codex 入门：从一个空文件夹做出离线网页

第一次使用 Codex，可以先做一个离线阅读页。目标很明确：生成一个能打开的 HTML 文件，在浏览器里检查，再完成一次具体修改。

本文使用可以操作本地文件夹的桌面工作环境。登录、安装和支持入口以 OpenAI 官方快速入门为准，界面可能随版本变化。OpenAI 官方快速入门

一、准备一个练习文件夹

在电脑上新建名为 sy-first-page 的文件夹，通过当前应用的项目或文件夹入口打开它。文件夹里先只放用于练习的公开文字，方便辨认生成的文件。

此时需要分清三个东西：聊天是你下任务的地方；文件夹是成果存放的位置；浏览器用来查看页面。

二、把第一项任务说完整

复制下面的要求，并把示例文字换成自己的短文：

请在当前文件夹创建 index.html，做一个可以离线打开的中文阅读页。标题是“我的第一份数字生活笔记”，正文使用下方材料。页面要有标题、简介、三段内容和页脚，浅色背景，手机上也能正常阅读。全部 CSS 写在同一文件，不引用外部字体、脚本或图片。不要安装依赖。完成后告诉我文件保存在哪里，并说明你检查了什么。

材料：AI 用来整理资料；服务器用来运行应用；支付工具用来完成服务订阅。每个工具都从一个具体任务开始学习。

这个任务限制了文件、内容、样式和运行条件。Codex 可以围绕这些条件创建成果，你也能逐项检查。官方提示指南同样强调目标、上下文和结果要求。OpenAI 官方提示指南

三、打开实际文件

完成后，在练习文件夹找到 index.html，用浏览器打开，或使用环境提供的文件预览。

确认三件事：标题和正文都出现了；页面没有依赖网络加载的素材；窗口变窄后文字仍能完整阅读。直接打开的本地文件通常不需要运行开发服务器。

如果你只看到源代码，确认文件后缀确实是 .html，而不是 .html.txt，也确认使用浏览器打开。

四、给一次可检查的修改

如果正文太宽，可以继续输入：

请把正文最大宽度设为 760 像素，并居中。手机左右各留 20 像素，正文用 18 像素、约 1.8 倍行高。只修改排版，保留文字内容。修改同一个 index.html，完成后列出变化。

刷新页面后比较效果。修改要求落到尺寸和对象上，比“更高级一点”更容易得到稳定结果。

五、检查修改是否影响别处

先看窄窗口，再看大窗口，最后重读正文。检查是否溢出、文字是否被改写、文件是否仍能直接打开。

让 Codex 报告它实际做过的检查。如果它只检查代码，没有打开浏览器，就把页面阅读和交互留给自己验收。不要把一句“检查通过”当成全部证据。

六、保留一个可回退版本

做下一项修改前复制一份已确认的 HTML，例如保存为 index-v1.html。练习项目可以采用这种直接的备份方式；项目变复杂后，再学习 Git 记录变更。

本次完成标准是：文件存在、能离线打开、窄窗口可读、修改符合要求，并且有一份可回退版本。

下一步可以给页面加目录或文章列表。涉及表单、账号和公开部署时，再逐项学习对应功能，不必一次全部塞进第一份练习。