代码学习记录

整理学习过程中常用的概念、代码和命令。

HTML 结构

HTML 负责描述网页的内容和结构。写页面时先考虑内容之间的关系，再选择合适的标签。

常用语义化标签

header：页面或区域的头部。
nav：主要导航链接。
main：页面的主要内容，一个页面通常只有一个。
section：具有独立主题的一组内容。
article：可以单独阅读或复用的内容。
footer：页面或区域的底部信息。

<article>
  <header>
    <h2>文章标题</h2>
    <time datetime="2026-08-08">2026-08-08</time>
  </header>
  <p>文章正文。</p>
</article>

标题应该按层级排列，不要只为了字体大小跳过层级。图片需要填写有意义的 alt，纯装饰图片可以使用空的 alt。

CSS 布局

CSS 主要学习盒模型、层叠规则、Flex、Grid 和响应式设计。

盒模型

一个元素由 content、padding、border 和 margin 组成。项目中通常统一设置：

* {
  box-sizing: border-box;
}

Grid 自适应布局

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

auto-fit 会根据可用宽度调整列数，minmax 限制每列的最小和最大宽度。

响应式原则

优先使用相对尺寸，避免大量固定宽度。
图片设置 max-width: 100%。
先完成小屏幕布局，再逐步增强桌面布局。
断点应该根据内容需要设置，而不是只按设备型号设置。

表单与无障碍

每个输入框都应该有对应的 label。键盘用户需要能看见焦点位置，错误提示不能只依靠颜色。

<form>
  <label for="email">邮箱</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">提交</button>
</form>

按钮使用 button，不要用 div 模拟按钮。
表格只用于表格数据，不用于页面布局。
文本和背景需要有足够的颜色对比度。
动态状态可以使用 aria-live 通知辅助技术。

JavaScript 变量与函数

优先使用 const，确实需要重新赋值时使用 let。函数尽量只完成一件事，并通过参数接收数据。

function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

const total = calculateTotal([
  { price: 12, quantity: 2 },
  { price: 8, quantity: 3 }
]);

数组常用方法

map：把每一项转换成新值。
filter：保留满足条件的项目。
find：查找第一项匹配的数据。
some：判断是否至少有一项满足条件。
reduce：把数组累计为一个结果。

JavaScript 异步操作

网络请求、定时器和文件读取不会立刻完成，需要通过 Promise 处理最终结果。

async function loadData(url) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), 5000);

  try {
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } finally {
    clearTimeout(timer);
  }
}

多个互不依赖的任务可以使用 Promise.all 并发执行。任何一个失败都会让 Promise.all 失败；如果需要保留所有结果，可以使用 Promise.allSettled。

DOM 与事件

DOM 是浏览器提供的页面对象模型。修改页面前先保存需要的元素引用，避免重复查询。

const list = document.querySelector(".list");

list.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-id]");
  if (!button) return;
  console.log("点击项目：", button.dataset.id);
});

上面的写法叫事件委托。事件统一绑定在父元素上，适合处理动态添加的大量子元素。

Python 类型与数据类

类型注解能让函数的输入和输出更清楚，dataclass 适合表示结构固定的数据。

from dataclasses import dataclass

@dataclass(frozen=True)
class Student:
    name: str
    scores: list[float]

    def average(self) -> float:
        return sum(self.scores) / len(self.scores) if self.scores else 0.0

frozen=True 表示对象创建后不能随意修改，可以减少状态变化造成的问题。

Python 文件和数据处理

读写文本时明确指定编码，并使用 with 自动关闭文件。处理外部数据时要检查字段是否存在、类型是否正确。

import json
from pathlib import Path

def load_config(path: str) -> dict:
    file = Path(path)
    if not file.exists():
        return {}
    with file.open("r", encoding="utf-8") as stream:
        return json.load(stream)

处理数据的步骤

读取原始数据。
检查缺失值和重复值。
统一日期、数字和文本格式。
计算需要的结果。
保存结果并记录处理时间。

测试与异常

测试应该覆盖正常输入、边界情况和错误输入。异常信息需要说明发生了什么，而不是简单返回失败。

def divide(a: float, b: float) -> float:
    if b == 0:
        raise ValueError("b cannot be zero")
    return a / b

def test_divide():
    assert divide(10, 2) == 5

单元测试：验证单个函数或类。
集成测试：验证多个模块能否正确协作。
端到端测试：从用户入口验证完整流程。

Git 工作流

每次提交只包含一类修改。开始工作前创建分支，提交前查看差异，合并前运行测试。

git switch -c feature/example
git status
git diff
git add src/example.py
git commit -m "add example parser"
git rebase main

排查问题

git log --oneline：查看提交历史。
git diff --staged：查看即将提交的内容。
git restore --staged 文件：取消暂存。
git blame 文件：查看每行最后一次修改。

Linux 常用命令

pwd                 # 当前目录
ls -la              # 查看文件
cd /path/to/project # 切换目录
cp source target    # 复制文件
mv old new          # 移动或重命名
grep -R "text" .    # 搜索文本
tail -f app.log     # 持续查看日志

执行修改或删除命令前，先用只读命令确认目录和目标文件。服务出现问题时，依次检查进程、端口、日志和配置。

HTTP 基础

一次 HTTP 请求包含方法、地址、请求头和可选的请求体；响应包含状态码、响应头和响应体。

常见状态码

200：请求成功。
201：资源创建成功。
301 / 308：永久重定向。
400：请求参数或格式错误。
401：缺少有效身份认证。
403：身份已确认但没有权限。
404：资源不存在。
429：请求次数过多。
500：服务端内部错误。

HTTPS 在 HTTP 外增加 TLS 加密。证书需要匹配域名，并在过期前完成续期。

数据结构与算法

选择数据结构时要考虑读取、插入、删除和查找操作的频率。

数组：按下标读取快，中间插入较慢。
栈：后进先出，可用于括号匹配和函数调用。
队列：先进先出，可用于任务调度。
哈希表：平均查找速度快，适合键值映射。
树：适合表示层级关系和有序数据。

def binary_search(nums: list[int], target: int) -> int:
    left, right = 0, len(nums) - 1
    while left <= right:
        middle = (left + right) // 2
        if nums[middle] == target:
            return middle
        if nums[middle] < target:
            left = middle + 1
        else:
            right = middle - 1
    return -1

二分查找要求数据已经排序，时间复杂度为 O(log n)。

数据库

关系型数据库通过表保存数据。主键唯一标识一行，外键描述表之间的关系，索引用额外空间提高查询速度。

CREATE TABLE students (
  id INTEGER PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  created_at TIMESTAMP NOT NULL
);

CREATE INDEX idx_students_name ON students(name);

需要继续学习

事务的原子性、一致性、隔离性和持久性。
索引的适用场景和维护成本。
连接查询、聚合查询和执行计划。
备份、恢复和数据迁移。

学习计划

完成一个带数据库的小项目。
为主要功能补充自动化测试。
学习 Docker 镜像、容器和数据卷。
学习日志、监控和错误排查。
继续练习算法题并记录复杂度。