1. HTML：搭出页面骨架
先记住一件事：HTML 的职责是「结构和语义」，不要纠结样式。
常用标签可以按用途分：
- 页面结构：
<header> / <nav> / <main> / <section> / <footer> - 文本内容：
<h1>~<h6> / <p> / <span> / <strong> / <em> - 列表：
<ul> / <ol> / <li> - 图片和媒体：
<img> / <video> / <audio> - 链接和按钮：
<a> / <button> - 表单：
<form> / <input> / <textarea> / <select>
建议练习：
- 做一个简单的「学习笔记」页面：
- 顶部标题：今天学了什么
- 中间几段正文：使用
<p>、<h2>、<ul>组织内容 - 底部署名和日期：用
<footer>
2. CSS：让页面好看起来
CSS 决定「长什么样」。几个关键概念：
- 选择器：选中要被修改的元素，如
.card、#header、main p - 盒模型：margin（外边距）、border（边框）、padding（内边距）、content（内容）
- 布局：
display: block / inline / inline-block / flex
重点掌握 flex 布局：
display: flex开启弹性布局justify-content控制主轴对齐（左右）align-items控制交叉轴对齐（上下）gap控制子元素之间的间距
3. 小练习：做一张「学习卡片」
目标：在页面中间放一张卡片，展示你最近看的书 / 课程。
卡片包含：
- 标题：例如「前端入门路线」
- 简短描述：一两句话
- 一个链接按钮：指向你常看的文档站点
关注点：
- 使用
max-width控制卡片宽度，例如max-width: 480px - 使用
margin: 0 auto让卡片水平居中 - 使用
padding和border-radius让卡片更舒适
这一章学完，你应该能做到：
- 不依赖框架，手写一个基本排版正常的小页面
- 遇到设计稿时，大致知道应该用哪些 HTML 标签和哪种 CSS 布局来实现
