AIGuide中文教程 · 独立阅读版
把网页从“能打开”检查到“能使用”
按桌面、手机、键盘与内容清单验收，保存自己的交付记录。
进入互动版，练习并保存成果开始前准备
能在本地打开自己的网页。使用现有浏览器即可，不要求安装另一款编程工具。
核对范围：浏览器缩窄窗口、设备模拟和真实手机检查是不同范围，请在验收记录中写明实际做了哪一种。
1. 按需求单检查，而不是凭印象
打开自己生成的网页，逐项检查简介、三个项目与联系说明。用鼠标点击每个导航链接，确认位置正确，而不仅是按钮颜色发生变化。
2. 检查手机宽度与放大阅读
先拖窄浏览器窗口观察布局。需要准确宽度时，在Chromium浏览器中打开开发者工具，开启设备工具栏，分别设为390px和320px；如果尚不会操作，先记录“仅缩窄窗口观察”，不要写成真实手机已测试。
回到桌面大小，使用浏览器放大功能检查文字仍能完整阅读。重点看长标题、项目标签和页尾是否超出边界。
- 页面是否需要左右拖动才能看全文？
- 文字、卡片是否互相遮住？
- 页面放大后内容是否还能滚动读到？
3. 再用键盘走一遍
先按Tab，在导航链接之间移动，观察焦点是否清楚可见；按Enter，检查链接能否操作。如果有自己的表单或按钮，再检查输入、错误提示与提交状态。
本练习没有真实表单。不要为表现“功能完整”临时添加一个无法提交的联系表单。
4. 把问题写成工具能复现的描述
找到问题后，在原Codex任务中提供宽度、步骤、实际表现和预期。修复后重做原来的操作，并检查相邻内容。
请修复我在当前网页发现的问题。
环境与宽度：[填写实际环境]
复现步骤：[填写操作]
实际结果：[填写问题]
预期结果：[填写目标]
只修改相关区域，保留其他内容。完成后说明改动文件，并复查相同操作。5. 保存本地交付记录
确认index.html和README.md仍在练习目录，运行说明与实际打开方式一致。下面保存验收记录；页面源文件需要自己另行备份。
遇到问题，找到下一步
不会设置 390px 或 320px
- 电脑 Chrome 或 Edge 中按 F12；部分电脑需要 Fn + F12，也可通过菜单进入开发者工具。
- 点击手机与平板形状的设备工具栏图标，选择 Responsive（自适应），在宽度处输入 390，再检查 320。
- 暂时找不到时，可以先缩窄窗口检查，并在记录中写“仅缩窄窗口观察”。设备模拟不算真实手机实测。
下载了验收记录，网页文件在哪里
- 本站下载的是你填写的 TXT 记录，不包含自己的网页源码。
- 打开练习目录，将 index.html 和 README.md 一起另行备份。
- 在备份位置双击 HTML 再确认一次。交付本地文件不等于已发布到互联网。
练习与核对
- 逐个检查内容与导航
- 检查不同宽度和键盘操作并记录实际范围
- 保存页面文件、运行说明与验收记录
按实际操作自查，完成标记与成果草稿请在互动版保存。
打开练习与核对带走这一点
能复现、能核对、能交接，作品才方便继续完善。
资料与核对记录
本站通用练习这是一篇本站编写的通用方法与练习，官方资料用于解释产品关系和使用条件；日期反映所引用来源的最近核对。
练习提示、预期结果与检查表不代表官方承诺，也不代表在所列软件中逐一实操通过。
- ChatGPT 桌面应用：安装名称与 Codex 入口
已核对资料 · 获取：2026年9月15日 · 来源更新：未披露
确认安装的软件名为 ChatGPT；应用内仍有 Codex 编程入口。
- ChatGPT Windows 桌面应用官方说明
已核对资料 · 获取：2026年9月15日 · 来源更新：未披露
确认 Windows 安装名称及原生 Codex/PowerShell 环境；本课不以 WSL 为先决条件。
- Cursor 快速开始
已核对资料 · 获取：2026年9月14日 · 来源更新：未披露
文件夹、Agent 快捷键、修改与检查