进阶方向与下一步

这一课你将能做到

1. 理解 Tailwind CSS 的实用类（utility-first）工作流，以及它与手写 CSS 的关系
2. 了解 Next.js 等现代框架如何处理样式、路由和组件化，以及 HTML/CSS 知识在其中如何发挥作用
3. 规划从前端基础到全栈开发的个人学习路径，知道每门技术的依赖关系

为什么要学

HTML 和 CSS 是前端的「地基」，但现代 Web 开发已经远超「写一个 .html 文件」的范畴。CodeForge 的真实产品使用 React 组件构建界面，用 Tailwind CSS 管理样式，用 Next.js 处理服务端渲染和路由。如果你只停留在「我会写标签和样式」，面试时会被问到「组件化怎么做」「样式隔离怎么实现」「SSR 和 CSR 的区别」等问题。

本课不是深入教框架，而是帮你建立「从基础到工程化」的地图。理解 HTML/CSS 在框架中的位置，理解为什么 Tailwind 能提升效率，理解 Next.js 与传统多页网站的区别——这些认知决定了你后续学习框架时的速度和深度。

先建立图像

前端技术栈的层次结构：

┌─────────────────────────────────────────┐
│  Next.js / Nuxt / SvelteKit            │  ← 全栈元框架（路由、SSR、API）
├─────────────────────────────────────────┤
│  React / Vue / Svelte                   │  ← UI 框架（组件化、状态管理）
├─────────────────────────────────────────┤
│  Tailwind / CSS Modules / Styled JSX    │  ← 样式方案（工程化管理）
├─────────────────────────────────────────┤
│  HTML5 + CSS3 + ES6+                    │  ← 你目前所在的地基层
├─────────────────────────────────────────┤
│  HTTP / DNS / Browser Rendering          │  ← 网络与浏览器原理
└─────────────────────────────────────────┘

框架没有替代 HTML/CSS，而是把它们封装成更高效的开发模式。

跟着做

步骤 1：用 Tailwind CSS 重写导航栏

传统手写 CSS：

nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: white; border-bottom: 1px solid #e2e8f0; }

Tailwind 实用类写法：

<nav class="flex items-center justify-between px-6 py-3 bg-white border-b border-gray-200">
  <!-- 内容 -->
</nav>

Tailwind 的本质是「把 CSS 属性变成类名」，你不需要在 CSS 文件和 HTML 文件之间来回切换。上面的 flex、items-center、justify-between 分别对应 display: flex、align-items: center、justify-content: space-between。

创建一个 next-demo.html 体验 Tailwind（通过 CDN，仅用于学习）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind 体验</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind.config = { theme: { extend: { colors: { primary: '#2563eb' } } } }</script>
</head>
<body class="bg-slate-50 text-slate-900">
  <nav class="sticky top-0 z-10 bg-white border-b border-slate-200">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-14">
        <a href="#" class="text-xl font-bold text-primary">CodeForge</a>
        <ul class="hidden md:flex items-center gap-6">
          <li><a href="#" class="text-sm font-medium text-slate-700 hover:text-primary">课程</a></li>
          <li><a href="#" class="text-sm font-medium text-slate-700 hover:text-primary">路线图</a></li>
          <li><a href="#" class="text-sm font-medium text-slate-700 hover:text-primary">社区</a></li>
        </ul>
        <div class="hidden md:flex items-center gap-3">
          <a href="#" class="px-4 py-2 text-sm font-medium text-slate-700 border border-slate-300 rounded-lg hover:bg-slate-50">登录</a>
          <a href="#" class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-700">注册</a>
        </div>
        <button class="md:hidden text-2xl">&#9776;</button>
      </div>
    </div>
  </nav>

  <section class="py-16 md:py-24 text-center bg-gradient-to-br from-blue-50 to-purple-50">
    <div class="max-w-3xl mx-auto px-4">
      <span class="inline-block px-3 py-1 mb-4 text-sm font-medium text-primary bg-blue-100 rounded-full">前端基础</span>
      <h1 class="text-3xl md:text-5xl font-bold tracking-tight mb-4">HTML/CSS 基础精讲</h1>
      <p class="text-lg text-slate-600 mb-6">从零构建现代网页，为 React、Vue 和 Next.js 打下坚实基础。</p>
      <div class="flex justify-center gap-2 text-sm text-slate-500">
        <span>36 课时</span><span>&middot;</span><span>12 小时视频</span><span>&middot;</span><span>配套练习</span>
      </div>
    </div>
  </section>

  <section class="max-w-6xl mx-auto px-4 py-12">
    <h2 class="text-2xl font-bold mb-6">课程大纲</h2>
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <article class="p-6 bg-white border border-slate-200 rounded-xl">
        <h3 class="font-semibold mb-2">网页如何工作</h3>
        <p class="text-sm text-slate-600">浏览器渲染原理与开发者工具。</p>
      </article>
      <article class="p-6 bg-white border border-slate-200 rounded-xl">
        <h3 class="font-semibold mb-2">HTML 文档结构</h3>
        <p class="text-sm text-slate-600">语义化标签与可访问性基础。</p>
      </article>
      <article class="p-6 bg-white border border-slate-200 rounded-xl">
        <h3 class="font-semibold mb-2">CSS 布局系统</h3>
        <p class="text-sm text-slate-600">Flexbox、Grid 与响应式设计。</p>
      </article>
    </div>
  </section>
</body>
</html>