diff --git a/docs/zh-cn/appendix/web-basics.md b/docs/zh-cn/appendix/web-basics.md
index a271b77..9cb7b75 100644
--- a/docs/zh-cn/appendix/web-basics.md
+++ b/docs/zh-cn/appendix/web-basics.md
@@ -182,6 +182,100 @@ HTML 的基本单位是"标签"（tag）。标签用尖括号 `< >` 包裹，成
 **什么时候用 div？** 当没有合适的语义标签时。比如一个纯装饰性的容器。
 :::
 
+### 2.5 如何记住这么多 HTML 标签？
+
+::: tip 🎯 新手困惑
+
+"HTML 标签有一百多个，怎么记得住？"
+
+**答案是：不需要全部记住。** 实际开发中，90% 的情况只用 20 个左右的标签。
+:::
+
+#### 按用途分类记忆
+
+**一、页面结构类（画骨架）**
+
+| 标签 | 记忆口诀 | 用途 |
+|------|----------|------|
+| `<header>` | 头 | 页面或区块的头部 |
+| `<nav>` | 导航 | 导航链接区域 |
+| `<main>` | 主体 | 页面主要内容（每页只有一个） |
+| `<article>` | 文章 | 独立的内容块（可以单独拿走还有意义） |
+| `<section>` | 章节 | 有主题的内容分组 |
+| `<aside>` | 旁边 | 侧边栏、补充内容 |
+| `<footer>` | 脚 | 页面或区块的底部 |
+
+**记忆方法**：想象一张报纸——有报头（header）、目录（nav）、正文（main/article）、专栏（aside）、报脚（footer）。
+
+**二、内容标记类（说清楚是什么）**
+
+| 标签 | 记忆口诀 | 用途 |
+|------|----------|------|
+| `<h1>`-`<h6>` | 标题1-6 | 标题层级，h1 最大最重要 |
+| `<p>` | 段落 | 一段文字 |
+| `<ul>`/`<ol>`/`<li>` | 无序/有序/列表项 | 列表 |
+| `<a>` | 锚点 | 链接，跳转用 |
+| `<img>` | 图片 | 图片 |
+| `<video>`/`<audio>` | 视频/音频 | 多媒体 |
+| `<strong>`/`<em>` | 强调/斜体强调 | 语义化的强调 |
+
+**记忆方法**：`<a>` 是 anchor（锚）的缩写，想象船抛锚停在一个地方，链接就是"停"到另一个页面。
+
+**三、表单交互类（收集用户输入）**
+
+| 标签 | 记忆口诀 | 用途 |
+|------|----------|------|
+| `<form>` | 表单 | 表单容器 |
+| `<input>` | 输入 | 各种输入框（type 决定类型） |
+| `<textarea>` | 文本区域 | 多行文本输入 |
+| `<select>`/`<option>` | 选择/选项 | 下拉选择 |
+| `<button>` | 按钮 | 按钮 |
+| `<label>` | 标签 | 输入框的说明文字 |
+
+**记忆方法**：`<input>` 的 type 属性决定它长什么样：
+- `type="text"` → 文本框
+- `type="password"` → 密码框
+- `type="email"` → 邮箱框
+- `type="checkbox"` → 复选框
+- `type="radio"` → 单选框
+
+**四、容器类（分组用）**
+
+| 标签 | 记忆口诀 | 用途 |
+|------|----------|------|
+| `<div>` | 大盒子 | 块级容器，独占一行 |
+| `<span>` | 小盒子 | 行内容器，只占内容宽度 |
+
+**记忆方法**：div = division（分区），span = span（跨度）。div 用来划分大区域，span 用来标记文字片段。
+
+#### 遇到不认识的标签怎么办？
+
+**方法一：猜英文单词**
+
+很多标签是英文单词的缩写：
+- `<abbr>` = abbreviation（缩写）
+- `<blockquote>` = block quote（块引用）
+- `<caption>` = caption（标题/说明）
+- `<figcaption>` = figure caption（图片说明）
+
+**方法二：查 MDN**
+
+[MDN HTML 元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element) 有所有标签的详细说明。
+
+**方法三：问 AI**
+
+> "HTML 中的 `<dl>` 标签是什么意思？什么时候用？"
+
+#### 不用刻意背标签
+
+**真正的工作流程是这样的**：
+
+1. 你知道要用一个"容器" → 写 `<div>`
+2. 后来发现这是"导航区域" → 改成 `<nav>`
+3. 后来发现这是"独立文章" → 改成 `<article>`
+
+**先写出来，再优化语义**。标签可以随时改，不用一开始就纠结用哪个。
+
 ---
 
 ## 3. CSS：网页的皮肤
