前端工程师从 0 到 1 · 系统化学习平台

核心概念

掌握网页结构与视觉呈现的核心基础

本节点将带你深入理解 HTML/CSS 核心 的核心原理与实践方法。学习完后，你应该能够独立完成相关的实战任务。

代码示例

CSS可运行

/* Flexbox 居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid 布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

关键知识点

理解语义化 HTML 的价值 — 详见下方参考资料与实战任务
掌握 Flexbox 与 Grid 布局 — 详见下方参考资料与实战任务
能独立完成响应式静态页面 — 详见下方参考资料与实战任务

💡

学习建议

先通读全文建立概念，再动手编写代码示例，最后完成右侧「配套练习」。遇到不理解的概念，点击右侧「官方文档依据」跳转原始文档深挖。

动手练习

前往代码编辑器完成本节点的配套练习，即时反馈你的掌握程度：

打开代码编辑器

本节小结

理解语义化 HTML 的价值
掌握 Flexbox 与 Grid 布局
能独立完成响应式静态页面

✅

完成本节点

点击下方「标记完成」记录进度，然后继续下一个知识点。