diff --git a/docs/technical-development/React.md b/docs/technical-development/React.md
new file mode 100644
index 0000000..e799258
--- /dev/null
+++ b/docs/technical-development/React.md
@@ -0,0 +1,12 @@
+---
+title: React 学习资料
+status: unread
+direction: technical-development
+---
+
+# React 学习资料
+
+## 课程讲义
+
+- [React（第一次）](assets/React/react-session-1.pdf)
+- [React（第二次）](assets/React/react-session-2.pdf)
diff --git a/docs/technical-development/assets/sharing-wireshark/tcp.png b/docs/technical-development/assets/sharing-wireshark/tcp.png
new file mode 100644
index 0000000..c56ca92
Binary files /dev/null and b/docs/technical-development/assets/sharing-wireshark/tcp.png differ
diff --git a/docs/technical-development/frontend-html-css.md b/docs/technical-development/frontend-html-css.md
new file mode 100644
index 0000000..73aac52
--- /dev/null
+++ b/docs/technical-development/frontend-html-css.md
@@ -0,0 +1,81 @@
+---
+title: HTML 与 CSS
+status: unread
+direction: technical-development
+---
+
+# HTML 与 CSS
+
+HTML 负责页面内容和结构，CSS 负责外观和布局。浏览器读取两者后显示网页。做页面时，先用 HTML 把内容和层级写清楚，再用 CSS 调整样式。
+
+## HTML：页面结构
+
+HTML 是标记语言，用元素表达页面结构。大多数元素由开始标签、内容和结束标签组成，属性用于补充信息。新建页面时，可以从下面的基本结构开始：
+
+```html
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>训练进度</title>
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+    <main class="card">
+      <h1>训练进度</h1>
+      <p id="summary">已完成 2 个节点</p>
+      <a href="./details.html">查看详情</a>
+    </main>
+  </body>
+</html>
+```
+
+`class` 通常用于给一组元素添加样式，`id` 用于标记页面中一个特定元素。优先选择表达含义的元素，例如 `main`、`nav`、`article` 和 `button`，不要只用 `div` 包住所有内容。表单控件要有对应的 `label`，图片应提供说明内容的 `alt`。
+
+配套资料：[HTML 讲义（PDF）](assets/frontend-html-css/HTML.pdf)。
+
+## CSS：页面样式
+
+CSS 通过选择器找到 HTML 元素，再为它设置样式。下面的 `.card` 会选中 `class="card"` 的元素：
+
+```css
+.card {
+  max-width: 36rem;
+  margin: 2rem auto;
+  padding: 1.5rem;
+  border: 1px solid #d0d7de;
+  border-radius: 0.75rem;
+}
+
+.card h1 { color: #1769aa; }
+```
+
+规则由选择器和一组属性组成。样式可以写在元素的 `style` 属性、页面的 `<style>` 中或独立的 `.css` 文件中；项目中通常用外部样式表，并在 HTML 的 `<head>` 中通过 `<link rel="stylesheet" href="./style.css">` 引入，便于复用和维护。
+
+配套资料：[CSS 讲义（PDF）](assets/frontend-html-css/CSS.pdf)。
+
+每个元素都可以看作一个盒子：内容外面依次是内边距 `padding`、边框 `border` 和外边距 `margin`。它们会影响元素的尺寸和间距；调试布局时，可以用浏览器开发者工具查看盒模型。
+
+## 布局与响应式
+
+排版时常用 `display`、`margin`、`padding`、`flex` 和 `grid`。例如，`grid` 可以排列卡片；媒体查询可以在屏幕较窄时调整间距和列数：
+
+```css
+.card { box-sizing: border-box; }
+.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+@media (max-width: 600px) { .card { margin: 1rem; } }
+```
+
+布局不要只按自己的屏幕尺寸调整。用浏览器开发者工具切换到窄屏宽度，检查文字是否溢出、按钮是否容易点击、内容顺序是否仍然清楚。
+
+## 练习
+
+- [ ] 创建 `index.html` 和 `style.css`，在 HTML 中引入 CSS 文件。
+- [ ] 创建包含标题、列表、表单和按钮的页面，使用合适的语义化元素。
+- [ ] 用 CSS 完成卡片布局，并检查盒模型与窄屏显示效果。
+- [ ] 为表单控件添加 `label`，为有意义的图片添加 `alt`。
+
+## 学习衔接
+
+继续学习[JavaScript、DOM 与现代框架](frontend-javascript-dom.md)；实现页面前对照[产品经理概论与 PRD](../product-operations/product-introduction-prd.md)检查用户流程。
diff --git a/docs/technical-development/sharing-docker.md b/docs/technical-development/sharing-docker.md
new file mode 100644
index 0000000..6510315
--- /dev/null
+++ b/docs/technical-development/sharing-docker.md
@@ -0,0 +1,230 @@
+---
+title: 技术分享：Docker 入门
+status: unread
+direction: technical-development
+---
+
+# 技术分享：Docker 入门
+
+> 资料来源：\
+> csdiy.wiki\
+> 尚硅谷 Docker 快速通关学习笔记 | 時光\
+
+
+# 前情提要：为什么要使用docker？
+//来自csdiy\
+配环境的折磨会极大消磨大家对软件、编程的兴趣。诚然，虚拟机可以解决配环境的一大部分问题，但是虚拟机庞大笨重，且为了某个应用的环境配置好像也不值得模拟一个全新的操作系统。
+
+Docker 的出现让环境配置变得（或许）不再折磨。简单来说，Docker 使用轻量级的“容器”（container）而不是整个操作系统去支持一个应用的配置。应用自身连同它的环境配置被打包为一个个可以自由运行在不同平台 container 中的 image，这极大地节省了所有人的时间成本。
+
+# 什么是docker？
+Docker 是一个开源的容器化平台，它允许开发者将应用程序及其依赖项打包到一个轻量级的、可移植的容器中。
+
+# 为什么是docker?
+- 一致的环境
+  - 所有的依赖项和配置都打包在容器中，因而无论在哪个环境中，应用程序的行为都是相同的，避免了环境差异导致的运行问题，并保证了开发与生产环境的一致性
+- 隔离性
+  - 可以运行多个独立容器，每个容器可以有自己的依赖项和配置，不会影响其他容器。
+  - 容器内的应用程序不会直接访问宿主机的资源，确保了安全性。
+- 可移植性
+- 快速部署与扩展
+  - 快速启动。
+  - Docker 容器可以轻松地进行水平扩展，通过启动多个容器实例来处理更多的请求。
+- 版本控制与依赖管理
+  - Docker 镜像可以进行版本控制，开发者可以轻松地回滚到之前的版本，或者在不同的版本之间切换。
+  - Docker 镜像包含了应用程序的所有依赖项，确保在不同的环境中运行时不会缺少任何依赖。
+- 资源效率
+  - 它们共享宿主机的操作系统内核，而不是每个容器都运行一个完整的操作系统。
+- 社区和生态系统
+  - Docker Hub 提供了大量的公共镜像，开发者可以直接使用这些镜像来快速构建应用程序。
+  - Docker 有庞大的社区支持和丰富的工具链，如 Kubernetes、Docker Compose 等，可以帮助开发者更高效地管理和部署容器化应用。
+
+# Docker 组件
+![alt text](assets/sharing-docker/image.png)
+
+# Docker CLI
+**定义**：与用户交互的主要工具，提供了一组命令，允许用户管理docker镜像、容器、网络和存储等资源。
+
+**作用**： 用户通过 Docker CLI 发送命令，命令被发送到 Docker Host 进行处理
+
+**示例**： 
+```bash
+docker run
+docker build
+docker pull
+docker push
+```
+
+# Docker Host（Docker守护进程）
+**定义**： Docker Host 是运行 Docker 守护进程（dockerd）的机器。守护进程负责管理 Docker 对象，如容器、镜像、网络和卷等。
+
+**作用**： Docker Host 接收来自 Docker CLI 的命令，并执行相应的操作。它还负责与 Docker 注册表（仓库）进行通信，以拉取或推送镜像。
+
+**关系**： Docker Host 是 Docker CLI 和 Docker 容器之间的桥梁
+## Container
+**定义**： 容器是 Docker 中的运行实例，它是基于镜像创建的。容器包含了应用程序及其所有依赖项，并且与宿主机和其他容器隔离。
+
+**关系**： 容器是基于镜像创建的，并且由 Docker Host 管理。容器可以被启动、停止、删除和迁移。
+## Image（镜像）
+**定义**： 镜像是用于创建容器的只读模板。它包含了运行应用程序所需的所有文件、库、配置和依赖项。
+
+**作用**： 镜像是容器的构建块，它定义了容器的行为和环境。镜像可以通过 Dockerfile 构建，也可以从 Docker 仓库中拉取。
+**关系**： 镜像是容器的蓝图，容器是镜像的运行实例。镜像可以被推送到 Docker 仓库，也可以从仓库中拉取。
+## Registry（仓库）
+**定义**：仓库是存储和分发 Docker 镜像的地方。Docker Hub 是最常用的公共仓库，但也可以使用私有仓库。
+
+**作用**：仓库允许用户共享和分发镜像，使得团队成员可以轻松获取和使用相同的镜像。
+
+**关系**：Docker Host 可以从仓库中拉取镜像，也可以将本地构建的镜像推送到仓库。Docker CLI 提供了 `docker pull` 和 `docker push` 命令来与仓库交互。
+
+> - Docker CLI 是用户与 Docker 交互的接口，用户通过它发送命令。
+> - Docker Host 是运行 Docker 守护进程的机器，负责处理 Docker CLI 的命令并管理容器和镜像。
+> - 容器 是基于镜像创建的运行实例，由 Docker Host 管理。
+> - 镜像 是容器的只读模板，定义了容器的行为和环境。
+> - 仓库 是存储和分发镜像的地方，Docker Host 可以从仓库中拉取镜像，也可以将本地镜像推送到仓库。
+
+# 应用程序部署方式
+- 传统部署：直接安装在物理服务器上，使用服务器的操作系统及其资源
+- 虚拟化部署：运行在虚拟机（VM）中
+- 容器部署：运行在容器中，容器共享宿主机的操作系统内核。
+![alt text](assets/sharing-docker/image-1.png)
+
+# Docker Compose
+> compose.yml
+>
+> 官方文档：
+>
+> https://docs.docker.com/reference/compose-file/
+
+
+**Docker Compose** 是一个用于定义和运行多容器 Docker 应用程序的工具。通过使用 YAML 文件来配置应用程序的服务、网络和卷，Docker Compose 可以轻松地启动、停止和管理多个容器。
+![alt text](assets/sharing-docker/image-2.png)
+> .yaml的作用？
+> - 定义服务（启动哪些容器）
+> - 配置环境：写好端口等等
+> - 管理依赖
+> - 一键启动
+![alt text](assets/sharing-docker/image-3.png)
+
+👆👆约球系统的.yaml
+
+# 常用命令：
+`docker-compose up`
+
+**功能**： 启动服务\
+**常用选项**： 
+- `-d`：在后台运行服务
+- `--build`：在启动服务之前构建image
+- `--force-recreate`：强制重新创建容器，即使它们的配置和镜像没有改变
+
+**示例**： 
+
+`docker compose up -d postgres`\
+`postgres`：只启动名为 postgres 的这一个服务，不启动 compose 文件里的其他服务。（写在docker-compose.yml文件里）
+
+
+`docker-compose down` \
+**功能**： 停止并删除服务\
+**常用选项**： 
+- `-v`：删除与服务关联的卷
+- `--rmi all`：删除所有与服务关联的镜像
+
+`docker-compose ps`\
+**功能**： 列出正在运行的服务
+
+`docker-compose logs`\
+**功能** ：查看服务的日志。\
+**常用选项**： 
+- `-f`：实时跟踪日志输出。
+- `--tail=N`：只显示最后 N 行日志。
+
+`docker-compose build`\
+**功能**：构建服务镜像。\
+**常用选项**：
+- `--no-cache`：不使用缓存构建镜像。
+
+`docker-compose exec`\
+**功能**：在运行的容器中执行命令。\
+**示例**： \
+`docker compose exec postgres psql -U postgres -d srtp`\
+`docker-compose start`\
+**功能**：启动已停止的服务。
+
+`docker-compose stop`\
+**功能**：停止正在运行的服务。
+
+`docker-compose restart`\
+**功能**：重启服务。
+
+`docker-compose pull`\
+**功能**：拉取服务的镜像。
+
+`docker-compose config`\
+**功能**：验证并查看 docker-compose.yml 文件的配置。
+
+`docker-compose run`\
+**功能**：运行一次性命令。\
+**常用选项**：\
+-` -e`：设置环境变量。\
+-`--rm`：命令完成后删除容器。
+
+`docker-compose scale`\
+**功能**：扩展服务的实例数量。
+
+`docker-compose port`\
+**功能**：查看服务的端口映射。
+
+`docker-compose port web 80`\
+`docker-compose top`\
+**功能**：查看正在运行的进程。
+
+# Dockerfile
+如果你想把你的项目变成一个可以随处运行的镜像，你就需要写 Dockerfile。\
+它是一个文本文件，包含了一系列指令，告诉 Docker 按照什么步骤来打包你的应用。
+
+> 官方文档：https://docs.docker.com/reference/dockerfile/
+
+- 核心作用：解决“如何把我的源码和依赖变成一个镜像”的问题。
+- 常用指令：
+  - `FROM`：基于哪个“底座”（比如 `golang:1.22`）。
+  - `COPY`：把你的代码拷贝进镜像。
+  - `RUN`：执行命令（比如 `go build`）。
+  - `CMD`：镜像启动后默认运行什么程序。
+
+![alt text](assets/sharing-docker/image-4.png)
+👆👆👆约球系统的Dockerfile
+# 来玩一下！
+启动一个nginx ，将它的首页改成自己的页面！
+## STEP 0: 前置条件
+确保你已经打开了docker ！
+## STEP 1: 下载镜像
+### 搜索镜像
+`docker search nginx`
+### 下载
+`docker pull nginx`
+## STEP 2: 启动容器
+`docker run -d -p 8080:80 --name my-nginx nginx`
+- `-d`：后台运行，防止终端被nginx的日志占满
+- `-p` 8080:80: 端口映射，左边是电脑端口，右边是nginx的端口
+- `--name`:起个名字
+- `nginx`: 告诉docker启动哪个镜像
+## STEP 3: 验证成功
+`docker ps`
+### 看到状态是up
+浏览器打开http://localhost:8080
+## STEP 4: 修改首页
+`docker exec my-nginx sh -c "echo '<h1>Hello, Docker! This is my own page.</h1>' > /usr/share/nginx/html/index.html"`
+## STEP 5: 结束
+`docker rm -f my-nginx`
+
+# 练习
+
+- [ ] 为一个 Node 服务写最小 Dockerfile。
+- [ ] 解释 `-p 8080:8080` 的两端分别代表什么。
+- [ ] 使用 Compose 启动应用和数据库，并记录环境变量来源。
+
+# 学习衔接
+
+先完成[Shell 与 Linux 基础](shell-basics.md)，再将容器用于项目；服务维护参考[运维实践](sharing-operations.md)。
+
+
diff --git a/docs/technical-development/sharing-go.md b/docs/technical-development/sharing-go.md
new file mode 100644
index 0000000..7fced84
--- /dev/null
+++ b/docs/technical-development/sharing-go.md
@@ -0,0 +1,17 @@
+---
+title: Go语言
+status: unread
+direction: technical-development
+---
+# Go语言
+
+## 为什么是Go？
+- 编译型语言，性能好
+- 语法简单，易于上手
+- 其他选择：C#、TS也欢迎大家探索！
+
+## 学习Go语言
+按照学习语言的惯例，我们应该在这里罗列GO的基础语法\
+但是Go语言官方文档的Quick Start做的非常好！\
+强烈建议大家跟着下面的链接一边学习一边写代码！\
+https://golang.google.cn/tour/list
diff --git a/docs/technical-development/sharing-server-operations.md b/docs/technical-development/sharing-server-operations.md
new file mode 100644
index 0000000..eebb444
--- /dev/null
+++ b/docs/technical-development/sharing-server-operations.md
@@ -0,0 +1,1161 @@
+---
+title: 技术分享：服务器运维
+status: unread
+direction: technical-development
+---
+
+> 前面的话：\
+> 服务器运维高度依赖于经验与实操，本文比起运维指南，更像是一个命令速查手册，不建议大家逐字阅读，背诵一些基本命令即可（也可以LLM启动！）\
+> 依我个人看来，大家最需要关注的是1.2的排查思路，以及'九'的案例分析\
+> 此处推荐大家一个实操网站，可以去玩玩看
+> https://sadservers.com/scenarios
+
+# Linux 服务器常见故障排查与运维命令
+
+> 适用环境：Ubuntu / Debian / CentOS / Rocky Linux 等主流 Linux 服务器  
+> 前置知识：Linux 基础命令、进程管理、Docker 基础  
+
+---
+
+## 一、服务器故障排查的基本思路
+
+服务器出现异常时，应该先确定故障范围，再逐步定位原因。
+
+### 1.1 常见故障分类
+
+| 故障类型 | 常见现象 | 排查方向 |
+|---|---|---|
+| 服务故障 | Nginx、MySQL、Redis 无法启动 | systemctl、journalctl |
+| 网络故障 | SSH 无法连接、网站无法访问 | IP、路由、端口、防火墙 |
+| CPU 异常 | CPU 使用率持续较高 | top、ps、mpstat |
+| 内存异常 | 内存不足、进程被终止 | free、vmstat、dmesg |
+| 磁盘异常 | 磁盘空间不足、写入失败 | df、du、iostat |
+| 日志异常 | 应用报错、服务频繁重启 | tail、grep、journalctl |
+| 权限异常 | Permission denied | ls、id、stat |
+| DNS 异常 | 域名无法解析 | dig、nslookup |
+
+### 1.2 推荐的排查顺序
+检查系统资源（CPU、内存、磁盘、进程）\
+检查服务状态\
+查看系统与应用日志\
+检查网络与端口\
+修复并验证\
+ps:修复成功后建议记录故障与解决方案（比如写进产研的飞书）
+
+例如，网站无法访问时，应优先检查服务、端口和网络（比如端口是不是导错了）；服务器整体卡顿时，应优先检查系统资源（比如磁盘和数据库是不是又爆炸了）。
+
+
+## 二、服务器日志管理
+
+Linux 服务器的日志主要包括：
+
+- 系统日志：记录系统运行事件。
+- 服务日志：记录 Nginx、MySQL 等服务的运行状态。
+- 安全日志：记录用户认证、SSH 登录等事件。
+- 应用日志：记录业务程序的运行情况。
+
+### 2.1 常见日志目录
+
+| 日志路径 | 主要用途 | 常见系统 |
+|---|---|---|
+| `/var/log/` | 系统日志存放目录 | 通用 |
+| `/var/log/messages` | 常规系统事件 | RHEL 系 |
+| `/var/log/syslog` | 系统日志 | Debian / Ubuntu |
+| `/var/log/nginx/access.log` | Nginx 访问日志 | 安装 Nginx 的系统 |
+| `/var/log/nginx/error.log` | Nginx 错误日志 | 安装 Nginx 的系统 |
+| `/var/log/mysql/` | MySQL 相关日志 | 依配置而定 |
+| `/var/log/secure` | 安全与认证日志 | RHEL 系 |
+| `/var/log/auth.log` | 用户认证和 SSH 日志 | Debian / Ubuntu |
+
+
+
+### 2.2 实时查看日志
+
+使用 `tail -f` 持续观察日志文件末尾的新内容。
+
+```bash
+tail -f app.log
+tail -f /var/log/nginx/access.log
+tail -f /var/log/nginx/error.log
+```
+
+如果日志文件会轮转，推荐：
+
+```bash
+tail -F /var/log/nginx/error.log
+```
+
+区别：
+
+- `-f`：跟踪当前文件。
+- `-F`：按文件名持续跟踪，适合日志轮转场景。
+
+
+### 2.3 查看最近日志
+
+```bash
+# 最近 100 行
+tail -n 100 app.log
+
+# 最近 500 行
+tail -n 500 app.log
+
+# 查看文件开头
+head -n 50 app.log
+```
+这些操作本质上还是要熟悉shell语法
+
+### 2.4 搜索错误信息
+
+```bash
+# 搜索包含 ERROR 的日志
+grep "ERROR" app.log
+
+# 忽略大小写
+grep -i "error" app.log
+
+# 显示匹配行及前后5行
+grep -C 5 "ERROR" app.log
+
+# 搜索多种关键字
+grep -Ei "error|failed|timeout" app.log
+```
+
+结合管道进行过滤：
+
+```bash
+tail -n 1000 app.log | grep -i error
+```
+
+### 2.5 查看系统内核日志
+
+```bash
+dmesg
+```
+
+查看最近的内核事件：
+
+```bash
+dmesg -T | tail -n 50
+```
+
+常用于检查：
+
+- 硬件异常
+- 磁盘 I/O 错误
+- 内存不足
+- 驱动异常
+- OOM Killer 事件
+
+
+---
+
+## 三、网络故障排查
+
+网络故障可能出现在 IP 配置、路由、DNS、端口、防火墙或应用服务等不同层面，这里要求学习计网知识。
+
+### 3.1 查看 IP 地址
+
+```bash
+ip addr
+```
+
+简化输出：
+
+```bash
+ip -br addr
+```
+
+
+
+重点关注：
+
+- 网卡是否处于 UP 状态。
+- 是否配置了正确的 IP。
+- 是否存在异常的网络接口。
+
+### 3.2 查看路由表
+
+```bash
+ip route
+```
+
+查看到某个目标 IP 使用的路由：
+
+```bash
+ip route get 8.8.8.8
+```
+
+重点关注：
+
+- 是否存在默认路由。
+- 默认网关是否正确。
+- 数据包是否通过预期网卡发送。
+
+### 3.3 测试网络连通性
+
+```bash
+ping 8.8.8.8
+ping example.com
+```
+
+两者的区别：
+
+- `ping 8.8.8.8`：测试到目标 IP 的 ICMP 连通性。
+- `ping example.com`：还涉及域名解析。
+
+注意：ping 失败不一定意味着网络故障，部分服务器或防火墙会禁止 ICMP。
+
+### 3.4 测试 TCP 端口
+
+```bash
+nc -vz 192.168.1.10 3306
+```
+`-v` 显示详细信息 
+`-z` 仅检查端口，不传输应用数据
+
+也可以使用：
+
+```bash
+telnet 192.168.1.10 3306
+```
+
+但 telnet 不一定默认安装，且不适合传输敏感信息。
+
+### 3.5 查看监听端口
+
+```bash
+ss -lntp
+```
+
+参数说明：
+
+- `-l`：仅显示监听状态。
+- `-n`：使用数字形式显示地址和端口。
+- `-t`：显示 TCP。
+- `-p`：显示对应进程。
+
+示例：
+
+```bash
+ss -lntp | grep ':8080'
+```
+
+如果服务没有监听预期端口，需要进一步检查：
+
+1. 服务是否启动。
+2. 服务配置是否正确。
+3. 是否监听了错误的 IP。
+4. 启动过程中是否出现异常。
+
+### 3.6 查看所有 TCP 连接
+
+```bash
+ss -antp
+```
+
+```bash
+ss -s
+```
+
+常见 TCP 状态：
+
+| 状态 | 含义 |
+|---|---|
+| LISTEN | 等待连接 |
+| ESTABLISHED | 连接已建立 |
+| TIME_WAIT | 等待连接关闭后的超时 |
+| CLOSE_WAIT | 对端已关闭，等待本地程序关闭连接 |
+| SYN_SENT | 正在发起连接 |
+
+大量 `CLOSE_WAIT` 可能意味着应用没有及时关闭连接，但需要结合业务情况判断。
+
+### 3.7 查看端口占用
+
+```bash
+lsof -i:8080
+```
+
+也可以使用：
+
+```bash
+ss -lntp | grep ':8080'
+```
+
+典型问题：
+
+```text
+Address already in use
+```
+
+通常表示应用尝试绑定的地址和端口已经被其他进程占用。
+
+排查流程：
+
+```bash
+# 查找端口占用
+sudo lsof -iTCP:8080 -sTCP:LISTEN -n -P
+
+# 查看进程详情
+ps -fp PID
+```
+
+确认进程用途后，再决定是否修改端口或停止冲突服务。
+
+### 3.8 HTTP 请求测试
+
+```bash
+curl http://127.0.0.1:8080
+```
+
+只查看响应头：
+
+```bash
+curl -I http://example.com
+```
+
+查看详细请求过程：
+
+```bash
+curl -v http://example.com
+```
+
+查看 HTTP 状态码：
+
+```bash
+curl -s -o /dev/null -w "%{http_code}\n" http://127.0.0.1:8080
+```
+
+常见状态码：
+
+| 状态码 | 含义 |
+|---|---|
+| 200 | 请求成功 |
+| 301 / 302 | 重定向 |
+| 403 | 拒绝访问 |
+| 404 | 资源不存在 |
+| 500 | 服务器内部错误 |
+| 502 | 网关或上游服务异常 |
+| 503 | 服务暂时不可用 |
+| 504 | 网关等待上游响应超时 |
+
+### 3.9 DNS 解析
+
+```bash
+nslookup example.com
+dig example.com
+```
+
+查看简洁结果：
+
+```bash
+dig +short example.com
+```
+
+如果 IP 可以访问，但域名无法访问，应优先检查 DNS。
+
+### 3.10 路由追踪
+
+```bash
+traceroute example.com
+tracepath example.com
+```
+
+用于观察数据包经过的网络路径。
+
+注意：部分中间路由器不响应探测包，因此出现 `*` 不一定代表实际通信中断。
+
+---
+
+## 四、systemd 服务管理
+
+在现代 Linux 发行版中，systemd 是常见的系统和服务管理器。
+
+`systemctl` 用于管理服务，`journalctl` 用于查看 systemd journal 中的日志。
+
+### 4.1 查看服务状态
+
+```bash
+systemctl status nginx
+systemctl status mysql
+systemctl status redis
+```
+
+可能出现的状态：
+
+| 状态 | 含义 |
+|---|---|
+| active (running) | 服务正在运行 |
+| inactive (dead) | 服务未运行 |
+| failed | 服务运行失败 |
+| activating | 服务正在启动 |
+| deactivating | 服务正在停止 |
+
+注意：`active (exited)` 也可能是正常状态，常见于一次性执行的服务。
+
+### 4.2 启动、停止与重启
+
+```bash
+sudo systemctl start nginx
+sudo systemctl stop nginx
+sudo systemctl restart nginx
+sudo systemctl reload nginx
+```
+最常用）
+`restart` 和 `reload` 的区别：
+
+- `restart`：停止并重新启动服务，可能中断连接。
+- `reload`：通知服务重新加载配置，通常不需要完整重启，但取决于服务是否支持。
+
+修改 Nginx 配置后，推荐先检查语法：
+
+```bash
+sudo nginx -t
+```
+
+确认无误后：
+
+```bash
+sudo systemctl reload nginx
+```
+
+### 4.3 查看服务列表
+
+```bash
+systemctl list-units --type=service
+```
+
+只查看运行中的服务：
+
+```bash
+systemctl list-units --type=service --state=running
+```
+
+查看失败的服务：
+
+```bash
+systemctl --failed
+```
+
+查看所有已安装的服务单元文件：
+
+```bash
+systemctl list-unit-files --type=service
+```
+
+### 4.5 查看服务日志
+
+```bash
+journalctl -u nginx
+```
+
+查看最近 100 条：
+
+```bash
+journalctl -u nginx -n 100
+```
+
+实时跟踪：
+
+```bash
+journalctl -u nginx -f
+```
+
+查看本次启动以来的日志：
+
+```bash
+journalctl -b
+```
+
+查看本次启动以来 Nginx 的日志：
+
+```bash
+journalctl -b -u nginx
+```
+
+查看指定时间范围：
+
+```bash
+journalctl -u nginx --since "1 hour ago"
+```
+
+查看错误级别日志：
+
+```bash
+journalctl -p err -b
+```
+
+查看近期日志并跳转到末尾：
+
+```bash
+journalctl -xe
+```
+
+### 4.6 服务启动失败的排查流程
+
+假设 Nginx 无法启动。
+
+第一步：检查状态。
+
+```bash
+systemctl status nginx
+```
+
+第二步：检查日志。
+
+```bash
+journalctl -u nginx -n 100 --no-pager
+```
+
+第三步：检查配置。
+
+```bash
+sudo nginx -t
+```
+
+第四步：检查端口。
+
+```bash
+sudo ss -lntp | grep -E ':80|:443'
+```
+
+第五步：修复原因后启动。
+
+```bash
+sudo systemctl start nginx
+```
+
+第六步：验证服务。
+
+```bash
+systemctl is-active nginx
+curl -I http://127.0.0.1
+```
+
+---
+
+## 五、CPU 与进程故障排查
+
+CPU 使用率过高是服务器运行缓慢的常见原因之一。
+
+但 CPU 使用率高并不一定代表故障，需要结合负载、进程状态和业务情况判断。
+
+### 5.1 查看服务器整体负载
+
+```bash
+uptime
+```
+
+输出示例：
+
+```text
+10:30:01 up 15 days, 2 users, load average: 1.20, 0.85, 0.70
+```
+
+三个数字分别表示：
+最近 1 分钟平均负载、最近 5 分钟平均负载、最近 15 分钟平均负载。
+
+Linux Load Average 主要反映处于可运行状态以及不可中断睡眠状态的任务数量平均值。
+
+它不等同于 CPU 使用率。
+
+例如：
+
+一台具有 4 个逻辑 CPU 的服务器，持续出现 Load Average = 8，说明需要进一步检查 CPU 竞争或 I/O 等待等问题。
+
+### 5.2 查看 CPU 核心数量
+
+```bash
+nproc
+```
+
+查看 CPU 详细信息：
+
+```bash
+lscpu
+```
+
+重点关注：
+
+- CPU(s)
+- Core(s) per socket
+- Socket(s)
+- Thread(s) per core
+- CPU 型号
+
+### 5.3 使用 top 观察进程
+
+```bash
+top
+```
+
+常用交互操作：
+
+|---|---|
+| `P` | 按 CPU 使用率排序 |
+| `M` | 按内存使用率排序 |
+| `1` | 显示每个逻辑 CPU |
+| `H` | 切换线程显示 |
+| `q` | 退出 |
+
+
+```text
+%Cpu(s)
+load average
+Tasks
+MiB Mem
+MiB Swap
+```
+
+CPU 统计中的常见字段：
+
+| 字段 | 含义 |
+|---|---|
+| us | 用户态 CPU 时间占比 |
+| sy | 内核态 CPU 时间占比 |
+| id | CPU 空闲时间占比 |
+| wa | 等待 I/O 的 CPU 时间占比 |
+| st | 虚拟机被宿主机占用的 CPU 时间占比 |
+
+### 5.4 查找 CPU 占用最高的进程
+
+```bash
+ps aux --sort=-%cpu | head
+```
+
+查找内存占用最高的进程：
+
+```bash
+ps aux --sort=-%mem | head
+```
+
+查看指定进程：
+
+```bash
+ps -fp PID
+```
+
+查看进程启动参数：
+
+```bash
+ps -p PID -o pid,ppid,user,%cpu,%mem,etime,args
+```
+
+### 5.5 查看进程内部线程
+
+```bash
+top -H -p PID
+```
+
+作用：
+
+查看指定进程内部各线程的 CPU 使用情况。
+
+也可以使用：
+
+```bash
+ps -L -p PID -o pid,tid,pcpu,stat,comm
+```
+
+### 5.6 查看 CPU 使用趋势
+
+安装 sysstat 后：
+
+```bash
+mpstat -P ALL 1
+```
+
+含义：
+
+- `-P ALL`：显示所有逻辑 CPU。
+- `1`：每秒输出一次统计。
+
+如果只有某个 CPU 长期满载，而其他 CPU 空闲，可能存在单线程瓶颈或 CPU 亲和性配置问题。
+
+---
+
+## 六、内存故障排查
+
+### 6.1 查看内存使用情况
+
+```bash
+free -h
+```
+
+示例：
+
+```text
+               total    used    free   shared  buff/cache  available
+Mem:            16Gi    8Gi     1Gi     1Gi      7Gi        7Gi
+Swap:            4Gi    0Gi     4Gi
+```
+
+重点关注：
+
+- `total`：总内存。
+- `used`：已使用内存。
+- `free`：完全空闲内存。
+- `buff/cache`：缓冲与缓存相关内存。
+- `available`：估计可供新程序使用的内存。
+- `Swap`：交换空间使用情况。
+
+Linux 会利用空闲内存进行缓存，因此 `free` 很低不一定代表内存不足。
+
+判断内存压力时，应重点结合 `available`、Swap 活动和 OOM 日志。
+
+### 6.2 查看内存与系统活动
+
+```bash
+vmstat 1
+```
+
+重点字段：
+
+| 字段 | 含义 |
+|---|---|
+| r | 等待运行的任务数量 |
+| b | 处于不可中断睡眠的任务数量 |
+| si | 从 Swap 换入内存的数据量 |
+| so | 从内存换出到 Swap 的数据量 |
+| wa | CPU 等待 I/O 的时间占比 |
+
+如果 `si`、`so` 持续较高，同时系统明显变慢，可能存在内存压力。
+
+### 6.3 检查 OOM
+
+OOM（Out of Memory）表示系统或受限内存环境无法满足内存分配需求。
+
+Linux 可能通过 OOM Killer 终止某些进程。
+
+检查内核日志：
+
+```bash
+journalctl -k -b | grep -iE 'out of memory|oom|killed process'
+```
+
+也可以使用：
+
+```bash
+dmesg -T | grep -i oom
+```
+
+注意：容器或 cgroup 内存限制触发的 OOM，可能需要结合容器事件和 cgroup 指标分析。
+
+---
+
+## 七、磁盘故障排查
+
+### 7.1 查看磁盘容量
+
+```bash
+df -h
+```
+
+重点关注：
+
+- 文件系统容量。
+- 已使用空间。
+- 可用空间。
+- 挂载点。
+
+查看 inode 使用情况：
+
+```bash
+df -i
+```
+
+如果 inode 耗尽，即使磁盘仍有剩余空间，也可能无法创建新文件。
+
+### 7.2 查找占用空间较大的目录
+
+```bash
+du -sh /var/log
+```
+
+查看指定目录下各项大小：
+
+```bash
+du -h --max-depth=1 /var/log
+```
+
+按大小排序：
+
+```bash
+sudo du -h --max-depth=1 /var | sort -h
+```
+
+注意：`du` 扫描大型目录可能产生明显的磁盘 I/O，生产环境应谨慎使用。
+
+### 7.3 查看磁盘 I/O
+
+安装 sysstat 后：
+
+```bash
+iostat -xz 1
+```
+
+重点指标：
+
+| 指标 | 含义 |
+|---|---|
+| r/s | 每秒读请求数 |
+| w/s | 每秒写请求数 |
+| r_await | 平均读请求等待时间 |
+| w_await | 平均写请求等待时间 |
+| %util | 设备处理 I/O 的时间占比 |
+
+注意：
+
+`%util` 接近 100% 不一定代表 SSD 或并行存储已经达到性能极限，需要结合延迟、吞吐量和设备类型判断。
+
+### 7.4 磁盘满了怎么办？
+
+推荐排查流程：
+
+```bash
+# 1. 检查文件系统
+df -h
+
+# 2. 检查 inode
+df -i
+
+# 3. 定位大目录
+sudo du -h --max-depth=1 /var | sort -h
+
+# 4. 检查日志目录
+sudo du -h --max-depth=1 /var/log | sort -h
+
+# 5. 查看 journal 占用
+journalctl --disk-usage
+```
+
+如果日志占用过大，应检查日志轮转策略，而不是直接删除正在使用的日志文件。
+
+另外，已删除但仍被进程打开的文件，也可能继续占用磁盘空间：
+
+```bash
+sudo lsof +L1
+```
+
+---
+
+## 八、Docker 容器故障排查
+
+对于通过 Docker 部署的服务，需要区分宿主机问题和容器内部问题。
+
+### 8.1 查看容器运行状态
+
+```bash
+docker ps
+docker ps -a
+```
+
+
+### 8.2 查看容器日志
+
+```bash
+docker logs CONTAINER
+```
+
+最近 100 行：
+
+```bash
+docker logs --tail 100 CONTAINER
+```
+
+实时跟踪：
+
+```bash
+docker logs -f CONTAINER
+```
+
+### 8.3 查看容器资源使用
+
+```bash
+docker stats
+```
+
+
+### 8.4 查看容器详细信息
+
+```bash
+docker inspect CONTAINER
+```
+
+查看退出码：
+
+```bash
+docker inspect -f '{{.State.ExitCode}}' CONTAINER
+```
+
+查看是否触发 OOM：
+
+```bash
+docker inspect -f '{{.State.OOMKilled}}' CONTAINER
+```
+
+### 8.5 查看 Docker 磁盘占用
+
+```bash
+docker system df
+```
+
+注意：不要在不了解数据用途的情况下执行批量清理命令，尤其需要谨慎处理数据卷。
+
+---
+
+## 九、典型故障案例
+
+### 案例一：网站突然无法访问
+
+**故障现象**
+
+浏览器访问网站时出现：
+
+```text
+502 Bad Gateway
+```
+
+**排查步骤**
+
+第一步：检查 Nginx 状态。
+
+```bash
+systemctl status nginx
+```
+
+第二步：检查 Nginx 错误日志。
+
+```bash
+sudo tail -n 100 /var/log/nginx/error.log
+```
+
+第三步：检查后端服务是否运行。
+
+```bash
+ss -lntp | grep ':8080'
+```
+
+第四步：直接访问后端服务。
+
+```bash
+curl -v http://127.0.0.1:8080
+```
+
+第五步：如果后端使用 Docker，检查容器。
+
+```bash
+docker ps -a
+docker logs --tail 100 CONTAINER
+```
+
+**可能原因**
+
+- 后端服务崩溃。
+- 后端端口配置错误。
+- Nginx 上游地址配置错误。
+- 后端响应异常。
+- 容器不断重启。
+
+**核心思路**
+
+将问题分为代理层和应用层，逐层检查。。
+
+### 案例二：服务器运行缓慢
+
+**故障现象**
+
+SSH 操作卡顿，应用响应变慢。
+
+**排查步骤**
+
+```bash
+# 查看整体负载
+uptime
+
+# 查看 CPU 占用
+top
+
+# 查看内存
+free -h
+
+# 查看磁盘空间
+df -h
+
+# 查看系统活动
+vmstat 1
+
+# 查看磁盘 I/O
+iostat -xz 1
+```
+
+**分析方向**
+
+| 现象 | 可能原因 |
+|---|---|
+| CPU 长时间接近满载 | 计算密集型任务、异常进程 |
+| Load 很高但 CPU 不忙 | I/O 等待、不可中断睡眠任务 |
+| available 内存持续很低 | 内存压力 |
+| Swap 频繁换入换出 | 内存压力、工作集超出物理内存 |
+| 磁盘延迟持续升高 | 存储瓶颈 |
+| 某个进程资源占用异常 | 应用程序问题 |
+
+### 案例三：服务启动失败
+
+**故障现象**
+
+```text
+Failed to start nginx.service
+```
+
+**排查步骤**
+
+```bash
+# 查看服务状态
+systemctl status nginx
+
+# 查看服务日志
+journalctl -u nginx -n 100
+
+# 检查配置文件
+sudo nginx -t
+
+# 检查端口
+sudo ss -lntp | grep -E ':80|:443'
+
+# 检查磁盘
+df -h
+```
+
+**可能原因**
+
+- 配置文件语法错误。
+- 端口被其他进程占用。
+- 文件权限不足。
+- 依赖资源不可用。
+- 磁盘空间不足。
+
+---
+
+## 十、服务器日常巡检命令清单
+
+日常巡检可以快速掌握服务器的整体健康状态。
+
+### 10.1 系统信息
+
+```bash
+hostnamectl
+uptime
+uname -a
+```
+
+### 10.2 CPU
+
+```bash
+nproc
+lscpu
+top
+ps aux --sort=-%cpu | head
+```
+
+### 10.3 内存
+
+```bash
+free -h
+vmstat 1
+ps aux --sort=-%mem | head
+```
+
+### 10.4 磁盘
+
+```bash
+df -h
+df -i
+lsblk
+```
+
+### 10.5 网络
+
+```bash
+ip -br addr
+ip route
+ss -lntp
+ss -s
+```
+
+### 10.6 服务
+
+```bash
+systemctl --failed
+systemctl list-units --type=service --state=running
+```
+
+### 10.7 日志
+
+```bash
+journalctl -p err -b
+journalctl -k -b
+```
+
+### 10.8 Docker
+
+```bash
+docker ps -a
+docker stats --no-stream
+docker system df
+```
+
+---
+
+## 十一、常用命令速查表
+
+| 排查目标 | 命令 |
+|---|---|
+| 查看服务器负载 | `uptime` |
+| 查看 CPU 占用 | `top` |
+| 查看高 CPU 进程 | `ps aux --sort=-%cpu` |
+| 查看线程 CPU | `top -H -p PID` |
+| 查看内存 | `free -h` |
+| 查看内存与 I/O 活动 | `vmstat 1` |
+| 查看磁盘容量 | `df -h` |
+| 查看 inode | `df -i` |
+| 查看目录大小 | `du -sh DIR` |
+| 查看磁盘 I/O | `iostat -xz 1` |
+| 查看 IP | `ip addr` |
+| 查看路由 | `ip route` |
+| 查看监听端口 | `ss -lntp` |
+| 查看端口占用 | `lsof -i:PORT` |
+| 测试 TCP 端口 | `nc -vz IP PORT` |
+| 测试 HTTP | `curl -v URL` |
+| 查询 DNS | `dig DOMAIN` |
+| 查看服务状态 | `systemctl status SERVICE` |
+| 查看服务日志 | `journalctl -u SERVICE` |
+| 实时查看日志 | `tail -F FILE` |
+| 搜索日志 | `grep -i ERROR FILE` |
+| 查看内核日志 | `journalctl -k -b` |
+| 查看容器状态 | `docker ps -a` |
+| 查看容器日志 | `docker logs CONTAINER` |
+| 查看容器资源 | `docker stats` |
+
+---
+
+## 十二、总结
+遇到问题时可能的排查思路：
+1. **系统是否正常？** CPU、内存、磁盘？
+2. **服务是否正常？** 进程是否运行，systemd 是否报告错误？
+3. **日志说明了什么？** 是否存在异常、超时、权限错误或 OOM？
+4. **网络是否正常？** IP、端口、DNS 和应用连接是否符合预期？
+5. **修复是否有效？** 服务是否恢复，异常是否消失，是否需要持续监控？
+
+
+
+---
+
+## 参考资料
+
+1. [Linux man-pages](https://man7.org/linux/man-pages/)
+2. [systemd 官方文档](https://systemd.io/)
+3. [Docker 官方文档](https://docs.docker.com/)
+4. [Nginx 中文文档](https://nginx.org/cn/docs/)
+5. [SadServers 故障排查练习](https://sadservers.com/scenarios)
+6. [Brendan Gregg — Linux Performance](https://www.brendangregg.com/linuxperf.html)
diff --git a/docs/technical-development/sharing-wireshark.md b/docs/technical-development/sharing-wireshark.md
new file mode 100644
index 0000000..c3c5642
--- /dev/null
+++ b/docs/technical-development/sharing-wireshark.md
@@ -0,0 +1,454 @@
+# Wireshark简介
+
+> 原作者：@马瑀涵
+>
+> 修改：@翁祖翔
+
+**拓展/参考阅读**
+
+- Wireshark 在 CTF 中的使用：
+
+  - [Wireshark \- CTF Wiki](https://ctf-wiki.org/misc/traffic/protocols/wireshark/)
+
+  - [流量分析 \- Hello CTF](https://hello-ctf.com/hc-misc/pcap/#wireshark)
+
+- 官方文档：https://www\.wireshark\.org/learn
+
+- [网络分析工具——WireShark的使用\(超详细\)\-CSDN博客](https://blog.csdn.net/zzwwhhpp/article/details/113077747)
+
+## 一、Wireshark 是什么？
+
+Wireshark 是一个**免费开源的网络数据包分析工具**，被誉为“网络分析界的瑞士军刀”。它可以捕获网卡上传输的所有数据包，并逐层解析协议内容，让“看不见摸不着”的网络通信变得直观可见。
+
+**一句话概括**：给网线装一个“听诊器”，让所有数据包无处遁形。
+
+---
+
+## 二、了解Wireshark有什么用？
+
+### 2\.1 让抽象理论“可视化”
+
+- TCP 三次握手、DNS 解析、HTTP 请求/响应等理论，都可以在 Wireshark 中亲眼看到
+
+  > - TCP 三次握手是什么？
+  >
+  >     **第一步**：客户端发送一个 SYN=1，ACK=0 标志的数据包给服务端，请求进行连接，这是第一次握手；
+  >
+  >     **第二步**：服务端收到请求并且允许连接的话，就会发送一个SYN=1，ACK=1标志的数据包给发送端，告诉它，可以通讯了，并且让客户端发送一个确认数据包，这是第二次握手；
+  >
+  >     **第三步**：服务端发送一个 SYN=0，ACK=1 的数据包给客户端，告诉它连接已被确认，这就是第三次握手。TCP连接建立，开始通讯。
+  >
+  > ![tcp三次握手](assets/sharing-wireshark/tcp.png)
+  >
+  > - DNS 解析是什么？
+  >
+  >   - DNS 解析是把我们输入的“域名”，翻译成电脑能懂的 “IP 地址” 的过程。
+
+- 将协议栈分层（物理层→链路层→网络层→传输层→应用层）以实际数据包形式呈现
+
+### 2\.2 解决日常网络问题
+
+- 宿舍网络卡顿：抓包查看是延迟高还是丢包
+
+- 怀疑被蹭网/ARP欺骗：抓包找大量异常广播包
+
+- 程序连不上服务器：抓包定位连接被重置的原因
+
+### 2\.3 打下网络安全基础
+
+- 理解为什么 HTTP 明文传输不安全
+
+- 为后续学习网络攻防、流量分析做准备
+
+---
+
+## 三、网络协议分层基础（TCP/IP 模型）
+
+在深入使用 Wireshark 之前，需要先理解网络数据是如何分层组织的。**TCP/IP 模型**是最常用的网络模型，共分四层，Wireshark 的“数据包详情区”就是按照这个顺序从下往上展示的。
+
+### 3\.1 四层模型与作用
+
+| 层级  | 名称        | 作用                    | Wireshark 中对应的协议    | 日常类比                        |
+| --- | --------- | --------------------- | ------------------- | --------------------------- |
+| 4   | **应用层**   | 为应用程序提供网络服务，规定数据格式    | HTTP、DNS、FTP、SSH    | 寄信时信纸上写的“内容”和“格式”（比如中文还是英文） |
+| 3   | **传输层**   | 提供端到端的通信，保证数据可靠或高效    | TCP、UDP             | 快递公司的“服务类型”（普通快递还是特快专递）     |
+| 2   | **网络层**   | 负责寻址和路由，把数据从源头发送到目的地  | IP（IPv4/IPv6）、ICMP  | 快递单上的“收件人地址”（决定包裹往哪个城市送）    |
+| 1   | **网络接口层** | 处理物理硬件（网卡、网线）和 MAC 地址 | Ethernet、Wi\-Fi、ARP | 快递的“运输工具”（货车、飞机）和“派送员”      |
+
+### 3\.2 数据包的“洋葱结构”
+
+网络数据在发送时，每一层都会在数据外面**包上一层自己的头**（就像快递单、包装盒、填充物）。接收时，每一层再把自己的头拆掉。
+
+**示例**：你在浏览器输入 `http://example.com`，按下回车后：
+
+1. **应用层**：浏览器构造 HTTP 请求头（GET /index\.html）
+
+2. **传输层**：加上 TCP 头（源端口随机，目标端口 80，序列号等）
+
+3. **网络层**：加上 IP 头（源 IP 你的电脑，目标 IP example\.com 的服务器 IP）
+
+4. **网络接口层**：加上 Ethernet 头（源 MAC 你的网卡，目标 MAC 网关的 MAC）
+
+最终变成一个**二进制流**，通过网线或 Wi\-Fi 发送出去。
+
+在 Wireshark 中，你从“数据包详情区”自上而下看到的顺序正好是：Frame → Ethernet → IP → TCP → HTTP，这就是从物理层到应用层的**解包过程**。
+
+### 3\.3 关键术语解释
+
+| 术语          | 含义                    | 通俗理解               |
+| ----------- | --------------------- | ------------------ |
+| **MAC 地址**  | 网卡的物理地址，出厂时烧录，全球唯一    | 身份证号（一生不变）         |
+| **IP 地址**   | 设备在网络中的逻辑地址，可动态变化     | 快递地址（搬家后会变）        |
+| **端口号**     | 区分同一台设备上的不同应用程序       | 大楼里的门牌号            |
+| **TCP**<br> | 面向连接的可靠协议，保证数据不丢失、不乱序 | 打电话（先拨号建立连接，通话，挂断） |
+| **UDP**     | 无连接的不可靠协议，速度快但不保证到达   | 寄明信片（扔进邮筒就不管了）     |
+| **DNS**     | 域名系统，把域名翻译成 IP 地址     | 电话本：输入名字查号码        |
+
+---
+
+## 四、安装与准备
+
+### 4\.1 下载
+
+- 官网：https://www\.wireshark\.org/download\.html
+
+- 根据操作系统选择对应版本
+
+### 4\.2 安装注意事项（Windows）
+
+- 安装过程中会出现 **Npcap** 组件安装提示，**必须勾选并安装**
+
+- 若提示“WinPcap 已安装但不再支持”，请先卸载 WinPcap，再安装 Npcap（勾选“WinPcap API\-compatible Mode”）
+
+- [Npcap下载官网](https://npcap.com/)
+
+- 安装完成后**建议重启电脑**，使驱动生效
+
+### 4\.3 验证安装成功
+
+- 打开 Wireshark，能看到一张网卡列表（如“以太网”、“Wi\-Fi”），表示安装成功
+
+### [超详细的 Wireshark 抓包使用教程](https://www.cnblogs.com/clnchanpin/p/19440477)
+
+---
+
+## 五、Wireshark 核心概念
+
+### 5\.1 两大过滤器
+
+| 类型        | 作用时机  | 典型场景          | 示例                       |
+| --------- | ----- | ------------- | ------------------------ |
+| **捕获过滤器** | 抓包前设置 | 减少抓包文件大小，提升效率 | `tcp port 80`            |
+| **显示过滤器** | 抓包后筛选 | 从海量数据中精准定位    | `ip.addr == 192.168.1.1` |
+
+> **小技巧**：右键点击数据包详情区的某个字段 → “作为过滤器应用”，可直接生成过滤条件，无需死记硬背。
+
+### 5\.2 三大主界面区域
+
+1. **数据包列表区**：展示每个数据包的编号、时间戳、源/目标地址、协议、长度、信息摘要。
+
+2. **数据包详情区**：按协议层展示（Frame → Ethernet → IP → TCP/UDP → HTTP/DNS 等），**分析核心所在**。
+
+3. **数据包字节区**：原始十六进制和 ASCII 码显示。
+
+---
+
+## 六、实战操作流程
+
+### 6\.1 第一步：选择正确的网卡
+
+- 打开 Wireshark，观察每个网卡旁边的**波形图（实时流量波动条）**
+
+- 哪个波形在跳动，就说明该网卡正在收发数据
+
+- **双击正在使用的网卡**，开始抓包
+
+### 6\.2 第二步：产生网络流量
+
+- 打开浏览器，访问一个**不强制跳转 HTTPS 的网站**，例如 `http://example.com` 或 `http://httpbin.org`
+
+- ⚠️ 不要用百度、谷歌等 HTTPS 网站，否则抓到的是加密包，看不到内容
+
+### 6\.3 第三步：停止抓包
+
+- 页面加载完成后，点击工具栏的**红色方形按钮**（停止抓包）
+
+### 6\.4 第四步：使用显示过滤器
+
+- **筛选 DNS 包**：在过滤器框输入 `dns` → 回车，看到域名解析请求和响应
+
+- **筛选 HTTP 包**：输入 `http` → 回车，只显示 HTTP 协议的数据包
+
+### 6\.5 第五步：分析一个 HTTP 包
+
+1. 在数据包列表中选择一个 `HTTP 200 OK` 响应包
+
+2. 在**数据包详情区**逐层展开，观察：
+
+   - **Frame**：物理层，整个帧的长度、捕获时间
+
+   - **Ethernet II**：数据链路层，源/目标 MAC 地址
+
+   - **Internet Protocol**：网络层，源/目标 IP 地址
+
+   - **Transmission Control Protocol**：传输层，源/目标端口、序列号、标志位
+
+   - **Hypertext Transfer Protocol**：应用层，状态码、响应正文
+
+### 6\.6 第六步：Follow TCP Stream（还原完整对话）
+
+1. 右键任意一个 HTTP 请求或响应包
+
+2. 选择 **Follow** → **TCP Stream**
+
+3. 弹出窗口显示：
+
+   - 红色内容：客户端发送的数据（如 `GET / HTTP/1.1`）
+
+   - 蓝色内容：服务器返回的数据（如 HTTP 响应头 \+ HTML 页面）
+
+4. **安全提示**：不加密的 HTTP 协议下，抓包者可直接看到你的所有通信内容——这就是为什么公共 Wi\-Fi 上不要输入密码。
+
+### 6\.7 第七步：保存抓包文件（可选）
+
+- 菜单栏 **File** → **Save As** → 保存为 `.pcapng` 文件
+
+---
+
+## 注：Wireshark 数据包颜色标识详解
+
+Wireshark 使用**着色规则（Coloring Rules）** 为不同协议或状态的数据包标记颜色，帮助用户在数据包列表中快速识别和定位关注的信息。
+
+### 1、颜色规则的作用
+
+- 默认情况下，Wireshark 内置了一套着色规则，根据数据包的**协议类型**、**标志位**或**专家信息**自动分配颜色。
+
+- 你可以在菜单栏 **视图 \(View\) → 着色规则 \(Coloring Rules\.\.\.\)** 中查看、修改或自定义所有规则。
+
+### 2、常见默认颜色及其含义
+
+下表列出了一些常见的内置颜色含义（不同 Wireshark 版本可能略有差异）：
+
+| 颜色示例            | 常见含义         | 详细说明                                    |
+| --------------- | ------------ | --------------------------------------- |
+| 🟢 **绿色**       | 正常 TCP 数据包   | 最常见的普通 TCP 通信流量。                        |
+| 🔵 **浅蓝色**      | UDP 数据包      | 例如 DNS 查询、DHCP 等基于 UDP 的协议。             |
+| 🔵 **深蓝色**      | DNS 协议流量     | 专门用于标记 DNS（域名系统）的请求和响应。                 |
+| 🟣 **淡紫色**      | TCP 连接管理包    | 如 TCP 三次握手中的 SYN 包、连接关闭时的 FIN 包等控制信息。   |
+| 🔴 **红色**       | TCP 重置包（RST） | 表示连接被突然关闭或拒绝，通常意味着网络问题或服务拒绝。            |
+| ⚫ **黑色背景/红色文字** | 协议错误或问题包     | 例如 TCP 重传、乱序、丢包等异常情况，由 Wireshark 分析后标记。 |
+| 🟡 **黄色背景**     | 专家信息警告       | 提示应用层错误（如 HTTP 404）或协议规范违反等需要注意的事件。     |
+
+> **注意**：颜色规则是按顺序应用的，**第一条匹配的规则将决定数据包的颜色**，后续规则不再覆盖。因此，如果一个数据包同时满足多条规则，只会显示最先匹配的那条颜色。
+
+### 3、如何自定义颜色规则
+
+你可以根据需要添加、修改或删除颜色规则，以便突出显示特定流量。
+
+1. **打开着色规则窗口**
+   菜单栏：**视图 \(View\) → 着色规则 \(Coloring Rules\.\.\.\)**
+
+2. **新增规则**
+
+   - 点击 **\+** 按钮
+
+   - 在 **Name** 字段输入规则名称（如“我的HTTP流量”）
+
+   - 在 **Filter** 字段输入显示过滤器表达式（例如 `http`）
+
+   - 点击 **Foreground**（前景色/文字颜色）和 **Background**（背景色）按钮选择颜色
+
+   - 点击 **OK** 保存
+
+3. **编辑或删除规则**
+
+   - 选中已有规则，点击 **Edit\.\.\.** 进行修改，或点击 **\-** 按钮删除
+
+4. **调整规则优先级**
+
+   - 规则按列表**从上到下**的顺序匹配。你可以通过 **Up** 和 **Down** 按钮调整规则顺序，将更重要的规则放在前面。
+
+### 4、使用颜色进行快速诊断
+
+- **大量黑色或红色包**：通常表示网络存在丢包、延迟、拥塞或连接被拒绝等问题，需要进一步分析时间戳和对应流。
+
+- **大量黄色背景包**：提示可能存在应用层错误（如服务器返回 404）或协议不规范行为。
+
+- **青蓝色背景（专家信息 Note 级别）**：提示需要注意的事件，例如 HTTP 重定向或非致命错误。
+
+### 5、重置默认颜色规则
+
+如果你修改后想恢复 Wireshark 的出厂颜色设置，可以：
+
+- 打开 **着色规则** 窗口
+
+- 点击 **Reset** 按钮（将所有规则恢复为安装时的默认状态）
+
+---
+
+通过理解并善用颜色规则，你可以成倍提升分析数据包的效率，快速从海量流量中定位异常或关键信息。
+
+## 七、日常生活实用场景与做法
+
+Wireshark 不只是用于学习或专业工作，它也能辅助解决我们日常生活中遇到的很多网络问题。以下是几个典型场景和具体的操作步骤。
+
+### 7\.1 场景一：网络突然变卡，玩游戏延迟飙升
+
+**可能原因**：某些进程在大量上传/下载占用带宽，或者网络中存在大量重传（信号干扰/网线接触不良）。
+
+**Wireshark 排查步骤**：
+
+1. 在卡顿的时候，打开 Wireshark 抓包 30 秒
+
+2. 停止抓包，在显示过滤器输入 `tcp.analysis.retransmission` → 回车
+
+3. **观察结果**：
+
+   - 如果有大量重传包 → 说明网络质量差，可能是 Wi\-Fi 干扰或网线问题
+
+   - 如果没有重传但依然卡 → 可能是带宽被占满，可以限制程序占用
+
+### 7\.2 场景二：怀疑有人在进行 ARP 欺骗
+
+**ARP 欺骗是什么**：攻击者发送伪造的 ARP 包，告诉路由器“我是你”（把网关的 IP 映射到攻击者的 MAC），于是你的所有流量都先经过攻击者的电脑，他就可以窃听甚至篡改数据。
+
+**Wireshark 检测步骤**：
+
+1. 抓包几分钟（建议在晚上大家都在使用时抓）
+
+2. 在显示过滤器输入 `arp` → 回车，只查看 ARP 包
+
+3. **观察异常**：
+
+   - 正常情况下，ARP 包应该是“谁有 192\.168\.1\.1？请告诉 192\.168\.1\.100”
+
+   - 如果看到大量 `192.168.1.1 is at XX:XX:XX:XX:XX:XX` 来自**不同 MAC 地址**，或者同一个 IP 对应多个 MAC，说明有人在欺骗
+
+4. **进一步确认**：输入 `arp.duplicate-address-detected` 或观察是否有 `arp.opcode == 2`（回复包）频繁且异常
+
+5. **解决办法**：
+
+   - 修改路由器管理员密码、Wi\-Fi 密码，开启 WPA2/WPA3 加密
+
+   - 绑定 IP\-MAC 静态映射（在路由器设置中）
+
+   - 使用 `arp -s` 命令手动绑定网关的 MAC（临时措施，重启失效）
+
+### 7\.3 场景三：某个网站或游戏服务器突然连不上了
+
+**可能原因**：连接被重置、服务器无响应、DNS 解析失败等。
+
+**Wireshark 排查步骤**：
+
+1. 清空浏览器缓存，启动 Wireshark 抓包
+
+2. 访问打不开的网站
+
+3. 停止抓包，输入显示过滤器 `http` 或 `dns`
+
+4. **判断故障点**：
+
+   - 如果看到 `DNS Standard query` 但没有响应 → DNS 服务器问题
+
+   - 如果看到 `TCP SYN` 多次重传（红色标记）但无 `SYN-ACK` → 服务器不通或防火墙拦截
+
+   - 如果看到 `TCP RST`（重置包） → 连接被对方主动拒绝（可能是 IP 被屏蔽）
+
+   - 如果看到 `HTTP 404/500` → 网站本身问题，不是你网络的问题
+
+5. **解决办法**：
+
+   - DNS 问题：换用 `8.8.8.8` 或 `114.114.114.114`
+
+   - TCP 不通：检查防火墙、代理设置；尝试 ping 服务器 IP 看是否通
+
+   - 被重置：可能需要更换网络环境或使用 VPN
+
+### 7\.4 场景四：想知道某个 App 在后台偷偷上传什么数据
+
+**做法**：
+
+1. 手机上开启热点，让电脑连接该热点，在电脑上用 Wireshark 抓包（手机流量会经过电脑）
+
+2. 或者直接在电脑上安装模拟器，在模拟器里运行 App，然后抓包
+
+3. 过滤出 `http` 或 `tcp.port` 常见端口（80, 443, 8080）
+
+4. Follow TCP Stream 查看明文内容（如果是 HTTPS，只能看到域名，内容加密）
+
+**注意**：未经允许抓取他人流量涉及隐私问题，请仅用于自己的设备。
+
+### 7\.5 场景五：检测自己电脑是否有异常外联（疑似中毒）
+
+**做法**：
+
+1. 关闭所有正常上网的程序（浏览器、游戏、聊天软件）
+
+2. 打开 Wireshark 抓包 5\-10 分钟
+
+3. 显示过滤器输入 `tcp.flags.syn == 1 && tcp.flags.ack == 0`（只查看主动发起的 SYN 请求）
+
+4. 检查这些 SYN 包的目标 IP 是否陌生，尤其是国外 IP 或非知名端口
+
+5. 用 `nslookup` 或在线工具查询该 IP 的域名，如果是已知的 C2 服务器（僵尸网络控制端），则可能中毒
+
+**注意**：Windows 系统本身会有一些后台服务（如时间同步、更新检测）产生正常外联，不要误判。
+
+---
+
+## 八、常用显示过滤器速查
+
+| 目的                 | 过滤器表达式                                     |
+| ------------------ | ------------------------------------------ |
+| 只看 HTTP 协议         | `http`                                     |
+| 只看 DNS 协议          | `dns`                                      |
+| 只看 ARP 协议          | `arp`                                      |
+| 只看来自某 IP 的数据       | `ip.src == 192.168.1.100`                  |
+| 只看发往某 IP 的数据       | `ip.dst == 8.8.8.8`                        |
+| 只看某端口（如 80）        | `tcp.port == 80`                           |
+| 只看 TCP 重置包（连接被拒绝）  | `tcp.flags.reset == 1`                     |
+| 只看重传包（网络卡顿信号）      | `tcp.analysis.retransmission`              |
+| 只看 TCP 三次握手的 SYN 包 | `tcp.flags.syn == 1 && tcp.flags.ack == 0` |
+| 组合条件（与）            | `ip.src == 192.168.1.100 and http`         |
+| 排除某 IP             | `ip.addr != 192.168.1.1`                   |
+
+---
+
+## 九、常见问题与解决
+
+| 问题                     | 原因                    | 解决办法                                          |
+| ---------------------- | --------------------- | --------------------------------------------- |
+| 网卡列表为空                 | Npcap 未安装或驱动未加载       | 重新运行 Wireshark 安装程序，勾选 Npcap；或手动安装 Npcap      |
+| 双击网卡后无数据包              | 选错网卡 / 无权限            | 换一个网卡；Windows 以管理员身份运行 Wireshark              |
+| 输入 `http` 过滤器后无结果      | 访问的网站强制跳转 HTTPS       | 改用 `http://example.com`或`http://neverssl.com` |
+| Follow TCP Stream 窗口乱码 | 内容为 gzip 压缩或 HTTPS 加密 | 换不压缩的 HTTP 网站                                 |
+| 抓不到本地回环包（127\.0\.0\.1） | 默认网卡不支持 Loopback      | 安装 Npcap 时勾选“支持回环抓包”；macOS 选择 `lo0` 接口        |
+| 过滤后列表为空                | 过滤器语法错误或没有匹配的包        | 检查过滤器是否输错（例如 http 误写成 htt），清除过滤器重试            |
+
+---
+
+## 十、拓展高级功能
+
+| 场景                  | 操作                                       |
+| ------------------- | ---------------------------------------- |
+| **统计协议占比**          | Statistics → Protocol Hierarchy          |
+| **找出占用带宽最多的 IP**    | Statistics → Conversations → 按“Bytes”列排序 |
+| **快速定位连接故障**        | 显示过滤 `tcp.flags.reset == 1`，找到被重置的连接     |
+| **分析延迟和丢包**         | 显示过滤 `tcp.analysis.retransmission`，筛选重传包 |
+| **绘制 IO 图表**        | Statistics → I/O Graph，可以看流量随时间变化的波形     |
+| **导出特定流量的内容**       | Follow TCP Stream 后，选择“Save as…”保存原始数据   |
+| **解析 TLS 流量（需要密钥）** | 设置环境变量 SSLKEYLOGFILE，然后在 Wireshark 中导入   |
+
+---
+
+## 十一、总结
+
+- Wireshark 的核心是**过滤器**，掌握它就掌握了大半功能
+
+- 通过抓包直观理解网络分层、协议交互、HTTP/HTTPS 原理
+
+- 日常可用来排查网络卡顿、检测蹭网/欺骗、分析软件行为、定位服务器故障
+
+- **核心操作/过滤器**：`dns`、`http`、`ip.addr ==`、`tcp.port ==`、`tcp.analysis.retransmission`、Follow TCP Stream
+
+> **尝试**：用 Wireshark 抓一次访问 `http://example.com` 的完整过程，找到 DNS 查询包的响应时间，以及 HTTP 响应中的状态码和 Server 字段。然后尝试抓一下自己电脑的卡顿时段，看看有没有重传包。
diff --git "a/docs/technical-development/\346\212\200\346\234\257\347\240\224\345\217\221\346\226\271\345\220\221.md" "b/docs/technical-development/\346\212\200\346\234\257\347\240\224\345\217\221\346\226\271\345\220\221.md"
index b312f9e..bc127ab 100644
--- "a/docs/technical-development/\346\212\200\346\234\257\347\240\224\345\217\221\346\226\271\345\220\221.md"
+++ "b/docs/technical-development/\346\212\200\346\234\257\347\240\224\345\217\221\346\226\271\345\220\221.md"
@@ -16,6 +16,41 @@ status: unread
 ## 内容概览
 > 由于26秋冬为第一次实行该套内训系统，有的文档可能会随时上线/更新
 
+<<<<<<< HEAD
+
+1. [命令行、Shell 与 Linux 基础](shell-basics.md)：熟悉目录、管道、SSH 与服务环境。
+2. [Git基础](git-basic.md)：熟悉基本的git操作。
+3. [环境配置与 TypeScript](environment-typescript.md)：搭好运行环境，掌握类型与模块。
+
+**阶段产出：**能在本机运行、提交和解释一个 TypeScript 小程序。
+
+## 第二阶段：选择主线
+
+| 前端主线 | 后端主线 |
+| --- | --- |
+| 3. [HTML 与 CSS](frontend-html-css.md)：页面结构、样式与响应式布局 | 3. [后端面向对象与 TypeScript](backend-oop-typescript.md)：类、接口与业务建模 |
+| 4. [JavaScript、DOM 与现代框架](frontend-javascript-dom.md)：事件、状态与异步请求；继续学习 [React 学习资料](React.md) | 4. [HTTP、API 与爬虫](backend-http-api.md)：协议、接口设计与请求处理 |
+| 5. 对照[产品经理概论与 PRD](../product-operations/product-introduction-prd.md)实现页面状态 | 5. [数据库、MySQL 与 Prisma](backend-database-mysql-prisma.md)：持久化与数据关系 |
+
+**阶段产出：**前端做一个可交互页面，后端做一个带数据库的 API；两者通过约定好的 JSON 结构联调。
+
+## 第三阶段：项目与分享
+
+6. 按项目需要选读：
+   - 文本处理：[正则表达式](sharing-regex.md)
+   - 网络排障：[Wireshark 入门](sharing-wireshark.md)
+   - 数据存储：[MongoDB 入门](sharing-mongodb.md)
+   - 语言拓展：[Go 语言入门](sharing-go.md)
+   - 部署与环境：[Docker 入门](sharing-docker.md)、[运维实践](sharing-operations.md)、[服务器运维](sharing-server-operations.md)
+   - 登录与安全：[密码学入门](sharing-cryptography.md)
+   - 辅助开发：[AI Agent 与编程助手](sharing-ai-agent.md)
+
+**阶段产出：**可运行项目、README、测试记录和一次技术分享。
+
+## 跨方向补充
+
+开发前阅读[需求分析、调研与验证](../product-operations/product-research-validation.md)，明确用户问题；上线后阅读[产品推广、反馈与增长](../product-operations/product-feedback-growth.md)，把使用问题和 Bug 带回迭代。
+=======
 - 前端
     - 三件套、TS
     - 前端框架
@@ -35,3 +70,4 @@ status: unread
     - 计网基础
     - 服务器运维基础
     - ...
+>>>>>>> origin/main