AIGuide 书页标识AIGuide

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

中文教程 · 独立阅读版

把网页从“能打开”检查到“能使用”

按桌面、手机、键盘与内容清单验收，保存自己的交付记录。

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

进入互动版，练习并保存成果
本篇目录
开始前准备 · 设备、账号与费用

能在本地打开自己的网页。使用现有浏览器即可，不要求安装另一款编程工具。

核对范围：浏览器缩窄窗口、设备模拟和真实手机检查是不同范围，请在验收记录中写明实际做了哪一种。

1. 按需求单检查，而不是凭印象

下载网页验收清单

1. 内容与导航

对照需求单，点击简介、项目、联系三个导航。

同一网页增加阅读、计划、记录三个标签，其余内容保持一致。
点击看原图 ↗
本站 Codex 会话生成 · 浏览器实拍 · 2026-09-16

2. 检查手机宽度与放大阅读

本次已在 1440、390、320px 检查实际网页；文字放大与真实手机仍需另测。

1. 窄屏检查

把浏览器切到 390px 和 320px，检查标题、标签与页尾。

实际网页在390像素模拟宽度下显示为单列，三个标签没有溢出。
点击看原图 ↗
本站生成作品 · 390px 浏览器模拟 · 2026-09-16
如何测准确的宽度

在 Chromium 浏览器的开发者工具中开启设备工具栏，分别设为 390px 和 320px。尚不会操作时记录“仅缩窄窗口观察”。浏览器模拟不能写成真实手机实测。

3. 再用键盘走一遍

按 Tab 移到导航链接，确认焦点清晰；按 Enter 检查能否跳转。

只用键盘也能操作步骤图解 · 非软件截图
  1. Tab

    移动到下一个链接

  2. 看到焦点框

    知道当前选中哪里

  3. Enter

    完成与鼠标点击相同的动作

如果以后添加表单

本练习没有真实表单，无需临时添加。自己的项目有表单时，另检查输入、错误提示与实际提交状态。

4. 把问题写成工具能复现的描述

把真实问题填进模板，发回原任务。修复后重做相同操作，并检查相邻内容。

问题描述模板 · 方括号处换成实际记录
请修复我在当前网页发现的问题。
环境与宽度：[填写实际环境]
复现步骤：[填写操作]
实际结果：[填写问题]
预期结果：[填写目标]
只修改相关区域，保留其他内容。完成后说明改动文件，并复查相同操作。

5. 保存本地交付记录

分别保存网页源文件、README.md 和下方验收记录；没有测过的设备如实写明。

下载本次检查范围
完成个人主页项目自查反馈 ChatGPT 网页练习的实际体验选学：用 Cursor 排查表单问题

遇到问题，找到下一步

不会设置 390px 或 320px
  1. 电脑 Chrome 或 Edge 中按 F12；部分电脑需要 Fn + F12，也可通过菜单进入开发者工具。
  2. 点击手机与平板形状的设备工具栏图标，选择 Responsive（自适应），在宽度处输入 390，再检查 320。
  3. 暂时找不到时，可以先缩窄窗口检查，并在记录中写“仅缩窄窗口观察”。设备模拟不算真实手机实测。
回到相关步骤
下载了验收记录，网页文件在哪里
  1. 本站下载的是你填写的 TXT 记录，不包含自己的网页源码。
  2. 打开练习目录，将 index.html 和 README.md 一起另行备份。
  3. 在备份位置双击 HTML 再确认一次。交付本地文件不等于已发布到互联网。
回到相关步骤

练习与核对

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

打开练习与核对

带走这一点

能复现、能核对、能交接，作品才方便继续完善。

资料与核对记录

本站通用练习

这是一篇本站编写的通用方法与练习，官方资料用于解释产品关系和使用条件；日期反映所引用来源的最近核对。

练习提示、预期结果与检查表不代表官方承诺，也不代表在所列软件中逐一实操通过。

查看来源与日期

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