HTML/CSS 综合实战

这一课你将能做到

1. 从零构建一个完整的 CodeForge 课程详情页，包含语义化结构、响应式导航、课程卡片网格和登录表单
2. 综合运用 Flexbox、Grid、自定义属性、媒体查询和容器查询，实现一个无需 JavaScript 即可自适应不同屏幕的页面
3. 理解「结构 → 样式 → 响应式 → 可访问性」的完整开发流程

为什么要学

零散的知识点只有在实战中才能连成体系。你可能已经知道 <article> 的语义、flex: 1 的含义、grid-template-areas 的写法，但当你面对一个真实的设计稿——顶部导航、hero 区域、课程卡片网格、侧边栏推荐、页脚版权——你需要的不是单点知识，而是如何把它们组织成一个自洽、可维护的整体。

本课不引入任何 JavaScript 框架，只用 HTML 和 CSS 构建一个完整的课程详情页。通过这个实战，你会体会到：为什么语义化标签让结构更清晰，为什么 CSS 变量让主题切换更容易，为什么移动优先的媒体查询比桌面优先更优雅。

先建立图像

页面整体结构：

┌──────────────────────────────────────────┐
│  [Logo]    [课程] [路线图] [社区]   [登录] │  ← header (Flexbox)
├──────────────────────────────────────────┤
│                                          │
│     HTML/CSS 基础精讲                    │  ← hero section
│     从零构建现代网页的完整入门课程         │
│                                          │
├──────────────────┬───────────────────────┤
│                  │                       │
│  [课程卡片]       │  [讲师信息]            │  ← main (Grid: 2列)
│  [课程卡片]       │  [相关推荐]            │
│                  │                       │
├──────────────────┴───────────────────────┤
│  © 2026 CodeForge                        │  ← footer
└──────────────────────────────────────────┘

移动端（< 768px）：单列，导航折叠为汉堡菜单
平板（768px+）：双列，卡片 2 列
桌面（1024px+）：双列，卡片 3 列

跟着做

步骤 1：HTML 语义化骨架

创建 practice.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML/CSS 基础精讲 | CodeForge</title>
  <link rel="stylesheet" href="practice.css">
</head>
<body>
  <header>
    <nav aria-label="主导航">
      <a href="/" class="logo">CodeForge</a>
      <ul class="nav-links">
        <li><a href="#courses">课程</a></li>
        <li><a href="#roadmaps">路线图</a></li>
        <li><a href="#community">社区</a></li>
      </ul>
      <div class="nav-actions">
        <a href="#login" class="btn btn-ghost">登录</a>
        <a href="#register" class="btn btn-primary">注册</a>
      </div>
      <button class="menu-toggle" aria-label="打开菜单" aria-expanded="false">&#9776;</button>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="course-title">
      <div class="container">
        <span class="badge">前端基础</span>
        <h1 id="course-title">HTML/CSS 基础精讲</h1>
        <p class="hero-desc">从零开始构建现代网页。掌握语义化标签、CSS 盒模型、Flexbox、Grid 布局与响应式设计。</p>
        <div class="hero-meta"><span>36 课时</span><span>&middot;</span><span>12 小时视频</span><span>&middot;</span><span>配套练习</span></div>
      </div>
    </section>

    <section class="content" aria-labelledby="content-title">
      <div class="container grid-layout">
        <div class="main-content">
          <h2 id="content-title" class="section-title">课程大纲</h2>
          <ol class="syllabus">
            <li><h3>网页如何工作</h3><p>浏览器渲染原理、HTML/CSS/JS 职责分离、开发者工具。</p></li>
            <li><h3>HTML 文档结构与内容标签</h3><p>标准骨架、语义化标签、列表、链接、图片与表格。</p></li>
            <li><h3>HTML 表单与语义化</h3><p>登录表单构建、ARIA 可访问性、表单验证基础。</p></li>
            <li><h3>CSS 基础与盒模型</h3><p>选择器、层叠与继承、特异性、盒模型、自定义属性。</p></li>
            <li><h3>Flexbox 与 Grid 布局</h3><p>一维弹性布局、二维网格布局、响应式卡片网格。</p></li>
            <li><h3>响应式设计与现代 CSS</h3><p>媒体查询、容器查询、流体排版、深色模式适配。</p></li>
          </ol>
        </div>

        <aside class="sidebar" aria-label="课程信息">
          <div class="sidebar-card">
            <h2 class="sidebar-title">讲师介绍</h2>
            <div class="instructor">
              <div class="avatar" role="img" aria-label="讲师头像">CF</div>
              <div>
                <p class="instructor-name">CodeForge 团队</p>
                <p class="instructor-bio">专注于前端基础教育的工程师团队，已有超过 10 万名学员。</p>
              </div>
            </div>
          </div>
          <div class="sidebar-card">
            <h2 class="sidebar-title">相关课程</h2>
            <ul class="related-list">
              <li><a href="#">JavaScript 核心原理</a></li>
              <li><a href="#">React 开发实战</a></li>
              <li><a href="#">TypeScript 从入门到进阶</a></li>
            </ul>
          </div>
        </aside>
      </div>
    </section>
  </main>

  <footer><div class="container"><p>&copy; 2026 CodeForge 学习平台. 保留所有权利。</p></div></footer>
