HTML 与 CSS 响应式布局：从语义化到现代布局与无障碍

0. 元信息

• 主题路径：docs/topics/html-css-responsive/README.md
• 主分类：前端与客户端
• 辅助分类：工程技术 / 无障碍
• 适合对象：会用 HTML/CSS 写静态页、想系统掌握语义化、CSS 基础、现代布局、响应式策略与可访问性的开发者
• 建议周期：4～6 周（每周 10～14 小时，至少 60% 时间写代码 + 1 屏实测）
• 前置知识：会写 HTML/CSS、能用浏览器 DevTools、无后端依赖
• 最终目标：能独立设计并实现一套兼容桌面/平板/手机/打印的完整响应式页面，且通过 WCAG 2.2 AA 关键审计

1. 学习路线

语义化 HTML5 与 landmark
  → 表单与可访问控件
  → CSS 基础（盒模型 / 文档流 / 定位 / 继承 / 优先级）
  → Flexbox 完整模型
  → Grid 二维布局
  → Container Queries 与流式排版
  → 颜色、对比度、OKLCH、prefers-color-scheme
  → 动画、过渡、prefers-reduced-motion、View Transitions
  → 性能（critical CSS、content-visibility、CSS containment、字体加载）
  → 无障碍（WCAG 2.2、ARIA、键盘导航、焦点管理）
  → 工具链（PostCSS、Sass、Lightning CSS、Tailwind、UnoCSS）

按”结构 → 皮肤 → 行为 → 兼容 → 无障碍 → 工程”的顺序学。每一步都跑在真浏览器上。CSS 看不见写不好——必须上设备或 DevTools 设备模拟看真实断点。

2. 阶段周数分配（4~6 周，量力而行）

4 周方案节奏紧。6 周方案多出的时间做设备回归、断点对照、Lighthouse 复跑，不用来囤视频。

3. 九阶段表

每个阶段都对照一个真实设备的渲染——单看桌面调试器容易误判。

4. 第一周任务

Day 1 约定：编辑器 = VS Code + 官方 HTML/CSS 扩展 + axe DevTools 扩展。本计划全程使用静态 HTML + CSS，不引入框架。浏览器配置：Chrome + Firefox + Safari（mac/iOS 必需）。所有截图与 DevTools 设备模拟记录到 notes/week1-day1.md，后面复盘时引用。

Day 7 步骤 A 只求”手机能看”。步骤 B 每次只改一个断点，记下像素。

5. 阶段通用验收

1. 不看答案重写该阶段的最小 demo；
2. 解释”它解决什么问题、为什么比旧方案好”；
3. 截图 3 种宽度（360 / 768 / 1440）+ 打印预览 + 高对比模式；
4. 在真机上跑过至少一次（iPhone 真机最稳，Android 模拟器可）；
5. axe-core / Lighthouse a11y ≥ 95；
6. 列出至少 3 类边界（窄屏 / 长串 / 已禁用 JS / prefers-reduced-motion）；
7. 能修改现有页面（换主题、加断点、动画、accessibility）而不是只能照抄。

6. 最终验收

• 独立完成：1 套完整响应式营销页（4 个断点），1 套公司官网首页（带导航 / hero / 特性 / 表单 / 页脚），覆盖浅色 / 深色 / 高对比 / 打印 4 态；
• 至少完成 12 个练习：3 个语义化结构、3 个表单校验、3 个 Flex / Grid 对比、3 个响应式策略（mobile-first / clamp() / container queries）；
• 完成 1 个综合项目（首选营销页 + 公司官网首页）；
• Lighthouse 跑分：Performance ≥ 90、A11y ≥ 95、Best Practices ≥ 90、SEO ≥ 90；
• axe-core 0 critical / serious 违规；
• 能用 15 分钟讲清”viewport / dpi / prefers-* 与 container queries 的边界关系”。

7. 综合项目

首选：设计并实现一套兼容手机 / 平板 / 桌面 / 打印的完整响应式营销页 + 公司官网首页（同一品牌两套页）。

必做：

• 4 个断点：360 / 768 / 1024 / 1440，全部跑实机或 Chrome Device Mode 截图；
• 4 个 prefers-* 状态：浅色 / 深色 / prefers-reduced-motion: reduce / forced-colors: active；
• 1 个打印样式：@media print 隐藏 nav / footer，保留主要内容并加 URL 链接；
• 表单：注册 / 订阅 / 联系 至少 2 种，含字段级错误提示；
• 资源：自托管可变字体 1 个；图标用 SVG inline 或 SVG sprite；
• 性能：critical CSS 内联首屏，剩余 CSS 异步加载；首屏图片 fetchpriority="high" + decoding="async"；
• 可访问：跳转链接、focus-visible、skip nav、aria-current、aria-live（表单提交反馈）；
• 工具链：Lightning CSS 压缩 + PostCSS（autoprefixer + nesting）+ stylelint（a11y + 现代语法）。

备选：重构一套遗留桌面端网站为 mobile-first 响应式，并完成 WCAG 2.2 AA 审计。

