实操任务与综合场景
HTML、CSS 与 JavaScript 基础#Python全栈#第七阶段#HTML、CSS 与 JavaScript 基础#实操任务与综合场景约 1609 字 · 5 分钟阅读
追问显示点击任意追问卡片可收起 / 展开
实操：制作一个课程介绍页面，包含导航、课程信息、讲师介绍与报名入口。
追问 怎样选择语义元素、组织标题和图片替代文本，并验证键盘导航和窄屏展示？
实操：实现一个响应式商品卡片列表，桌面多列、窄屏单列。
追问 怎样处理长标题、图片比例、价格对齐和卡片间距？内容增加时如何保持布局稳定？
实操：实现注册表单，包含邮箱、密码、确认密码和同意条款。
追问 怎样关联标签、展示字段错误、支持键盘提交，并说明哪些校验必须由后端执行？
实操：根据商品数组实现分类筛选、名称搜索与价格排序。
追问 怎样保留原始数据并组合条件？没有结果时如何反馈，输入数字与空值时如何处理？
实操：实现待办列表，支持新增、完成、删除和按状态筛选。
追问 如何区分数据状态与 DOM 表现，使用稳定 ID，并验证空输入、重复标题与连续操作？
实操：实现可关闭的展开面板或菜单。
追问 怎样支持键盘操作、维护展开状态并表达
aria-expanded？点击内部元素时为何可能被外部关闭逻辑误处理？场景：点击保存按钮后出现整页刷新，并且接口被调用两次，如何排查？
追问 怎样检查按钮类型、表单默认行为、事件重复绑定和重复提交？前端禁用按钮能否独自保证业务不重复执行？
实操：从教师提供的 JSON 接口加载用户列表，实现加载、空结果、失败与重试状态。
追问 怎样检查响应状态与字段结构？连续重试时如何防止旧响应覆盖新结果，并用 Network 面板核对请求？
场景：开发电脑页面正常，手机上却有横向溢出且按钮难以操作，如何定位？
追问 怎样检查 viewport、固定宽度、长内容、触控目标和悬停依赖？模拟设备之外还应怎样验证？
综合实操：用原生 HTML、CSS 与 JavaScript 实现一个“题库练习页面”。
追问 要求支持分类筛选、展开题目、标记已练习、保存本地进度和加载题目数据；如何组织文件、处理失败与数据版本变化，并展示桌面、窄屏和键盘操作的验收结果？
面试评分参考
每题可按 0～3 分评价：
- 0 分： 无法解释基本概念，或实现不能完成题目要求且无法定位原因。
- 1 分： 能说出常用标签、属性或 API，但忽略行为差异、边界条件和验证方法。
- 2 分： 能选择合理结构与方法，实现主要功能，并处理常见输入、布局与请求异常。
- 3 分： 能比较实现方案，兼顾响应式、键盘使用、状态一致性与前后端边界，并提供可重复的排查和验收步骤。
重点观察：
- 页面结构： 是否理解语义、表单提交和标签关联，而不是只追求看起来相似。
- 布局能力： 能否解释盒模型、层叠和布局参照，处理长内容、窄屏与样式覆盖问题。
- 语言基础： 是否掌握类型、作用域、函数、集合与引用关系，避免照搬 Python 的行为预期。
- 交互与异步： 能否维护数据和页面状态，理解事件传播，并处理请求失败、重复操作与响应先后顺序。
- 工程验证： 是否会使用元素、控制台和网络面板，有明确复现步骤，并验证键盘、不同尺寸与异常状态。
使用建议： 分数用于课堂诊断和同组比较，不直接对应薪资或录用结论；本阶段是全栈基础训练，应结合后续框架、接口和项目实战综合评价。
课堂练习与组卷建议
- 基础口试： HTML 与表单 3 题、CSS 3 题、JavaScript 4 题，要求结合具体页面或短代码说明行为。
- 布局练习： 使用同一组长短不一的内容，完成桌面和窄屏布局，并解释选择 Flex 或 Grid 的原因。
- 交互练习： 从 93～96 题选 1 题，提交页面文件、关键实现说明和边界操作记录。
- 请求练习： 教师准备正常、空列表、错误状态和延迟响应的接口，让学生验证四类状态及连续操作。
- 模拟面试： 基础概念 4 题、代码分析 3 题、故障排查 2 题、综合实操 1 题；建议口试 30～40 分钟，实操 60～90 分钟。
- 验收材料： HTML、CSS、JavaScript 文件，运行说明、接口约定、关键页面截图，以及窄屏、键盘和失败场景的验证记录；网络请求练习通过本地 Web 服务运行，明确页面与接口地址。
下一阶段： Vue/React 前端开发基础，学习组件、状态、路由与接口联调，承接本阶段的原生页面能力。