# HTML & CSS 快速参考

*元素、选择器、Flexbox、Grid、响应式*

> Source: MDN Web Docs (developer.mozilla.org) · MIT

## HTML 结构

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello World</h1>
  <script src="app.js"></script>
</body>
</html>
```

## 常用元素

### 文本与标题

```
<h1>Heading 1</h1> ... <h6>Heading 6</h6>
<p>Paragraph text</p>
<strong>Bold</strong>  <em>Italic</em>
<br>  <!-- line break -->
<hr>  <!-- horizontal rule -->
```

### 链接与图片

```
<a href="https://example.com">Link text</a>
<a href="#section">Anchor link</a>
<img src="photo.jpg" alt="Description">
```

### 列表

```
<ul>              <!-- unordered -->
  <li>Item</li>
</ul>
<ol>              <!-- ordered -->
  <li>First</li>
</ol>
```

## 表单

### Input 类型

```
<form action="/submit" method="POST">
  <input type="text" name="user"
    placeholder="Name" required>
  <input type="email" name="email">
  <input type="password" name="pw">
  <input type="number" min="0" max="100">
  <input type="checkbox" name="agree">
  <input type="radio" name="size" value="M">
  <button type="submit">Send</button>
</form>
```

### Select 与 Textarea

```
<select name="color">
  <option value="r">Red</option>
  <option value="g" selected>Green</option>
</select>
<textarea name="msg" rows="4"
  cols="30"></textarea>
```

## 语义化 HTML

| Command | Description |
|---------|-------------|
| `<header>` | 介绍内容或导航容器 |
| `<nav>` | 导航链接 |
| `<main>` | 页面主要内容（每页唯一） |
| `<section>` | 内容的主题分组 |
| `<article>` | 独立内容 |
| `<aside>` | 侧边栏或辅助内容 |
| `<footer>` | 节或页面的页脚 |
| `<figure>` | 带标题的图片/图表 |
| `<figcaption>` | <figure> 的标题 |

## CSS 选择器

### 基础选择器

| Command | Description |
|---------|-------------|
| `element` | `p { }` — 所有 <p> 元素 |
| `.class` | `.card { }` — class 选择器 |
| `#id` | `#main { }` — id 选择器 |
| `*` | 通用选择器（所有元素） |

### 组合器

| Command | Description |
|---------|-------------|
| `A B` | 后代（B 在 A 内部） |
| `A > B` | 仅直接子元素 |
| `A + B` | 相邻兄弟（B 紧跟 A 后） |
| `A ~ B` | 通用兄弟（A 之后的 B） |

### 伪类

| Command | Description |
|---------|-------------|
| `:hover` | 鼠标悬停 |
| `:focus` | 元素获得焦点 |
| `:first-child` | 父元素的第一个子元素 |
| `:nth-child(n)` | 第 n 个子元素（2n = 偶数，odd = 奇数） |

## 盒模型

```
.box {
  margin: 10px;           /* outside */
  border: 1px solid #333; /* edge */
  padding: 15px;          /* inside */
  width: 200px;
  box-sizing: border-box; /* include pad+border */
}
```

### 简写

| Command | Description |
|---------|-------------|
| `margin: 10px` | 四边相同 |
| `margin: 10px 20px` | 上下 \| 左右 |
| `margin: 10px 20px 15px` | 上 \| 左右 \| 下 |
| `margin: 10px 20px 15px 5px` | 上 \| 右 \| 下 \| 左 |

## Flexbox

### 容器

```
.flex-container {
  display: flex;
  flex-direction: row;     /* row | column */
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  gap: 10px;
  flex-wrap: wrap;
}
```

### 子项属性

| Command | Description |
|---------|-------------|
| `flex: 1` | 拉伸填满可用空间 |
| `flex-grow: 2` | 相对兄弟元素的增长比例 |
| `flex-shrink: 0` | 不收缩低于基础尺寸 |
| `flex-basis: 200px` | 增长/收缩前的初始尺寸 |
| `align-self: flex-end` | 覆盖容器对齐 |
| `order: -1` | 视觉顺序（默认 0） |

## Grid

### 容器

```
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
}
```

### 子项定位

```
.item {
  grid-column: 1 / 3; /* span col 1-2 */
  grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
  repeat(auto-fit, minmax(200px, 1fr));
```

## 定位

| Command | Description |
|---------|-------------|
| `static` | 默认流（无偏移属性） |
| `relative` | 相对正常位置偏移 |
| `absolute` | 相对最近已定位祖先偏移 |
| `fixed` | 相对视口偏移（滚动不移动） |
| `sticky` | 滚动前相对定位，超过阈值后固定 |

### 示例

```
.parent { position: relative; }
.child {
  position: absolute;
  top: 0; right: 0;  /* top-right corner */
}
```

## 媒体查询

```
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }

@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}
```

### 常用断点

| Command | Description |
|---------|-------------|
| `480px` | 小手机 |
| `768px` | 平板 |
| `1024px` | 小桌面 / 横屏平板 |
| `1280px` | 桌面 |
