很多零基础同学最大的困惑不是“学不会”，而是“不知道先学哪个”。网上教程一大堆，今天看 HTML，明天跳到框架，后天又去学设计软件，结果哪一块都没打牢。这篇我们把网页设计的入门路线拆成五步，每一步都告诉你学什么、练什么项目、怎么验证自己学会了。

路线顺序是经过验证的：先 HTML 搭骨架，再 CSS 穿样式，然后学布局，接着做响应式，最后补动效并上线。每一步都建立在上一步的基础上，跳着学迟早要回头补课。

第一步：HTML 语义化骨架

HTML 是网页的骨架，决定了页面的结构。这一步的核心不是“背标签”，而是理解语义化——用对的标签表达对的意思。

学什么：header、nav、main、article、section、aside、footer 七个结构标签，加上 h1-h6 标题层级、p、ul/ol/li、a、img、table 这些常用标签。

练什么：不看任何样式，纯用 HTML 写一个完整的博客文章页，包含顶部导航、文章正文、侧边推荐、底部版权。写完后用浏览器打开，应该是一份结构清晰的“白板页面”。

<header>
  <nav>主导航</nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>正文……</p>
  </article>
</main>
<footer>版权信息</footer>

怎么判断学会了：把页面折叠成大纲看一眼，标题层级像一份合理的目录，每个区块用对应语义标签而不是 div 套 div，就算过关。

第二步：CSS 盒模型与选择器

CSS 让骨架有了样子。这一步最容易卡住，因为概念多，但核心其实就两件事：怎么选中元素、元素怎么占空间。

学什么：盒模型（content、padding、border、margin）、选择器（标签、类、ID、后代、伪类）、常用属性（color、font、background、border、margin/padding）、盒模型 box-sizing 的区别。

/* 选择器与盒模型示例 */
.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  margin: 16px;
  background: #fff;
}
.card .title {   /* 后代选择器 */
  color: #333;
  font-size: 18px;
}
.card:hover {     /* 伪类 */
  border-color: #A8D5BA;
}

练什么：给第一步写的 HTML 加上 CSS，做成一张卡片列表页——每篇文章一张卡片，有边框、有内边距、有标题和摘要的字号对比。

怎么判断学会了：能口述盒模型四层关系，能说清 box-sizing: border-box 和 content-box 的差别，看到一段 CSS 能准确说出它选中了哪些元素。

第三步：布局 Flexbox 与 Grid

前两步只是让单个元素好看，这一步解决“多个元素怎么排在一起”。布局是网页设计的核心难点，也是分水岭。

学什么：Flexbox（主轴/交叉轴、justify-content、align-items、flex-wrap、flex 属性）、Grid（grid-template-columns、gap、区域命名）、两者各自的适用场景。

简单记：一维排列（一行或一列）用 Flex，二维网格（多行多列）用 Grid。不用纠结谁更好，它们是搭档。

/* Flex：一行排开 */
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Grid：多列网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

练什么：做一个完整的网站首页——顶部导航用 Flex，主体卡片列表用 Grid 三列，侧边栏和正文用 Grid 二列布局。要求在桌面浏览器下排版整齐。

怎么判断学会了：看到一张设计图，能很快判断哪块用 Flex、哪块用 Grid，并且能用 gap 替代 margin 实现间距，而不是靠一个个数像素。

第四步：响应式与移动端

前面三步默认在桌面下看，但真实用户的屏幕千差万别。这一步解决“一个页面怎么在不同屏幕下都好看”。

学什么：viewport meta、媒体查询 @media、移动优先思路、断点选择（常用 768px、1024px）、图片自适应 max-width: 100%、相对单位（rem、%、vw）。

<meta name="viewport" content="width=device-width, initial-scale=1">

/* 移动优先：默认单列，宽屏再变多列 */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

练什么：把第三步的首页改成响应式——手机单列、平板两列、桌面三列，导航在小屏下折叠成汉堡菜单。

怎么判断学会了：用浏览器的设备模拟器拖动窗口宽度，页面在不同断点平滑切换，没有横向滚动条，没有元素溢出。

第五步：动效与上线

前四步做出来的是一个“能用”的网页，这一步让它“好用且能被看到”。动效提升体验，上线让你真正拥有一个网页。

学什么：transition 过渡、transform 变换、@keyframes 动画、hover/focus 状态反馈、性能避免重排。上线部分学：域名与服务器、文件上传、HTTPS、基础 SEO（title、description、语义化）。

/* 悬停过渡 */
.btn {
  background: #A8D5BA;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: #8ec6a3;
  transform: translateY(-2px);
}

/* 进场动画 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.6s ease both; }

练什么：给前面的页面加上滚动进场动画、按钮悬停反馈、卡片点击波纹，然后找一个静态托管服务（比如 GitHub Pages）把整站传上去，用自己的域名访问。

怎么判断学会了：朋友用手机打开你的网址能看到完整页面，动效自然不卡顿，搜索引擎能搜到你的站点标题和描述。

路线图之外的几句话

五步走完，你已经具备独立做网页的能力了。接下来不是继续学新东西，而是多练——临摹好网站、改造现成模板、从需求出发造轮子。框架（Vue、React）可以学，但建议先把原生这三件套（HTML/CSS/JS）吃透，框架只是工具，基础才是底盘。

• 别贪多：一次只学一步，学透再走下一步，跳着学迟早要回头补。
• 多输出：每一步都要有产出，哪怕只是一个 demo 页面，比看十遍教程都管用。
• 别怕慢：前两步慢是正常的，盒模型和选择器一旦通了，后面会越来越快。

下一篇我们聊编辑器怎么选——工欲善其事必先利其器，选对编辑器写代码会舒服很多。