1
/* 元素选择器 */
2
p { }
3

4
/* 类选择器（最常用） */
5
.card { }
6

7
/* ID 选择器 */
8
#header { }
9

10
/* 组合选择器 */
11
.card:hover { }
12
nav > a { }
13
input[type="text"] { }

1
.box {
2
    width: 300px;
3
    padding: 20px;
4
    border: 1px solid #ddd;
5
    margin: 16px;
6
    /* 实际占用宽度 = 300 + 20×2 + 1×2 + 16×2 = 374px */
7
}

1
/* Flexbox：一维布局 */
2
.container {
3
    display: flex;
4
    justify-content: space-between; /* 水平分布 */
5
    align-items: center;            /* 垂直居中 */
6
    gap: 16px;                      /* 间距 */
7
}
8

9
/* Grid：二维布局 */
10
.grid {
11
    display: grid;
12
    grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
13
    gap: 24px;
14
}

1
/* 移动端优先 */
2
.card {
3
    width: 100%;
4
}
5

6
/* 平板 */
7
@media (min-width: 768px) {
8
    .card {
9
        width: 50%;
10
    }
11
}
12

13
/* 桌面 */
14
@media (min-width: 1024px) {
15
    .card {
16
        width: 33.33%;
17
    }
18
}

1
// let：可变变量（块级作用域）
2
let count = 0;
3
count += 1;
4

5
// const：不可变常量（块级作用域）
6
const API_URL = 'https://api.example.com';
7

8
// var：旧式写法，有作用域提升问题，不推荐
9
var oldWay = '不要这样写';

1
// 查询元素
2
const el = document.querySelector('.card');
3
const els = document.querySelectorAll('.card');
4

5
// 修改内容
6
el.textContent = '新文本';
7
el.innerHTML = '<strong>加粗文本</strong>';
8

9
// 修改样式
10
el.style.backgroundColor = '#f0f0f0';
11
el.classList.add('active');
12
el.classList.remove('hidden');
13

14
// 创建和插入元素
15
const newDiv = document.createElement('div');
16
newDiv.textContent = '我是新元素';
17
document.body.appendChild(newDiv);

1
// Promise
2
fetch('https://api.example.com/data')
3
    .then(res => res.json())
4
    .then(data => console.log(data))
5
    .catch(err => console.error(err));
6

7
// Async / Await（更推荐的写法）
8
async function fetchData() {
9
    try {
10
        const res = await fetch('https://api.example.com/data');
11
        const data = await res.json();
12
        console.log(data);
13
    } catch (err) {
14
        console.error('请求失败:', err);
15
    }
16
}