要求：保留原页面内容与路由，但所有页面 ≤ 768px 不出现横向滚动；桌面版沿用原视觉但加断点；axe-core 0 critical；附”原 vs 新”截图对比与一份 WCAG 2.2 AA 自评表。

任何项目都要包含：

1. 需求与受众；
2. 设计 token（颜色 / 字号 / 间距 / 圆角 / 阴影 / 断点）；
3. 完整源码（HTML + CSS，可能含少量 JS 用于 menu 开关）；
4. 真机 / 模拟截图（4 断点 × 4 状态）；
5. Lighthouse + axe 报告（HTML / JSON）；
6. README + 一段 5 分钟讲设计取舍的视频或笔记；
7. retrospective.md：踩坑清单、设计 token 演进、未完成项。

8. 推荐开源资料

按角色分工，避免堆链接。

默认顺序：MDN / web.dev 主线 → 写 demo → CSS-Tricks / Smashing 验错 → Lea Verou / Rachel Andrew 看现代 CSS 一手 → WCAG 2.2 对照 → caniuse 查兼容性 → axe / Lighthouse 复跑。复制代码前先看 LICENSE。

9. 学习资料汇聚（v0.3 自包含）

本节由本计划生成。链接指向原始材料或作者公开内容。规范和浏览器支持会更新，决策时再查版本与日期。

9.1 背景与动机

HTML 来自 Tim Berners-Lee 1991 年的 Web 提案，最初只有 18 个元素。CSS 1996 年才成为 W3C 推荐标准。最早的 Web 是学术文档，所有样式都靠浏览器默认。

2005 年前后，Web 开始承担”应用”的职责。随之而来的是 jQuery、float 布局、表格布局、IE 兼容性噩梦。2012 年响应式网页设计（RWD，Ethan Marcotte）让 @media 成为事实标准。2017 年 Grid 落地、2020~2023 年 Container Queries 与 Cascade Layers 让 CSS 终于能像现代布局系统那样工作。

今天的 HTML/CSS 是”工程化的样式 + 结构化语义”：HTML5 的 landmark 让辅助技术能精准跳区；Flexbox + Grid 让”垂直居中”与”等高列”不再是玄学；Container Queries 让组件真正独立于页面尺寸；WCAG 2.2 把无障碍从”加分项”变”准入门槛”。

学会它，等于把 Web 的地基铺好——后面 JS 框架再多也是在这层之上长出来的。

9.2 概念地图

flowchart LR
  HTML[HTML 语义化]
  HTML --> Landmark[Landmark: header/nav/main/aside/footer]
  HTML --> Section[article/section/figure/details]
  HTML --> Form[表单 + label + fieldset]
  HTML --> A11yAttr[ARIA: roles / aria-*]

  CSS[CSS]
  CSS --> Foundation[基础: 盒模型 / 文档流 / 定位]
  CSS --> Cascade[cascade / specificity / @layer / 继承]
  CSS --> Selectors[选择器]

  Foundation --> Flex[Flexbox]
  Foundation --> Grid[CSS Grid]
  Grid --> Subgrid[subgrid]
  Flex --> Multi[多列]
  Grid --> CQ[Container Queries + units]

  CSS --> Color[Color: oklch / color-mix]
  CSS --> Theme[prefers-color-scheme / forced-colors]
  CSS --> Motion[transition / animation / view transitions]
  CSS --> ReducedMotion[prefers-reduced-motion]

  CSS --> Perf[性能: critical CSS / content-visibility / contain]
  CSS --> Font[字体: font-display / size-adjust]

  HTML --> A11y[WCAG 2.2]
  CSS --> A11y
  A11y --> Keyboard[键盘导航 + focus-visible]
  A11y --> ScreenReader[屏幕阅读器]
  A11y --> Contrast[对比度 + 焦点环]

  CSS --> Tool[工具链]
  Tool --> PostCSS[PostCSS]
  Tool --> Sass[Sass]
  Tool --> LC[Lightning CSS]
  Tool --> Tailwind[Tailwind / UnoCSS]

关系说明：

• HTML 语义化是地基；没有 landmark 与 label，再好看的样式也对屏幕阅读器不友好。
• CSS 基础（盒模型 / 文档流）决定了 Flex 与 Grid 的边界；不理解 BFC / inline-formatting 就会踩”margin 折叠消失”等坑。
• 现代布局（Flex / Grid / Container Queries）把”页面级布局”与”组件级布局”分开。
• 颜色、动画、字体三块影响”手感与可访问性”，与 prefers-* 媒体查询深度耦合。
• 性能（critical CSS / content-visibility）放在 CSS 章节——CSS 是 Web 渲染的关键路径。
• 工具链是收口，把上面所有能力落到一个可重复构建的产物里。

9.3 基础知识讲解

9.3.1 经典论文 / 规范

9.3.2 经典书籍

备查：Jon Duckett 的 HTML and CSS、Robin Nixon 的 Learning PHP, MySQL & JavaScript（首页基础）。