</body>
</html>

语义结构：<header> 包导航，<main> 包主内容，<section> 带标题，<aside> 包辅助信息，<footer> 包版权。每个区域都有 aria-label 或 aria-labelledby 关联。

步骤 2：核心 CSS 片段

创建 practice.css，核心样式如下（完整代码约 200 行）：

:root {
  --primary: #2563eb; --primary-hover: #1d4ed8; --accent: #7c3aed;
  --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --text-muted: #64748b;
  --border: #e2e8f0; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --surface: #1e293b; --text: #f8fafc; --text-muted: #94a3b8; --border: #334155; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem); }

header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
nav { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.logo { font-weight: 700; font-size: 1.25rem; color: var(--primary); text-decoration: none; }
.nav-links { display: none; gap: 1.5rem; list-style: none; }
.nav-links a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.nav-actions { display: none; gap: 0.75rem; }
.menu-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.btn-primary { background: var(--primary); color: white; border: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }

.hero { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: linear-gradient(135deg, #eff6ff, #f5f3ff); text-align: center; }
@media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #1e293b, #0f172a); } }
.badge { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(37, 99, 235, 0.1); color: var(--primary); font-size: 0.875rem; font-weight: 500; border-radius: 999px; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem); line-height: 1.2; margin-bottom: 1rem; }
.hero-desc { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); color: var(--text-muted); max-width: 640px; margin-inline: auto; margin-bottom: 1.5rem; }
.hero-meta { display: flex; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); }

.content { padding-block: 3rem; }
.grid-layout { display: grid; gap: 2rem; }
.section-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.syllabus { list-style: none; counter-reset: lesson; }
.syllabus li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: flex-start; }
.syllabus li::before { counter-increment: lesson; content: counter(lesson, decimal-leading-zero); font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1; flex-shrink: 0; min-width: 2.5rem; }
.syllabus h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.syllabus p { color: var(--text-muted); font-size: 0.9375rem; }

.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.sidebar-title { font-size: 1.125rem; margin-bottom: 1rem; }
.instructor { display: flex; gap: 1rem; align-items: flex-start; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; }
.instructor-name { font-weight: 600; margin-bottom: 0.25rem; }
.instructor-bio { font-size: 0.875rem; color: var(--text-muted); }
.related-list { list-style: none; }
.related-list li { padding-block: 0.5rem; border-bottom: 1px solid var(--border); }
.related-list li:last-child { border-bottom: none; }
.related-list a { color: var(--text); text-decoration: none; font-size: 0.9375rem; }

footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: 2rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .menu-toggle { display: none; }
  .grid-layout { grid-template-columns: 1fr 280px; }
}
@media (min-width: 1024px) {
  .grid-layout { grid-template-columns: 1fr 320px; gap: 3rem; }
}

步骤 3：测试与验证

1. 在 Chrome 中打开 practice.html，按 F12 切换到移动设备模拟，测试 375px、768px、1024px、1440px 下的显示效果
2. 检查标题层级：页面应只有一个 <h1>，且 <h2>、<h3> 层级连续
3. 只用键盘操作：按 Tab 依次聚焦 logo、导航链接、按钮、大纲项，确认焦点可见且顺序合理
4. 切换系统深色模式，观察页面是否自动适配
5. 运行 Lighthouse，可访问性分数应 ≥ 90

讲清楚要点

1. 结构与样式分离的边界：HTML 负责语义和层级，CSS 负责视觉和布局，两者不要互相侵入。不要在 HTML 中写 style="color: red"，也不要在 CSS 选择器中依赖具体的 HTML 结构。

2. CSS 变量是主题系统的基石：本页所有颜色都通过变量引用。切换深色模式只需覆盖 :root 中的 6 个变量，而不是全局搜索替换几十个颜色值。这是设计令牌（Design Tokens）的基础概念。

3. 移动优先的媒体查询策略：基础样式针对小屏，断点用 min-width 逐步增强。这样小屏设备不会加载冗余的桌面样式，且代码逻辑自然流畅。

4. 语义化是 SEO 和无障碍的基础：<header>、<nav>、<main>、<section>、<aside>、<footer> 让搜索引擎快速识别页面结构，让屏幕阅读器用户通过地标（landmark）快速跳转。

5. 流体排版减少断点维护：标题和描述使用 clamp()，在 320px 到 1920px 之间平滑缩放，无需为每个断点单独写 font-size。这显著减少了代码量和维护成本。

