1. HTML 与 CSS：网页的骨架与皮肤

一个网页的最小结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <header><h1>深学 DeepLearn</h1></header>
    <main>
      <article>
        <h2>今天学到了什么</h2>
        <p>HTML 描述结构，CSS 负责外观。</p>
      </article>
    </main>
    <footer>© 2026 深学</footer>
  </body>
</html>

HTML 是骨架：header、main、footer 这些语义化标签告诉浏览器和搜索引擎「这是一篇文章的头部/主体/页脚」，而不是一堆积木式的 div。

CSS：给骨架穿上皮肤

CSS 通过选择器选中元素并应用样式：

h1 {
  color: #4f46e5;      /* 字色 */
  font-size: 32px;     /* 字号 */
}

.card {                /* 选中 class 为 card 的元素 */
  padding: 16px;       /* 内边距 */
  border-radius: 12px; /* 圆角 */
}

理解一切布局的钥匙是盒模型：每个元素都是一个盒子，从内到外依次是 内容 → padding（内边距）→ border（边框）→ margin（外边距）。

Flexbox：现代布局的标配

居中这个经典难题，用 Flex 三行解决：

.container {
  display: flex;                 /* 启用弹性布局 */
  justify-content: center;       /* 主轴（水平）居中 */
  align-items: center;           /* 交叉轴（垂直）居中 */
}

再加一条媒体查询，就能做响应式：

@media (max-width: 640px) {
  .sidebar { display: none; }    /* 手机上隐藏侧栏 */
}

💡 动手建议：在浏览器任意页面按 F12，用 Elements 面板查看盒模型与样式，是最快的学习方式。