HTML5/CSS3 形象版：用生活比喻讲一遍
这门课开卷，所以重点不是背，是「看懂 + 会用 + 能快速翻到」。
每条下面都写了「考试怎么用」，直接对着题找。
1. 网页三件套 = 人
- HTML = 骨架（有哪些部位：头、手、脚）
- CSS = 衣服和化妆（长什么样：颜色、大小、位置）
- JavaScript = 动作（会干什么：点击、弹窗）
考试怎么用：题目问"Web 标准"就答这三层——结构、表现、行为，分离。
2. 标签分类 = 积木 与 文字里的词
- 块级元素（div、p、h1~h6、ul、li）：像一块块积木，一块占一行，可以调宽高。
- 行内元素（span、a、strong、em）：像句子里的词，词挨着词排，你没法把"词"单独拉高。
- 行内块（img、input、button）：像贴纸，能挨着排，也能调大小。
考试怎么用：问"谁能设宽高"、"谁独占一行"，直接套这三类。
3. 盒模型 = 寄快递
一个盒子 = 货物 + 气泡膜 + 纸箱 + 箱子之间的空隙
| CSS | 比喻 | 说明 |
|---|
| content | 货物（这盒到底是什么） | width/height 默认指这一层 |
| padding | 气泡膜（内边距） | 撑大盒子 |
| border | 纸箱（边框） | 也算尺寸 |
| margin | 两个箱子之间的距离（外边距） | 不算进盒子大小 |
- 总宽度 = width + padding×2 + border×2（不含 margin）
box-sizing: border-box = 快递单上写的尺寸包含气泡膜和纸箱（更好算）
考试怎么用：看到"计算盒子宽度"就套公式；问 box-sizing 作用就答"让 width 包含 padding 和 border"。
4. 浮动 = 河上漂的木头
- 木头（浮动元素）浮起来，不占原来的位置，其他内容（水）绕着它流。
- 后果：父元素高度塌陷——爸爸发现孩子都漂走了，自己高度变 0。
- 清除浮动 = 修一道围栏把木头圈住：
- 加个空标签
clear: both
- 父元素
overflow: hidden（最省事）
- 父元素
::after { content:""; display:block; clear:both }（最规范）
考试怎么用：问"为什么要清除浮动"→ 高度塌陷；问"三种方法"→ 上面三条。
5. 定位 = 贴纸
| 定位 | 比喻 | 参照物 |
|---|
| static | 普通纸 | 不定位 |
| relative | 从这里往旁边挪一点 | 自己原来的位置 |
| absolute | 贴到墙上 | 最近的有定位的祖先（都没有就贴浏览器） |
| fixed | 钉在玻璃上 | 浏览器视口，滚动不动 |
- 子绝父相：儿子想贴墙（absolute），得先让爸爸站在"能贴"的位置（relative）。
z-index = 一叠纸牌，谁数字大谁在上面（只对定位元素有效）。
考试怎么用：给"导航栏固定顶部"→ fixed；"角标在图片右上角"→ 父 relative + 子 absolute。
6. 选择器优先级 = 身份等级
!important = 领导特批（最高）- 行内 style = 本人（1000）
- id = 身份证（100）
- class / 伪类 / 属性 = 工作证（10）
- 标签 = 名字（1）
- 通配
* = 无名氏（0）
考试怎么用：给一串选择器，把分数加起来比大小；同分看谁写在后面（后来居上）。
7. 伪类与伪元素 = 「状态」与「零件」
- 伪类（
:hover、:first-child）：描述状态或位置——"鼠标悬停时"、"第一个孩子"。
- 伪元素（
::before、::after）：凭空造出一个零件——"在内容前面加个图标"。
- 记忆法：一个冒号是状态，两个冒号是零件（
::before 必须写 content）。
8. 表单 = 填表
form 是信封，input 是空格，name 是这一格的标题（提交时用的键名）。label for="id" = 点文字也能选中格子（提升体验）。- HTML5 新控件：
type="email/number/date/color/range"，浏览器自带检查。
required = 必填，placeholder = 灰字提示。
考试怎么用：写注册页面就按"用户名/密码/性别（radio）/爱好（checkbox）/城市（select）/协议（checkbox）/提交"。
9. 过渡与动画 = 调音量旋钮 与 放电影
- transition（过渡）：像拧音量旋钮，从 3 慢慢转到 8；需要触发（hover、点击）。
- animation（动画）：像放电影，有剧本（
@keyframes 里 0%、50%、100% 各做什么），可以循环、可以自动播。
两者区别（必考）：
| transition | animation |
|---|
| 关键帧 | 只有起点和终点 | 可以很多帧 |
| 触发 | 必须有触发 | 可以自动播放 |
| 循环 | 不能 | 能（infinite） |
10. 布局三板斧 = 排队方式
- 普通流：大家老实站着（block 上下排，inline 左右排）
- 浮动：有人漂起来了，别人绕着走
- 定位：有人被钉在墙上
- （新版补充）flex：像排队买奶茶，
justify-content 管队伍怎么站（居中/两端/靠左），align-items 管高矮对齐
这本教材没有 flex，考试按书上的浮动+定位来写；老师讲了 flex 就用 display:flex 三栏。
11. 一页速记
结构（HTML）：骨架
样式（CSS）：衣服
行为（JS）：动作
盒子：货物(内容)+气泡膜(padding)+纸箱(border)+间距(margin)
浮动：漂起来 → 父元素塌陷 → 要清除
定位：relative 相对自己、absolute 相对有定位的祖先、fixed 相对屏幕
优先级：id 100 > class 10 > 标签 1（同分看先后）
动画：transition 慢慢变（要触发）、animation 放电影（能循环）
开卷考试怎么用这份东西
- 别背，标注：把这 11 条抄成一张 A4，旁边写"对应书第几页"。
- 书里贴标签：盒模型、浮动定位、表单、动画四章折角。
- 练手写：三栏布局、导航栏、表单、卡片、动画——开卷也来不及现编，得练到能默写。
- 计算题先做：盒模型、优先级这类，翻书查公式就行，稳拿分。