6. 容器查询的实战价值：本页侧边栏卡片内部没有使用容器查询，但在更复杂的组件库中，卡片放在窄侧边栏和宽主内容区需要不同布局——这正是容器查询解决的核心问题。

你可能会懵的地方

• 「为什么要把 CSS 拆成单独文件，而不是写 <style>？」 单文件 Demo 可以写 <style>，但生产环境中外部 CSS 可被浏览器缓存，多页面共享同一份样式，减少重复下载。

• 「选择器很多，怎么管理不混乱？」 按页面区域组织（导航、Hero、内容、侧边栏、页脚、响应式），每个区域内部按「布局 → 元素 → 状态（hover/focus）」排序。更大项目应使用 BEM、SMACSS 或 CSS-in-JS 等命名规范。

• 「为什么不用 Tailwind 写？不是更方便吗？」 Tailwind 建立在原生 CSS 之上。不理解 Flexbox、Grid、层叠和自定义属性，用 Tailwind 也只是「知其然不知其所以然」。本课程故意用原生 CSS 训练底层能力，下一课会介绍 Tailwind。

• 「这个页面没有 JavaScript，菜单怎么展开？」 纯 HTML/CSS 可以用 :target 伪类或 checkbox hack 实现无 JS 菜单，但可访问性不佳。生产环境中，汉堡菜单需要 JavaScript 切换 aria-expanded 和 hidden 属性，并管理焦点。本课为聚焦 CSS 布局，菜单按钮仅作视觉占位。

• 「如何确定断点值？」 不应基于具体设备，而应基于内容。当课程卡片在某一宽度下变得过于拥挤时，那个宽度就是断点。常用参考值 640px、768px、1024px、1280px、1440px 来自内容而非设备型号。

错法对照

错法	问题	正解
HTML 中大量写 style="..."	难以维护，权重过高，无法缓存复用	用外部 CSS 和类选择器
用 !important 覆盖框架样式	层叠秩序破坏，后续调试困难	提高选择器特异性或调整加载顺序
断点基于 iPhone/Android 具体型号	设备繁多，无法覆盖	基于内容何时崩坏设断点
忽略键盘焦点样式	键盘用户无法知道当前焦点在哪	为 :focus-visible 提供可见轮廓
深色模式只改背景不改文字	对比度不足，无法阅读	用变量系统统一改背景、文字、边框
图片没有 width 和 height	加载时布局偏移（CLS）	始终提供图片尺寸，或用 CSS aspect-ratio

卡点急救

1. 页面在手机上看被缩小：检查 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是否存在。没有它所有媒体查询都无效。

2. CSS 文件加载了但样式不对：检查 link 标签的 href 路径是否正确，文件编码是否为 UTF-8，在 Network 面板确认 CSS 文件返回 200。

3. Lighthouse 可访问性分数低：常见原因包括图片缺少 alt、颜色对比度不足、标题层级跳跃、表单字段没有 label。逐项修复后再运行审计。

面试常问

• 「描述一下你构建一个响应式页面的完整流程。」 一、分析设计稿，识别页面区域和组件。二、写语义化 HTML 骨架，使用正确的标题层级和 ARIA 属性。三、设置 CSS 变量系统。四、写移动优先的基础样式。五、用 clamp() 实现流体排版和弹性间距。六、用 min-width 媒体查询逐步增强布局。七、测试键盘可访问性、屏幕阅读器播报和 Lighthouse 分数。八、添加深色模式支持和打印样式。

• 「如何确保页面在不同设备上体验一致？」 一、使用响应式图片（srcset + sizes）。二、使用 clamp() 和容器查询让组件自适应容器。三、在真实设备上测试。四、检查触摸目标尺寸（至少 44×44 CSS 像素）。五、确保字体在各类屏幕上清晰可读（系统字体栈、适当行高）。

• 「CSS 变量和预处理器变量（Sass）如何选择？」 CSS 自定义属性运行时可用，支持作用域和继承，可被 JavaScript 读写，适合主题切换。Sass 变量编译时静态替换，适合管理编译期常量（如断点值）。两者可共存：Sass 管理构建期配置，CSS 变量管理运行时主题。

自测三问

1. 如果你要把这个页面的课程大纲从有序列表改成卡片网格，最少需要修改哪些 CSS？如何确保修改不破坏现有语义结构？
2. 这个页面如何同时支持「系统深色模式」和「手动切换深色模式」？描述实现思路。
3. 为什么本页面的导航栏在 768px 以下隐藏链接、显示汉堡按钮？如果要在不增加断点的情况下让导航更早换行，可以怎么做？

小结一句话

一个专业的页面是「语义 HTML + 现代 CSS + 响应式策略 + 可访问性」的有机整体；本课的综合实战把这些知识点串联成一条完整的开发流水线，是你从「会写代码」到「会写产品」的关键跨越。

延伸

• MDN：CSS 布局
• Web.dev：响应式设计模式
• 下一课：进阶方向——Tailwind CSS、Next.js 与现代前端工程化。