9.3.3 优秀博客 / 文档

9.3.4 核心人物

9.3.5 开发方法

9.3.6 必读资源子集（最少 12 条）

1. MDN — HTML elements reference：所有 HTML 元素的权威。
2. MDN — CSS reference：所有 CSS 属性与示例的权威。
3. W3C — Cascading Style Sheets (CSS) Snapshot：CSS 各模块当前规范状态。
4. W3C — WCAG 2.2：无障碍验收基准。
5. web.dev — Learn HTML / CSS / Accessibility：Google 出品的结构化主线。
6. CSS-Tricks — A Complete Guide to Flexbox：Flexbox 速查。
7. CSS-Tricks — A Complete Guide to CSS Grid：Grid 速查。
8. Smashing Magazine — CSS Category：长文与现代方案。
9. Lea Verou — blog：现代 CSS 一手。
10. Rachel Andrew — blog：Grid / Subgrid / Container Queries 一手。
11. caniuse：浏览器支持。
12. The A11y Project：无障碍速查。

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

• HTML 定义结构与语义；CSS 定义样式与动画；ARIA 补 gap；WCAG 给出可访问性验收。
• W3C 规范定义”应当怎么工作”；浏览器实现定义”今天能怎么用”；caniuse 桥接两者。
• 工具链（Lightning CSS / PostCSS / Tailwind）负责把现代 CSS 落到当前浏览器能跑的产物。

9.6.3 Structure

• HTML：<!DOCTYPE html> → <html lang> → <head>（meta / title / link / style）→ <body>（landmark + 内容）。
• CSS：选择器 → 声明 → 值；@media / @container / @supports 控制条件；@layer 控制 cascade 顺序。
• 现代特性速记：
  • 布局：flex、grid、subgrid、columns、@container、container-type、container-name。
  • 颜色：oklch() / oklab() / color-mix() / color() / light-dark()。
  • 动画：transition、@keyframes、animation、prefers-reduced-motion、@view-transition。
  • 性能：content-visibility: auto/hidden、contain、contain-intrinsic-size、font-display。
  • Cascade：@layer、revert-layer、:where()（特异性 0）、:is() / :not()。
• 必须掌握的属性：box-sizing、display、position、inset、margin / padding / gap / place-*、min-width / max-width / clamp()、aspect-ratio、color-scheme、accent-color、color、background、border、outline、font / line-height / letter-spacing、transform / transition。

9.6.4 Ecosystem

• 浏览器：Chromium / Gecko / WebKit 三家主流，所有现代特性在 caniuse 上有 baseline；
• 编辑器：VS Code、JetBrains 系列；
• 工具链：PostCSS、Tailwind / UnoCSS、Lightning CSS、Sass、stylelint、autoprefixer；
• 验证工具：W3C HTML/CSS validator、Lighthouse、axe-core / axe DevTools、Pa11y；
• 设计协作：Figma tokens → JSON → CSS 自定义属性。

9.6.5 Depth Tiers

本父主题目标：L3。综合项目阶段可触及局部 L4（设计 token / 工具链选型 / WCAG 2.2 审计）。

9.6.6 Source

• MDN Web Docs：HTML / CSS / ARIA 权威参考。
• W3C CSS Working Group：CSS 模块状态。
• W3C WCAG 2.2：无障碍验收基准。
• caniuse：浏览器支持与 baseline。
• 引用快照日期：2026-07-30。

10. 常见误区

• 拿 <div> 全局包一切，丢掉 landmark；
• <label> 写成 <label>用户名</label>，不绑 for；
• 用 <div onClick> 取代 <button>，丢键盘可访问性；
• 把 outline: none 当”美化”，失去焦点环；
• 媒体查询全部写 max-width，结果 mobile-first 没贯彻；
• 用 vw 设字号，桌面下字号爆炸；
• auto-fit 与 auto-fill 傻傻分不清；
• 用 Grid 但忘了 display: grid，子元素不生效；
• container queries 用在错地方（容器自身）；
• 颜色用 hex 写死，不走 token；
• 动画全屏滚动 + 高频闪烁，没考虑 prefers-reduced-motion；
• 暗色模式只在 body 写一套，所有组件不响应；
• 把 Tailwind 当唯一方案，看不懂原生 CSS；
• 把 Sass 当 ESM，写出无法维护的 mixin 嵌套；
• position: sticky 失效不查 overflow 祖先；
• content-visibility: auto 没设 contain-intrinsic-size，滚动卡顿；
• print 样式完全没写；
• :focus-visible 与 :focus 混用，鼠标点击也带焦点环；
• ARIA 当万灵药补 HTML 结构错误；
• 上线后跑 Lighthouse 才发现 a11y 60 分。

11. 所有知识点分类（统一规则）

1. 编程语言
2. 数据结构与算法
3. 计算机基础
4. 工程技术
5. Web 与后端
6. 前端与客户端
7. 数据与人工智能
8. 项目与职业能力
9. 安全与可靠性

本计划归属：前端与客户端 主 + 无障碍与性能（工程技术） 辅。