1、HTML元素：知道哪些元素是块、行、行内块； 2、CSS选择器类别； 3、CSS基本字体、文本、颜色、图片、边框设置 4、盒子模型宽高计算、浮动、定位 5、javascript基本运算（加、减、乘、除、余） 6、CSS3过度+变形、动画设置（课堂名字案例）

1. HTML 元素分类：
- 块级元素（block-level）：如 `<div>`, `<p>`, `<h1>`等，它们在页面上占据整行，独占宽度。
- 行内元素（inline）：如 `<a>`, `<span>`, `text`等，它们只占据一行，并与其他行内元素在同一行显示。
- 行内块元素（inline-block）：如 `<img>`或自定义为 display: inline-block 的元素，它们既可以像行内元素一样在一行显示，又可以占据宽度。

2. CSS 选择器类别：
- ID选择器：使用#号和元素ID，如 #main。
- 类选择器：使用.号和类名，如 .content。
- 标签选择器：元素标签本身，如 p。
- 子元素选择器：使用空格，如 ul > li。
- 后代选择器：使用空格和 >，如 div p。
- 通用兄弟选择器：使用 +，如 h1 + p。

3. CSS 基本设置：
- 字体：`font-family: Arial, sans-serif;`
- 文本：`color: black; font-size: 16px; line-height: 1.5;`
- 颜色：如 `background-color: #f0f0f0; color: #333;`
- 图片：`<img src="image.jpg" alt="描述">`
- 边框：`border: 1px solid #ccc;`

4. 盒子模型：
- 宽高计算：元素宽度 = 内容宽度 + 边框宽度 + 外边距宽度（宽度方向）；高度类似。
- 浮动：`float: left` 或 `right`，用于布局和清除浮动。
- 定位：`position: relative/absolute/fixed`，配合 top, right, bottom, left 属性调整元素位置。

5. JavaScript 基本运算：
- 加法：`var sum = num1 + num2;`
- 减法：`var difference = num1 - num2;`
- 乘法：`var product = num1 * num2;`
- 除法：`var quotient = num1 / num2;`
- 余数（取模）：`var remainder = num1 % num2;`

6. CSS3 过渡+变形+动画：
- 过渡 (transition)：`.element { transition: property duration timing-function ease; }`
- 变形 (transform)：`.element { transform: rotate(45deg); scale(1.2); translate(100px, 100px);}`
- 动画 (animation): `.element { animation-name: myAnimation 2s linear infinite; }`
- 课堂名字案例：如给“课堂名签”元素添加淡入淡出效果或旋转动画，代码会涉及以上元素。