AI PM Buddy从学习到交付
♢新
正在读取本机记录…
拓展技术沟通◷ 55 分钟

前端职责与 HTML、CSS、JavaScript

理解页面结构、样式和交互逻辑如何组合。

学完你能做到
  • 用自己的话解释“前端职责与 HTML、CSS、JavaScript”及其核心术语。
  • 在真实 AI 产品场景中识别何时应该使用本课方法。
  • 完成一份可沉淀进“系统关系图、一次 API 调用与基础 SQL 练习”阶段任务的实践产出。
01

REAL SCENE

先从一个真实场景开始

!

设计稿要求新增课程卡片，工程师问它是静态内容、响应式布局还是需要点击后实时更新收藏状态。三个问题分别落在结构、呈现和行为层。如果产品经理把前端理解成“画页面”，就会遗漏状态、接口、性能和无障碍要求。

02

PLAIN EXPLANATION

说人话：它到底是什么？

HTML 描述页面内容与语义结构，CSS 控制布局、颜色和响应式呈现，JavaScript 处理交互、状态和网络请求。现代前端还要管理路由、组件、缓存、错误恢复与可访问性。产品经理不必独立开发复杂页面，但应能看懂元素层级、知道何时需要接口、说明不同设备与状态下的行为，并用浏览器工具验证实际实现。

01

语义结构与内容

标题、导航、按钮、表单等应使用正确语义，而不是所有内容都用无意义容器。语义结构帮助搜索、键盘和辅助技术理解页面，也让测试与维护更稳定。

  • 标题层级连续且有主标题
  • 可点击动作使用按钮或链接
  • 表单控件有可读标签
02

布局与响应式

CSS 根据屏幕、容器和内容调整布局。产品需求应描述信息优先级、断点后的重排和触控目标，而不是为每个像素写死坐标；长文本和动态内容必须成为测试样本。

  • 小屏优先保留核心任务
  • 内容变化不造成横向溢出
  • 焦点与对比度满足可访问性
03

状态与网络交互

JavaScript 让界面响应输入并调用 API，但异步状态会产生加载、失败、竞态和重复提交。界面状态应来自权威数据，乐观更新需要失败回滚，客户端校验不能替代服务端规则。

  • 定义初始、加载、成功和失败
  • 防止快速点击产生重复请求
  • 刷新后状态与服务端保持一致
01

用 HTML、CSS、JavaScript 分别思考结构、呈现与行为。

02

前端需求同时覆盖语义、响应式、状态和接口协作。

03

浏览器中的校验和状态不能替代服务端可信规则。

#HTML#CSS#JavaScript
03

KEY POINT

这节课最重要的结论

核心重点
HTML 管结构、CSS 管呈现、JavaScript 管行为，真实前端还负责状态与接口协作。
为什么重要
这决定了听懂工程语言、阅读接口和数据库方案，并判断技术取舍时，团队是否拥有一致、可验证的判断标准。
适用边界
当问题目标、数据来源或失败成本发生变化时，不要机械套用；先重新确认假设和风险等级。
04

EXAMPLES

正确案例与常见反例

✓ 正确做法

收藏按钮使用可读名称，未收藏、提交中、成功和失败状态清楚；点击后先禁用重复操作，API 失败则恢复原状态并提示。桌面卡片三列、小屏单列，长标题换行，键盘焦点可见，刷新后从服务端读取真实收藏。

× 常见误区

整张卡片由无语义容器拼成，只支持鼠标；移动端仍固定三列导致横向滚动。点击收藏只在浏览器改颜色，不调用接口，刷新即丢失；连续点击发送多次请求，失败也没有反馈。

和工程师这样沟通

“卡片结构请保留标题、描述和明确收藏按钮语义；小于 768 像素改为单列且长标题换行。收藏以服务端结果为准，提交中防重复，失败回滚并播报错误，刷新后重新获取权威状态。”

05

HANDS-ON

必做实操任务

本节产出：“系统关系图、一次 API 调用与基础 SQL 练习”阶段任务中的《前端职责与 HTML、CSS、JavaScript》一页实践卡

  1. 步骤 1打开开发者工具检查一个页面的标题、导航、按钮和表单语义结构。

  2. 步骤 2把桌面三栏页面改画成手机单栏，标出隐藏、重排与固定内容。

  3. 步骤 3为一个收藏动作列出本地状态、API 请求、成功更新和失败回滚。

  4. 步骤 4修改浏览器窗口和文字长度，记录溢出、遮挡、焦点与触控问题。

○
实践完成度 0/4

实践结果会自动保存在本机，并进入项目工坊的任务来源。

前端页面状态说明页面与核心任务：____ HTML 语义层级：主标题____ 导航____ 区域____ 按钮____ 表单____ CSS 布局：桌面____ 平板____ 手机____ 内容边界：最长标题____ 空内容____ 大字号____ JavaScript 行为：触发____ 本地状态____ API____ 状态：初始____ 加载____ 成功____ 失败____ 重复操作____ 服务端权威字段：____ 键盘顺序：____　焦点反馈：____ 验收设备和浏览器：____
06

CHECKLIST

产品经理工作检查表

07

MASTERY QUIZ

掌握测验

达到 60% 即可完成本课。

1HTML、CSS、JavaScript 的常见分工是？
2收藏只在浏览器改颜色会有什么主要问题？
3响应式需求最应明确什么？
08

INTERVIEW

常见面试题

产品经理需要理解哪些前端基础，才能写出可执行需求？
展开参考回答

应理解 HTML 语义结构、CSS 布局与响应式、JavaScript 交互与异步状态，以及组件、路由、接口和服务端权威性的关系。回答还应说明如何定义加载失败、重复提交、移动端重排、长内容、键盘焦点和可访问性，并用浏览器工具参与验收。

09

RECAP & FURTHER READING

重点回顾、延伸阅读与下一步

一句话回顾HTML 管结构、CSS 管呈现、JavaScript 管行为，真实前端还负责状态与接口协作。
  1. 1

    围绕“前端职责与 HTML、CSS、JavaScript”继续阅读：查阅对应技术的官方入门文档，重点核对输入输出、失败方式、权限边界与可观测性。

  2. 2

    用“HTML、CSS、JavaScript”作为检索词，分别写下一条定义、一条适用边界和一个反例。

  3. 3

    对照本课正确案例与反例，寻找一个公开案例并记录其中可复用的判断与不能照搬的条件。