第 01 课
HTML & CSS 基础
语义化标签、盒模型、Flexbox 与响应式布局。
课程内容
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 | 主轴对齐方式 |