@@ -404,6 +498,182 @@ $primary-color: #3b82f6;
 3. **现代 CSS 已经支持变量**：`--primary-color: #3b82f6;` 原生就能用
 :::
 
+### 3.8 如何记住这么多 CSS 属性？
+
+::: tip 🎯 新手困惑
+
+"CSS 属性有好几百个，怎么记得住？"
+
+**答案是：按用途分类，记住核心属性，其他的用到再查。**
+:::
+
+#### 按用途分类记忆
+
+**一、文字排版类（管文字长什么样）**
+
+| 属性 | 记忆口诀 | 常用值 |
+|------|----------|--------|
+| `color` | 颜色 | `red`、`#fff`、`rgb(0,0,0)` |
+| `font-size` | 字号 | `16px`、`1rem`、`1.5em` |
+| `font-weight` | 字重 | `normal`、`bold`、`100`-`900` |
+| `font-family` | 字体 | `"微软雅黑"`、`sans-serif` |
+| `line-height` | 行高 | `1.5`、`24px` |
+| `text-align` | 文字对齐 | `left`、`center`、`right` |
+| `text-decoration` | 文字装饰 | `none`、`underline`、`line-through` |
+
+**记忆方法**：想象你在 Word 里排版——改颜色、改大小、加粗、改字体、调行距、对齐、加下划线。
+
+**二、盒模型类（管元素占多大空间）**
+
+| 属性 | 记忆口诀 | 常用值 |
+|------|----------|--------|
+| `width`/`height` | 宽/高 | `100px`、`50%`、`100vw` |
+| `padding` | 内边距 | `10px`、`10px 20px` |
+| `margin` | 外边距 | `10px`、`auto`（居中用） |
+| `border` | 边框 | `1px solid #ccc` |
+| `border-radius` | 圆角 | `4px`、`50%`（圆形） |
+| `box-sizing` | 盒模型 | `border-box`（推荐） |
+
+**记忆方法**：padding 是"内"边距（内容到边框的距离），margin 是"外"边距（边框到其他元素的距离）。
+
+**简写规则**：
+```css
+/* 四个值：上 右 下 左（顺时针） */
+padding: 10px 20px 15px 25px;
+
+/* 两个值：上下 左右 */
+padding: 10px 20px;
+
+/* 一个值：四个方向都一样 */
+padding: 10px;
+```
+
+**三、背景与边框类（管元素长什么样）**
+
+| 属性 | 记忆口诀 | 常用值 |
+|------|----------|--------|
+| `background` | 背景 | `#fff`、`url(bg.jpg)`、`linear-gradient(...)` |
+| `background-color` | 背景色 | `#fff`、`rgba(0,0,0,0.5)` |
+| `background-image` | 背景图 | `url(photo.jpg)` |
+| `background-size` | 背景大小 | `cover`、`contain`、`100%` |
+| `background-position` | 背景位置 | `center`、`top left` |
+| `box-shadow` | 盒阴影 | `0 2px 10px rgba(0,0,0,0.1)` |
+| `opacity` | 透明度 | `0`-`1`（0 完全透明） |
+
+**记忆方法**：`background` 是简写，可以一次设置多个值：
+```css
+background: #fff url(bg.jpg) no-repeat center/cover;
+/*          颜色  图片      是否重复   位置/大小 */
+```
+
+**四、布局类（管元素怎么排列）**
+
+| 属性 | 记忆口诀 | 常用值 |
+|------|----------|--------|
+| `display` | 显示方式 | `block`、`inline`、`flex`、`grid`、`none` |
+| `position` | 定位 | `static`、`relative`、`absolute`、`fixed`、`sticky` |
+| `top`/`right`/`bottom`/`left` | 四个方向 | `10px`、`50%`（配合 position 使用） |
+| `z-index` | 层级 | 数字越大越在上层 |
+| `float` | 浮动 | `left`、`right`（老方法，不推荐） |
+| `overflow` | 溢出处理 | `visible`、`hidden`、`scroll`、`auto` |
+
+**position 记忆方法**：
+- `static`：默认，正常流
+- `relative`：相对自己原来的位置偏移
+- `absolute`：相对最近的定位祖先元素定位
+- `fixed`：相对视口定位（滚动也不动）
+- `sticky`：滚动到一定位置后固定
+
+**五、Flexbox 布局类（一维布局神器）**
+
+| 属性 | 记忆口诀 | 作用 |
+|------|----------|------|
+| `display: flex` | 开启 Flex | 容器变成 Flex 容器 |
+| `flex-direction` | 方向 | `row`（横向）、`column`（纵向） |
+| `justify-content` | 主轴对齐 | 元素在主轴上怎么排 |
+| `align-items` | 交叉轴对齐 | 元素在交叉轴上怎么对齐 |
+| `flex-wrap` | 换行 | `nowrap`、`wrap` |
+| `gap` | 间隙 | 元素之间的间距 |
+| `flex` | 弹性 | 子元素的伸缩比例 |
+
+**记忆方法**：
+- `justify` = 证明/对齐 → 主轴对齐
+- `align` = 排列/对齐 → 交叉轴对齐
+
+**六、动画过渡类（管元素怎么动）**
+
+| 属性 | 记忆口诀 | 常用值 |
+|------|----------|--------|
+| `transition` | 过渡 | `all 0.3s ease` |
+| `transform` | 变换 | `translate(10px)`、`rotate(45deg)`、`scale(1.1)` |
+| `animation` | 动画 | `fadeIn 1s ease forwards` |
+
+**简写规则**：
+```css
+/* transition: 属性 时长 缓动函数 延迟 */
+transition: all 0.3s ease 0s;
+
+/* transform 可以组合多个变换 */
+transform: translateX(10px) rotate(45deg) scale(1.1);
+```
+
+#### 遇到不认识的属性怎么办？
+
+**方法一：猜英文单词**
+
+很多属性是英文单词或缩写：
+- `margin` = 边缘、余地
+- `padding` = 填充
+- `border` = 边界
+- `visibility` = 可见性
+- `cursor` = 光标
+
+**方法二：按场景联想**
+
+当你想实现某个效果时，想想"关键词"：
+
+| 我想... | 可能的属性 |
+|---------|------------|
+| 改颜色 | `color`、`background-color`、`border-color` |
+| 改大小 | `width`、`height`、`font-size` |
+| 改位置 | `margin`、`position`、`top/left` |
+| 改间距 | `padding`、`margin`、`gap` |
+| 隐藏元素 | `display: none`、`visibility: hidden`、`opacity: 0` |
+| 居中 | `margin: auto`、`text-align: center`、`justify-content: center` |
+| 加圆角 | `border-radius` |
+| 加阴影 | `box-shadow`、`text-shadow` |
+| 加动画 | `transition`、`animation` |
+
+**方法三：查 MDN 或问 AI**
+
+[MDN CSS 属性参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference) 有所有属性的详细说明。
+
+> "CSS 中如何让文字只显示一行，超出部分用省略号？"
+
+**方法四：用开发者工具"偷师"**
+
+看到喜欢的网页效果：
+1. 右键 → "检查"
+2. 选中元素，看 Styles 面板
+3. 直接复制 CSS 属性
+
+#### 不用刻意背属性
+
+**真正的工作流程是这样的**：
+
+1. 你知道要"居中" → 搜索"CSS 居中"
+2. 复制代码，改改数值
+3. 用多了就记住了
+
+**推荐的学习路径**：
+
+1. **先掌握盒模型**：`width`、`height`、`padding`、`margin`、`border`
+2. **再掌握 Flexbox**：`display: flex`、`justify-content`、`align-items`
+3. **然后掌握定位**：`position`、`top/left`、`z-index`
+4. **最后学动画**：`transition`、`transform`、`animation`
+
+其他属性用到再查，用多了自然就记住了。
+
 ---
 
 ## 4. JavaScript：网页的大脑