# Emmet Tham Khảo Nhanh

*Viết tắt HTML, lồng nhau, thuộc tính, phím tắt CSS*

> Source: Emmet Documentation (emmet.io) · MIT

## Viết Tắt HTML

### Phím Tắt Phần Tử

| Command | Description |
|---------|-------------|
| `div` | Tạo <div></div> |
| `p` | Tạo <p></p> |
| `h1` | Tạo <h1></h1> |
| `a` | Tạo <a href=""></a> |
| `img` | Tạo <img src="" alt=""> |
| `input` | Tạo <input type="text"> |
| `btn` | Tạo <button></button> |
| `link:css` | Thẻ link cho CSS stylesheet |

### HTML Boilerplate

```
!    → HTML5 boilerplate đầy đủ
doc  → chỉ doctype HTML5
```

### Thẻ Ngầm Định

| Command | Description |
|---------|-------------|
| `.class` | Tạo <div class="class"> |
| `ul>.item` | Con tạo thành <li class="item"> |
| `table>.row` | Con tạo thành <tr class="row"> |
| `select>.opt` | Con tạo thành <option class="opt"> |

## Lồng Nhau

### Toán Tử Lồng

| Command | Description |
|---------|-------------|
| `>` | Phần tử con |
| `+` | Phần tử anh em |
| `^` | Leo lên một cấp |
| `^^` | Leo lên hai cấp |

### Ví Dụ Lồng

```
div>ul>li       → phần tử con lồng nhau
div+p+footer    → phần tử anh em
div>p>span^h2   → leo lên: h2 là anh em của p
div>p>span^^h2  → leo lên hai: h2 anh em của div
```

## Nhóm

### Nhóm Ngoặc Đơn

```
div>(header>nav)+main+footer
→ nhóm header>nav thành một đơn vị
(div>h2+p)*3
→ lặp lại cấu trúc đã nhóm 3 lần
```

### Layout Phức Tạp

```
.container>(header>h1+nav>ul>li*3)+main+footer
→ khung trang đầy đủ
```

## Nhân

### Toán Tử Lặp

| Command | Description |
|---------|-------------|
| `li*5` | Tạo 5 phần tử <li> |
| `div>p*3` | Div với 3 đoạn con |
| `ul>li*4>a` | Danh sách với 4 mục, mỗi mục chứa link |
| `tr>td*4` | Hàng bảng với 4 ô |

### Ví Dụ Nhân

```
ul>li.item*5           → 5 mục danh sách có class
table>tr*3>td*4        → bảng 3x4
.row>.col*3>p{Content} → hàng 3 cột có văn bản
```

## Đánh Số

### Đánh Số Mục ($)

| Command | Description |
|---------|-------------|
| `$` | Số tuần tự (1, 2, 3...) |
| `$$` | Hai chữ số có đệm 0 (01, 02...) |
| `$$$` | Ba chữ số có đệm 0 (001, 002...) |
| `$@3` | Bắt đầu đánh số từ 3 |
| `$@-` | Đánh số ngược (giảm dần) |
| `$@-3` | Đánh số ngược bắt đầu từ 3 |

### Ví Dụ Đánh Số

```
li.item$*3    → item1, item2, item3
li.item$$*3   → item01, item02, item03
li.item$@3*3  → item3, item4, item5
```

## Thuộc Tính

### ID và Class

| Command | Description |
|---------|-------------|
| `#id` | Thêm id: <div id="id"> |
| `.class` | Thêm class: <div class="class"> |
| `.c1.c2` | Nhiều class: class="c1 c2" |
| `#main.container` | Kết hợp ID + class |

### Thuộc Tính Tùy Chỉnh

```
td[colspan=2]        → <td colspan="2">
a[href=#]{Click}     → <a href="#">Click</a>
input[type=email placeholder=Email]
div[data-id=$]*3     → data-id="1", "2", "3"
```

## Văn Bản

### Nội Dung Văn Bản ({})

| Command | Description |
|---------|-------------|
| `p{Hello}` | <p>Hello</p> |
| `a{Click me}` | <a href="">Click me</a> |
| `p{Item $}*3` | Item 1, Item 2, Item 3 |

### Văn Bản Có Lồng

```
p>{Click }+a{here}+{ to continue}
→ <p>Click <a href="">here</a> to continue</p>
ul>li{Item $}*4
→ danh sách với các mục có số thứ tự
```

## Viết Tắt CSS

### Box Model

| Command | Description |
|---------|-------------|
| `m10` | margin: 10px; |
| `m10-20` | margin: 10px 20px; |
| `p10` | padding: 10px; |
| `w100` | width: 100px; |
| `w100p` | width: 100%; |
| `h50` | height: 50px; |

### Display & Position

| Command | Description |
|---------|-------------|
| `d:f` | display: flex; |
| `d:g` | display: grid; |
| `d:n` | display: none; |
| `d:b` | display: block; |
| `pos:r` | position: relative; |
| `pos:a` | position: absolute; |

### Flexbox

| Command | Description |
|---------|-------------|
| `jc:c` | justify-content: center; |
| `jc:sb` | justify-content: space-between; |
| `ai:c` | align-items: center; |
| `fxd:c` | flex-direction: column; |
| `fw:w` | flex-wrap: wrap; |

### Typography & Màu Sắc

| Command | Description |
|---------|-------------|
| `fz14` | font-size: 14px; |
| `fw:b` | font-weight: bold; |
| `ta:c` | text-align: center; |
| `c:#333` | color: #333; |
| `bgc:#fff` | background-color: #fff; |