HTML & CSS 基础

HTML 负责网页的结构，CSS 负责样式。本课掌握现代页面开发最核心的四块知识：语义化标签、盒模型、Flexbox 与响应式布局。

学习目标

使用语义化标签搭建清晰的页面结构
理解盒模型，能解释元素占位大小的计算方式
用 Flexbox 完成常见的一维布局
用媒体查询实现移动端适配

语义化标签

不要满屏 <div>。语义化标签让页面结构自解释，对 SEO 和无障碍访问都更友好：

<body>
  <header>站点头部与导航 <nav>...</nav></header>
  <main>
    <article>
      <h1>文章标题</h1>
      <section>小节内容</section>
    </article>
    <aside>侧边栏</aside>
  </main>
  <footer>页脚</footer>
</body>

盒模型

每个元素都是一个盒子：content → padding → border → margin。

/* 推荐全局设置：width 包含 padding 和 border，布局更直觉 */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;      /* border-box 下，300px 就是最终占位宽度 */
  padding: 16px;
  border: 1px solid #ddd;
  margin: 8px;
}

注意：上下相邻两个元素的 margin 会发生折叠（取较大者），左右不会。

Flexbox 布局

一维布局（一行或一列）首选 Flexbox：

.navbar {
  display: flex;
  justify-content: space-between; /* 主轴：两端对齐 */
  align-items: center;            /* 交叉轴：垂直居中 */
  gap: 16px;                      /* 子元素间距 */
}

/* 水平垂直居中的万能三行 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

常用属性速查：

属性	作用
`flex-direction`	主轴方向（row / column）
`justify-content`	主轴对齐方式
`align-items`	交叉轴对齐方式
`flex: 1`	子元素占满剩余空间
`flex-wrap`	空间不足时换行

响应式布局

移动优先：先写手机样式，再用媒体查询逐级增强：

.grid {
  display: grid;
  grid-template-columns: 1fr;        /* 手机：单列 */
  gap: 16px;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }   /* 平板：两列 */
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); } /* 桌面：三列 */
}

动手练习

临摹一个你喜欢的网站首页（只还原布局，不看它的源码）。
完成 Landing Page 项目：根据设计稿从零写一个落地页。
用 Flexbox 做一个导航栏：左侧 logo，右侧菜单，窗口变窄时菜单换行。