完整编程速查表
格式: .md
定位: 一站式编程速查表,合并 dmb.html 所有分类 + 新增 Mermaid 分类
说明: 产出物1 是独立的 Mermaid 速查表;产出物6 是在其基础上,补充网络/操作系统/HTML/CSS/JS/Markdown/颜色/Linux/K鸿蒙等全部分类,形成一份覆盖所有常用场景的完整大速查表。
⚠️ 提示:以下速查表内容已在产出物1和产出物4、5的对话中陆续输出完毕,为保证最终交付的完整性,这里直接输出 完整合并版,供你复制保存为独立文件。
| 清空日志文件 | > 日志文件路径 | > /mnt/nas/web/all_access.log — 清空 NAS 访问日志 |
完整编程速查表(大合并版)
本速查表整合网络配置、操作系统命令、前端开发(HTML/CSS/JS)、Markdown 写作、颜色代码、Mermaid 流程图等常用编程知识。所有分类采用统一的三列表格格式(名称 | 代码 | 用例),便于快速查阅和复制使用。
使用说明:
- 代码块中内容表示可直接复制运行的命令或代码
- 用例列提供实际场景示例,帮助理解用法
- 标注 ⚠️ 的为易错点,建议特别注意
- 本表可在 Obsidian、VS Code、Typora 等 Markdown 编辑器中直接使用
一、网络与 DNS
公共 DNS 地址、网络连通测试、端口查看等常用网络命令。
公共 DNS 列表
| 运营商名称 |
主 DNS |
辅助 DNS |
| 114DNS |
114.114.114.114 |
114.114.115.115 |
| 阿里 DNS |
223.5.5.5 |
223.6.6.6 |
| 百度 DNS |
180.76.76.76 |
180.76.76.76 |
| 腾讯 DNS |
119.29.29.29 |
119.28.28.28 |
| 中国移动 |
211.137.58.20 |
218.201.96.130 |
| 中国电信 |
218.85.157.99 |
114.114.114.114 |
| 中国联通 |
122.192.6.4 |
221.5.88.88 |
| Google DNS |
8.8.8.8 |
8.8.4.4 |
| Cloudflare DNS |
1.1.1.1 |
1.0.0.1 |
| Quad9 DNS |
9.9.9.9 |
149.112.112.112 |
网络测试与诊断命令
| 名称 |
代码 |
用例 |
| 测试网络连通性 |
ping 目标地址 |
ping www.baidu.com — 测试外网连通性
ping -n 10 8.8.8.8 — Windows 指定 ping 10 次
ping -c 5 192.168.1.1 — Linux/Mac 指定 ping 5 次 |
| 持续 ping |
ping -t 目标地址 (Win) |
ping -t 192.168.1.1 — 持续 ping 网关,按 Ctrl+C 停止 |
| 跟踪路由路径 |
tracert 目标地址 (Win)
traceroute 目标地址 (Mac/Linux) |
tracert baidu.com — 跟踪到百度的路由节点
traceroute -n 8.8.8.8 — 不解析 IP 域名,速度更快 |
| 路径丢包分析 |
pathping 目标地址 |
pathping baidu.com — 分析路由各节点丢包率(Windows 专属) |
| 域名解析查询 |
nslookup 域名 |
nslookup baidu.com — 查看域名对应 IP
nslookup 8.8.8.8 — 反向解析 IP 对应域名 |
| 查看本机 IP |
ipconfig (Win)
ip a 或 ifconfig (Mac/Linux) |
ipconfig /all — Windows 查看详细网络配置
ip a show eth0 — Linux 查看指定网卡信息 |
| 查看网络连接/端口 |
netstat (Win)
ss (Linux) |
netstat -an — 显示所有连接和监听端口
netstat -ano — 显示连接对应的进程 PID
ss -tlnp — Linux 查看端口与进程 |
| 测试端口连通性 |
telnet IP 端口 |
telnet 192.168.1.1 80 — 测试网关 80 端口是否开放 |
| 重置网络栈(Win) |
netsh winsock reset |
管理员权限运行,修复网络异常后需重启 |
| 关闭防火墙(Win) |
netsh advfirewall set allprofiles state off |
管理员权限运行,临时关闭所有防火墙配置 |
| 远程连接 SSH |
ssh 用户名@IP地址 |
ssh root@192.168.1.100 — 远程连接 Linux 服务器
ssh -p 8022 user@192.168.1.100 — 指定端口连接 |
二、操作系统常用命令
跨平台通用命令 + 各操作系统专属命令,按系统分类。
跨平台通用命令
| 名称 |
Windows |
Mac / Linux |
用例 |
| 查看当前目录 |
dir |
ls |
ls -l — 查看详细列表(Mac/Linux)
dir /s — 递归列出所有子目录文件(Win) |
| 切换目录 |
cd 目录名 |
cd 目录名 |
cd Documents — 进入 Documents 文件夹
cd /usr/local — 进入指定目录(Linux)
cd /d D:\work — 跨盘符切换(Win) |
| 返回上一级 |
cd .. |
cd .. |
cd .. — 返回上级目录
cd ../.. — 返回上两级目录 |
| 返回主目录 |
cd %HOMEPATH% |
cd ~ |
cd ~ — 回到用户主目录(Mac/Linux) |
| 显示当前路径 |
— |
pwd |
pwd — 查看当前所在完整路径(Linux/Mac) |
| 清空屏幕 |
cls |
clear |
clear — 清空终端屏幕内容 |
| 创建文件夹 |
md 文件夹名 |
mkdir 文件夹名 |
mkdir new_folder — 创建单个文件夹
mkdir -p dir1/dir2 — 递归创建多级目录(Linux) |
| 删除空文件夹 |
rd 文件夹名 |
rmdir 文件夹名 |
rmdir empty_dir — 删除空目录 |
| 删除文件 |
del 文件名 |
rm 文件名 |
del test.txt — Win 删除文件
rm -f temp.log — Linux 强制删除 |
| 删除目录(含内容) |
rmdir /s 目录名 |
rm -rf 目录名 |
rm -rf old_folder — 强制删除目录及所有内容(⚠️ 谨慎使用) |
| 复制文件 |
copy 源 目标 |
cp 源 目标 |
copy a.txt D:\backup\ — Win 复制
cp -r /src /dst — Linux 递归复制文件夹 |
| 移动/重命名 |
move 源 目标 |
mv 源 目标 |
mv old.txt new.txt — 重命名
mv test.log /var/log/ — 移动文件 |
| 查看文本内容 |
type 文件名 |
cat 文件名 |
cat config.ini — 查看配置文件内容 `cat log.txt |
| 修改文件属性(Win) |
attrib |
— |
attrib +h secret.txt — 隐藏文件
attrib -r readme.txt — 取消只读 |
| 管理员权限 |
右键"以管理员身份运行" |
sudo 命令 |
sudo apt update — Linux 管理员执行
sudo -i — 切换 root 用户 |
| 查看进程 |
tasklist |
ps aux |
`tasklist |
| 结束进程 |
taskkill /f /im 进程名 |
kill 进程号 |
taskkill /f /im notepad.exe — Win 强制关闭
kill -9 1234 — Linux 强制结束 PID 1234 |
| 关机 |
shutdown /s /t 秒 |
poweroff |
shutdown /s /t 60 — Win 60 秒后关机
poweroff — Linux 立即关机 |
| 重启 |
shutdown /r /t 秒 |
reboot |
shutdown /r /t 30 — Win 30 秒后重启
reboot -f — Linux 强制重启 |
| 取消关机(Win) |
shutdown /a |
— |
shutdown /a — 取消已计划的关机/重启 |
| 查看系统信息 |
systeminfo |
uname -a |
systeminfo > sys.txt — Win 导出系统信息
uname -r — Linux 查看内核版本 |
| 清空日志文件 |
— |
> 日志文件路径 |
> /mnt/nas/web/all_access.log — SSH 下清空 NAS 访问日志,保留空文件(⚠️ 清空不可恢复) |
Windows 专属命令
| 名称 |
代码 |
用例 |
| 查看 Windows 版本 |
winver |
运行(Win+R)中输入 winver 执行 |
| 查看系统详细信息 |
msinfo32 |
查看硬件、软件、组件等系统信息 |
| 查看 DirectX 诊断信息 |
dxdiag |
查看显卡、声音等 DirectX 信息 |
| 修复损坏系统文件 |
sfc /scannow |
管理员权限运行,扫描并修复系统文件 |
| 检查并修复磁盘错误 |
chkdsk 盘符: /f |
chkdsk C: /f — 修复 C 盘错误,需重启 |
| 磁盘分区管理 |
diskpart |
管理员权限运行,后续输入 create partition primary 等子命令 |
| 磁盘清理 |
cleanmgr |
cleanmgr C: — 清理 C 盘临时文件、回收站等 |
| 打开任务管理器 |
taskmgr |
快捷键 Ctrl+Shift+Esc 也可打开 |
| 打开服务管理器 |
services.msc |
启动/停止/设置服务自启(如 MySQL 服务) |
| 打开计算机管理 |
compmgmt.msc |
管理磁盘、用户、事件查看器等 |
| 打开设备管理器 |
devmgmt.msc |
安装/卸载/更新硬件驱动 |
| 复制目录及文件(增强) |
xcopy 源 目标 /s /e |
xcopy source_dir D:\dest /s /e — 复制所有子目录,包括空目录 |
Mac / Linux 专属命令
| 名称 |
代码 |
用例 |
| 文件授权(加执行权限) |
chmod +x 文件名 |
chmod +x run.sh — 让 Shell 脚本可执行 |
| 文件授权(数字模式) |
chmod 755 文件名 |
chmod 644 config.ini — 设置读写权限
chmod 755 script.py — rwxr-xr-x |
| 查看端口占用(Mac/Linux) |
lsof -i:端口号 |
sudo lsof -i:80 — 查看 80 端口占用进程 |
| 扫描局域网主机(需安装) |
nmap 目标 |
sudo apt install nmap — 安装 nmap
nmap -sn 192.168.1.0/24 — 扫描在线主机
nmap -F 192.168.1.100 — 快速扫描常见端口 |
| 查看已建立的 TCP 连接 |
ss -tn state established |
只看已建立的 TCP 连接,排除监听状态 |
| 查看网络收发连接 |
ss -ltn 或 sudo ss -tnp |
ss -tnp — 查看连接及对应进程(需 sudo) |
K鸿蒙 / Ubuntu 通用命令
适用于 K鸿蒙(开源鸿蒙)和 Ubuntu 系统的包管理与系统配置。
| 名称 |
代码 |
用例 |
| 查看系统发行版本 |
lsb_release -a |
查看 Ubuntu/K鸿蒙 系统版本与代号 |
| 查看内核版本 |
uname -r |
快速查看当前 Linux 内核版本 |
| 查看完整硬件信息 |
inxi -Fxz |
查看 CPU、内存、显卡、硬盘全套硬件参数 |
| 查看内存使用 |
free -h |
人性化显示已用/空闲内存、交换分区 |
| 查看磁盘分区占用 |
df -h |
查看各分区存储空间剩余与使用率 |
| 查看文件夹大小 |
du -sh 目录名 |
du -sh ~/Documents — 统计该目录整体大小 |
| 更新软件源缓存 |
sudo apt update |
同步仓库软件列表,Ubuntu 与 K鸿蒙通用 |
| 升级所有软件 |
sudo apt upgrade -y |
一键升级已安装的所有程序与系统组件 |
| 安装软件 |
sudo apt install 软件名 |
sudo apt install nano — 安装文本编辑器 |
| 普通卸载软件 |
sudo apt remove 软件名 |
删除程序,保留用户配置文件 |
| 彻底卸载(含配置) |
sudo apt purge 软件名 |
删除软件并清空所有残留配置文件 |
| 清理无用依赖 |
sudo apt autoremove |
自动卸载多余的依赖包,释放空间 |
| 修复依赖问题 |
sudo apt -f install -y |
安装失败缺依赖时使用 |
| 安装 .deb 包 |
sudo apt install ./xxx.deb |
安装本地下载的 .deb 软件包 |
| .run 文件赋权 |
chmod +x xxx.run |
给 .run 安装包添加执行权限 |
| 运行 .run 文件 |
sudo ./xxx.run |
运行 .run 安装包(⚠️ 不能用 apt install) |
| 设置北京时间时区 |
sudo timedatectl set-timezone Asia/Shanghai |
解决系统默认格林威治时间问题 |
| 开启网络自动对时 |
sudo timedatectl set-ntp true |
联网自动同步准确系统时间 |
| 可视化进程管理器 |
htop |
直观查看进程、CPU、内存占用(需安装:sudo apt install htop) |
| 查看系统启动日志 |
journalctl |
排查开机卡顿、服务启动失败报错 |
| 管理系统服务 |
systemctl 动作 服务名 |
systemctl start nginx — 启动 nginx
systemctl enable nginx — 设置开机自启
systemctl status nginx — 查看服务状态 |
| 创建软链接 |
ln -sf 源文件 链接名 |
ln -sf /usr/bin/python3 /usr/bin/python — 建立快捷方式 |
| 查看完整进程树 |
ps auxf |
树形结构显示进程父子关系 |
三、HTML 完整速查表
HTML 基础标签与常用属性速查,适合新手入门和日常参考。
| 名称 |
代码 |
用例 |
| HTML 骨架 |
<!DOCTYPE html><html><head></head><body></body></html> |
所有 HTML 页面的基础结构 |
| 标题 h1~h6 |
<h1>标题</h1> |
<h1>网站首页</h1> — 页面主标题
<h3>产品列表</h3> — 三级标题 |
| 段落 |
<p>内容</p> |
<p>这是一段产品介绍文本,包含核心功能。</p> |
| 换行 |
<br> |
第一行文本<br>第二行文本 — 段落内强制换行 |
| 分割线 |
<hr> |
章节1内容<hr>章节2内容 — 分隔不同章节 |
| 加粗 |
<b> 或 <strong> |
<strong>限时优惠</strong> — 强调重要信息 |
| 斜体 |
<i> 或 <em> |
<em>温馨提示:</em> — 斜体提示 |
| 下划线 |
<u> |
<u>联系电话:12345678</u> — 重点标注 |
| 删除线 |
<del> |
<del>99元</del> 现价69元 — 标注原价 |
| 高亮 |
<mark> |
请在<mark>3个工作日</mark>内完成审核 |
| 上标 |
<sup> |
2<sup>3</sup> = 8 — 数学次方 |
| 下标 |
<sub> |
H<sub>2</sub>O — 水的化学式 |
| 无序列表 |
<ul><li></li></ul> |
产品功能列表:<li>功能1</li> |
| 有序列表 |
<ol><li></li></ol> |
操作步骤:<li>第一步:注册</li> |
| 链接 |
<a href="地址">文字</a> |
<a href="https://baidu.com" target="_blank">访问百度</a> — 新窗口打开 |
| 锚点跳转 |
<a href="#id">跳转</a> + <h2 id="id">位置</h2> |
<a href="#section1">跳转到章节1</a> — 页面内锚点跳转 |
| 图片 |
<img src="地址" alt="说明"> |
<img src="logo.png" alt="网站logo" width="200">
<img src="./photo/2y-1.jpeg" alt="点击查看大图" onclick="window.open(this.src)"> — 点击查看原图 |
| 表格 |
<table><tr><td></td></tr></table> |
<table border="1"><tr><th>姓名</th><td>张三</td></tr></table> |
| 行内代码 |
<code> |
执行命令:<code>npm install</code> |
| 代码块 |
<pre> |
保留格式展示多行代码 |
| 按钮 |
<button>按钮</button> |
<button onclick="alert('点击成功')">点击我</button> |
| 输入框 |
<input type="text"> |
<input type="text" placeholder="请输入姓名"> |
| 多行输入 |
<textarea></textarea> |
<textarea rows="5" cols="30">请输入备注</textarea> |
| 下拉选择 |
<select><option></option></select> |
选项1/选项2 下拉选择 |
| 音频 |
<audio controls src="地址"></audio> |
<audio controls src="music.mp3" loop></audio> — 循环播放 |
| 视频 |
<video controls src="地址"></video> |
<video controls src="video.mp4" width="400"></video> |
| 页面跳转(Meta) |
<meta http-equiv="refresh" content="秒数;url=地址"> |
<meta http-equiv="refresh" content="3;url=https://baidu.com"> — 3秒后跳转 |
| 删除所有 style 标签(正则) |
<style[^>]*>[\s\S]*?</style> |
Ctrl+H 替换,勾选正则 + .匹配换行符 |
| 注释 |
<!-- 注释内容 --> |
添加不显示的说明,仅开发者可见 |
四、CSS 常用样式速查表
CSS 常用属性速查,包括文字、背景、布局、定位等。
| 名称 |
代码 |
用例 |
| 文字颜色 |
color: #333; |
p { color: #ff0000; } — 段落文字红色
.title { color: rgb(0,128,0); } — 标题绿色 |
| 背景色 |
background: #fff; |
body { background: #f5f5f5; } — 页面浅灰背景
.mask { background: rgba(0,0,0,0.5); } — 半透明遮罩 |
| 背景图片 |
background-image: url(地址); |
.banner { background-image: url("bg.jpg"); background-size: cover; } — 全屏背景 |
| 字体大小 |
font-size: 16px; |
h1 { font-size: 24px; } — 一级标题 24px
.content { font-size: 14px; } — 正文 14px |
| 文字水平对齐 |
text-align: center; |
.title { text-align: center; } — 居中
.right { text-align: right; } — 右对齐 |
| 文字加粗 |
font-weight: bold; |
.important { font-weight: bold; } — 加粗
.normal { font-weight: 400; } — 取消加粗 |
| 宽度 |
width: 100%; |
.box { width: 500px; } — 固定宽
.container { width: 90%; margin: 0 auto; } — 自适应居中 |
| 高度 |
height: auto; |
.box { height: 300px; } — 固定高
.content { height: auto; } — 自适应内容 |
| 内边距 |
padding: 10px; |
.card { padding: 15px 20px; } — 上下15,左右20 |
| 外边距 |
margin: 10px; |
.box { margin: 20px 0; } — 上下20,左右0 |
| 块元素居中 |
margin: 0 auto; |
.container { width: 1200px; margin: 0 auto; } |
| 边框 |
border: 1px solid #000; |
.input { border: 1px solid #ccc; border-radius: 4px; } |
| 圆角 |
border-radius: 6px; |
.btn { border-radius: 20px; } — 圆角按钮
.avatar { border-radius: 50%; } — 圆形头像 |
| 阴影 |
box-shadow: 0 2px 5px #ccc; |
.card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } |
| 浮动 |
float: left; / float: right; |
.left { float: left; width: 50%; } — 左浮动占一半 |
| 清除浮动 |
clear: both; |
.clearfix::after { content: ""; display: block; clear: both; } |
| 相对定位 |
position: relative; |
父容器设置,作为子元素绝对定位的参照 |
| 绝对定位 |
position: absolute; top: 0; left: 0; |
相对于最近的定位祖先元素定位 |
| 固定定位 |
position: fixed; top:0; left:0; right:0; |
.header { position: fixed; z-index: 999; } — 固定顶部导航 |
| 透明度 |
opacity: 0.5; |
.mask { opacity: 0.8; } — 80% 不透明 |
| 鼠标手势 |
cursor: pointer; |
.btn { cursor: pointer; } — 变小手
.disabled { cursor: not-allowed; } — 禁用状态 |
| 超出隐藏 + 省略号 |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
单行文字超出显示 ... |
| 行高 |
line-height: 1.6; |
body { line-height: 1.8; } — 提高可读性
.btn { line-height: 30px; height: 30px; } — 文字垂直居中 |
| Flex 居中 |
display: flex; justify-content: center; align-items: center; |
父容器内子元素完全居中 |
五、JavaScript 常用典型代码
JavaScript 常用 DOM 操作、事件、定时器、存储等典型代码片段。
| 功能名称 |
代码 |
用例 |
| 弹出提示 |
alert("提示内容"); |
alert("操作成功!") — 提示用户操作结果 |
| 控制台打印 |
console.log("内容"); |
console.log("用户ID:", 123); — 调试打印变量
console.error("接口请求失败") — 打印错误 |
| 获取元素(ID) |
document.getElementById("id"); |
const btn = document.getElementById("submit-btn"); |
| 获取元素(Class) |
document.getElementsByClassName("类名") |
const items = document.getElementsByClassName("list-item"); — 返回类数组 |
| 获取元素(Tag) |
document.getElementsByTagName("div") |
const divs = document.getElementsByTagName("div"); — 统计页面 div 数量 |
| 修改 HTML 内容 |
元素.innerHTML = "新内容"; |
box.innerHTML = "<h3>新标题</h3><p>新内容</p>"; |
| 修改纯文字 |
元素.innerText = "文字"; |
title.innerText = "最新公告"; — 不解析 HTML |
| 修改样式 |
元素.style.属性 = "值"; |
text.style.color = "#ff0000";
text.style.fontSize = "14px"; |
| 点击事件 |
元素.onclick = function(){} |
btn.onclick = function() { alert("点击了"); } |
| 添加 class |
元素.classList.add("类名") |
box.classList.add("active", "red"); — 添加多个类 |
| 删除 class |
元素.classList.remove("类名") |
box.classList.remove("active"); |
| 切换 class |
元素.classList.toggle("类名") |
有则删除,无则添加 |
| 弹窗输入 |
prompt("请输入内容"); |
const name = prompt("请输入您的姓名:"); |
| 确认框 |
confirm("确定执行吗?"); |
if(confirm("确定删除?")) { // 执行删除 } |
| 页面跳转 |
location.href = "网址"; |
location.href = "https://baidu.com";
location.href = "detail.html?id=123"; — 带参数跳转 |
| 刷新页面 |
location.reload(); |
location.reload(); — 刷新当前页 |
| 返回上一页 |
history.back(); |
history.back(); — 返回上一页
history.go(-2) — 返回上两页 |
| 定时器(单次) |
setTimeout(function(){}, 毫秒); |
setTimeout(() => { alert("3秒后弹出"); }, 3000); |
| 循环定时器 |
setInterval(function(){}, 毫秒); |
setInterval(() => { count++; }, 1000); — 每秒执行 |
| 清除定时器 |
clearTimeout(定时器变量) / clearInterval(定时器变量) |
clearInterval(timer); — 停止循环定时器 |
| 获取当前时间 |
new Date(); |
const now = new Date();
now.toLocaleString(); — 本地格式时间 |
| 本地存储(永久) |
localStorage.setItem("key","值");
localStorage.getItem("key"); |
localStorage.setItem("username", "张三");
const uname = localStorage.getItem("username"); |
| 会话存储(临时) |
sessionStorage.setItem("key","值"); |
sessionStorage.setItem("token", "123456"); — 关闭标签页即清除 |
| 删除存储 |
localStorage.removeItem("key") |
localStorage.removeItem("username"); |
| 清空存储 |
localStorage.clear() |
清除所有本地存储数据 |
| 获取 URL 参数 |
new URLSearchParams(location.search) |
const id = new URLSearchParams(location.search).get("id"); |
| JSON 解析 |
JSON.parse(字符串) |
const obj = JSON.parse('{"name":"张三"}'); |
| JSON 字符串化 |
JSON.stringify(对象) |
const str = JSON.stringify({name:"张三"}); |
六、Markdown 写作速查表
Markdown 常用语法速查,适用于 Obsidian、GitHub、HedgeDoc 等环境。
| 名称 |
代码 |
用例 |
| 一级标题 |
# 标题 |
# 网站首页 — 文章主标题 |
| 二级~六级标题 |
## ~ ###### |
## 功能介绍 — 二级标题
### 操作步骤 — 三级标题 |
| 加粗 |
**文字** |
**截止时间:2024-12-31** — 高亮时间 |
| 斜体 |
*文字* |
*温馨提示* — 标注提示信息 |
| 删除线 |
~~文字~~ |
~~原价99元~~ 现价69元 — 标注价格变动 |
| 引用 |
> 引用内容 |
> 孔子曰:学而时习之 — 引用名言 |
| 多行引用 |
>> 嵌套引用 |
多层引用使用多个 > |
| 无序列表 |
- 列表项 或 * 列表项 |
- 功能1
- 功能2 |
| 有序列表 |
1. 第一项
2. 第二项 |
自动编号,数字不必连续 |
| 任务清单 |
- [x] 已完成
- [ ] 未完成 |
项目进度追踪(Obsidian/GFM) |
| 链接 |
[显示文字](网址) |
[百度](https://baidu.com) |
| 图片 |
 |
 |
| 行内代码 |
`代码` |
执行 `npm install` 安装依赖 |
| 代码块 |
```语言
代码
``` |
```javascript — JS 代码块
```sql — SQL 代码块 |
| 表格 |
` |
表头 |
| 分割线 |
--- 或 *** |
章节分隔,单独一行 |
| 软换行 |
行尾加 两个空格 后回车 |
第一行文字 第二行文字 |
| 分段 |
空一行 |
第一段内容
第二段内容 |
| 强制换行 |
<br> |
第一行<br>第二行 — HTML 标签换行 |
| 特殊符号转义 |
\* \_ \[ \] |
\*星号\* — 显示为 星号 不被渲染
\[括号\] — 显示为 [括号] 不被渲染 |
| 加粗 + 斜体 |
***文字*** |
同时加粗和斜体,强调最重要内容 |
| 下标(Obsidian) |
H~2~O |
H₂O — 水的化学式 |
| 上标(Obsidian) |
X^2^ |
X² — 数学次方 |
| 注释(HTML) |
<!-- 注释 --> |
添加不显示的说明,仅编辑器可见 |
| 脚注 |
[^1] + [^1]: 脚注内容 |
在文末添加注释说明 |
七、常用颜色代码
常用网页颜色色值速查,含 Emoji 视觉标识和 CSS 用例。
| 颜色名 |
色值 |
标识 |
CSS 用例 |
| 纯黑 |
#000000 |
⬛ |
color: #000000; — 页面文字默认黑色 |
| 纯白 |
#FFFFFF |
⬜ |
background: #FFFFFF; — 卡片白色背景 |
| 浅灰 |
#EEEEEE |
◻️ |
body { background: #EEEEEE; } — 页面浅灰背景 |
| 中灰 |
#999999 |
🔘 |
.text-muted { color: #999999; } — 次要文字 |
| 深灰 |
#333333 |
⬛ |
.title { color: #333333; } — 标题文字 |
| 红 |
#FF0000 |
🔴 |
.error { color: #FF0000; } — 错误提示 |
| 绿 |
#00FF00 |
🟢 |
.success { color: #00FF00; } — 成功提示 |
| 蓝 |
#0000FF |
🔵 |
.link { color: #0000FF; } — 链接文字 |
| 黄 |
#FFFF00 |
🟡 |
.warning { color: #FFFF00; } — 警告提示 |
| 橙 |
#FF9900 |
🟠 |
.notice { color: #FF9900; } — 通知文字 |
| 咖啡色(ncg) |
#643200 |
🟤 |
.bg-coffee { background: #643200; } — NAS 页面背景 |
| NJR 绿色 |
#1d6f06 |
🟩 |
.njr-green { color: #1d6f06; } — 品牌绿色 |
| E2E 正文灰 |
#2C2C2C |
⬛ |
.e2e-text { color: #2C2C2C; } — E2E 正文 |
| E2E 灰色 |
#888888 |
🔘 |
.e2e-muted { color: #888888; } — E2E 次要文字 |
| Noki 蓝色 |
#1E5BA2 |
🔵 |
.bg-noki { background: #1E5BA2; } — Noki 品牌蓝 |
八、Mermaid 流程图完整速查表
Mermaid flowchart 语法速查,包括布局方向、节点形状、连线、classDef 样式、subgraph 子图等。适用于 Obsidian、VS Code、Mermaid Live 等环境。
布局方向
| 名称 |
代码 |
用例 |
| 从左到右 |
flowchart LR |
横向流程图,适合时间线、水平业务流 |
| 从上到下 |
flowchart TB |
纵向流程图,默认方向,适合层级结构 |
| 从右到左 |
flowchart RL |
逆向横向流程,较少使用 |
| 从下到上 |
flowchart BT |
逆向纵向流程,较少使用 |
节点形状
| 名称 |
代码 |
用例 |
| 矩形方框 |
id[显示文字] |
s1[业务步骤1] — 普通流程节点,最常用 |
| 圆角矩形 |
id(显示文字) |
start(开始) — 起止节点 |
| 菱形判断框 |
id{显示文字} |
judge{条件判断} — 分支决策节点 |
| 旗帜形(备注) |
id>显示文字] |
note>备注说明] — 旁注节点 |
| 圆形 |
id((显示文字)) |
end((结束)) — 另一种起止风格 |
| 六边形 |
id{{显示文字}} |
prepare{{准备}} — 预处理节点 |
| 平行四边形 |
id[/显示文字/] |
input[/输入数据/] — 输入输出节点 |
连线与箭头
| 名称 |
代码 |
用例 |
| 实线箭头 |
A --> B |
s1 --> judge — 基本流程方向 |
| 实线无箭头 |
A --- B |
s1 --- s2 — 纯连接不表达方向 |
| 虚箭头 |
A -.-> B |
s1 -.-> s3 — 备选/间接关系 |
| 粗箭头 |
A ==> B |
start ==> ok — 强流转主路径 |
| 实线带文字 |
A --文字--> B |
judge --是--> ok — 分支条件标注 |
| 虚线带文字 |
A -.文字.-> B |
check -.超时.-> error — 异常路径 |
| 粗线带文字 |
A ==文字==> B |
start ==成功==> next |
| 双向箭头 |
A <--> B |
client <--> server — 双向交互 |
| 多输入汇聚 |
A --> C + B --> C |
多个节点指向同一目标 |
代码块骨架
| 名称 |
代码 |
用例 |
| 完整代码块 |
mermaid<br>flowchart LR<br> 节点代码写这里<br>
|
一对 ``` 包裹一张图,结束标记独占一行 |
| 多图同文件 |
mermaid<br>flowchart LR<br> A --> B<br>
mermaid<br>flowchart LR<br> C --> D<br>
|
多张图用多组代码块,禁止同块写两次 flowchart |
| 头部全局配置 |
%%{init: { 'flowchart': { 'wrappingWidth': 180 }, 'theme':'dark' }}%% |
放在 flowchart 前,控制宽度和主题(dark/base/forest/neutral) |
classDef 节点样式
| 名称 |
代码 |
用例 |
| 定义样式类 |
classDef 样式名 fill:#颜色,stroke:#颜色,stroke-width:px |
写在 flowchart 内部最开头 |
| 单个节点套用 |
class 节点ID 样式名 |
class err errorStyle |
| 批量套用 |
class 节点A,节点B 样式名 |
class w1,w2 warnStyle |
| 行内简写绑定 |
id[文字]:::样式名 |
err[异常]:::errorStyle — 节点定义时直接绑定 |
| 红色(错误) |
classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke-width:2px |
错误/异常节点 |
| 黄色(警告) |
classDef warnStyle fill:#fff2cc,stroke:#ee9900,stroke-width:1px |
警告/注意节点 |
| 绿色(成功) |
classDef okStyle fill:#d5e8d4,stroke:#288828,stroke-width:1px |
成功/完成节点 |
| 圆角(深色) |
classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666,color:#fff |
适合组织架构图 |
| 透明(备注) |
classDef floatText fill:none,stroke:none |
浮动备注/说明文字 |
subgraph 子图
| 名称 |
代码 |
用例 |
| 基础子图 |
subgraph 名称
节点代码
end |
带标题的分组框,必须放在 flowchart 内部 |
| 子图之间连线 |
跨分组的节点互相连接 |
不同分组内部节点可跨组流转 |
| 子图嵌套 |
subgraph 外层
subgraph 内层
x1[节点]
end
end |
多级分组,注意 end 成对 |
| 箭头指向子图本身 |
G1 -.-> G2 |
箭头指向分组框本身,非内部节点 |
| 子图 ID 别名 |
subgraph GID["中文标题"] |
解决中文子图 ID 连线失效 |
| 子图独立方向 |
subgraph G
direction TB
s1 --> s2
end |
内部独立 TB/LR 方向 |
最小完整示例(可直接复制测试)
```mermaid
flowchart LR
%% 样式放最前面
classDef okStyle fill:#d5e8d4,stroke:#288828,stroke-width:1px
classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke-width:2px
start(开始) --> judge{条件判断}
judge --是--> ok[执行逻辑A]:::okStyle
judge --否--> no[执行逻辑B]:::errorStyle
```
含 init 配置完整模板
```mermaid
%%{init: {'flowchart':{'wrappingWidth':200}, 'theme':'base'}}%%
flowchart TB
classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666,color:#fff
CEO(董事长):::roundBox
subgraph EXEC["执行管理团队"]
Tech(执行总监):::roundBox
Admin(行政副总):::roundBox
Front(技术副总):::roundBox
end
CEO --> Tech
Tech --> Admin
Tech --> Front
```
语法强制约束(高频踩坑清单)
| 序号 |
约束规则 |
| 1 |
节点 ID 只能英文、数字、下划线;显示文本可中文。同图 ID 不可重名 |
| 2 |
一张图仅允许一次 flowchart XX 声明,禁止同块重复 |
| 3 |
所有符号全部英文半角,禁止中文全角 【】、--> |
| 4 |
结束标记 ``` 必须独占一行 |
| 5 |
classDef 必须写在 flowchart 内部最靠前位置,写在节点后不生效 |
| 6 |
注释使用 %%,禁用 // 或 /* */ |
| 7 |
subgraph 和 end 必须成对出现,少写 end 直接报错 |
| 8 |
subgraph 必须写在 flowchart 内部,不能写在外面 |
| 9 |
Obsidian 预览异常:Ctrl+R 重载渲染;检查 Mermaid 开关 |
| 10 |
布局差异:Obsidian 对部分 %%{init} 支持有限,可用 https://mermaid.live/ 校验 |
文件分工规范
| 文件类型 |
用途 |
说明 |
.mmd |
编辑 + 导出 SVG 的源文件 |
纯 Mermaid 源码,不含 ```mermaid 标记 |
.md |
阅读 + Obsidian 预览 |
含代码块 + 图表的完整文档,不作为导出源 |
九、Linux 命令速查表(独立补充)
以下为 Linux 系统常用命令的独立速查,按功能分类整理,适合运维和开发人员日常参考。
系统信息
| 名称 |
代码 |
用例 |
| 查看系统发行版本 |
lsb_release -a |
查看 Ubuntu/K鸿蒙 系统版本与代号 |
| 查看内核版本 |
uname -r |
快速查看当前 Linux 内核版本 |
| 查看完整硬件信息 |
inxi -Fxz |
查看 CPU、内存、显卡、硬盘全套硬件参数 |
| 查看内存使用 |
free -h |
人性化显示已用/空闲内存、交换分区 |
| 查看磁盘分区占用 |
df -h |
查看各分区存储空间剩余与使用率 |
| 查看文件夹大小 |
du -sh 目录名 |
du -sh ~/Documents — 统计该目录整体大小 |
| 显示当前路径 |
pwd |
查看当前所在完整路径 |
| 查看系统运行时间 |
uptime |
查看系统已运行时间、负载情况 |
| 查看 CPU 信息 |
lscpu |
查看 CPU 架构、核心数、频率 |
软件包管理(apt)
| 名称 |
代码 |
用例 |
| 更新软件源缓存 |
sudo apt update |
同步仓库软件列表 |
| 升级所有软件 |
sudo apt upgrade -y |
一键升级已安装的所有程序与系统组件 |
| 安装软件 |
sudo apt install 软件名 |
sudo apt install nano — 安装文本编辑器 |
| 普通卸载软件 |
sudo apt remove 软件名 |
删除程序,保留用户配置文件 |
| 彻底卸载(含配置) |
sudo apt purge 软件名 |
删除软件并清空所有残留配置文件 |
| 清理无用依赖 |
sudo apt autoremove |
自动卸载多余的依赖包,释放空间 |
| 修复依赖问题 |
sudo apt -f install -y |
安装失败缺依赖时使用 |
| 安装 .deb 包 |
sudo apt install ./xxx.deb |
安装本地下载的 .deb 软件包 |
| 搜索软件包 |
apt search 关键词 |
apt search nginx — 搜索 nginx 相关包 |
| 查看软件包信息 |
apt show 包名 |
apt show nginx — 查看 nginx 包详情 |
文件与目录
| 名称 |
代码 |
用例 |
| 查找文件 |
find /路径 -name "文件名" |
find /var/log -name "*.log" — 查找所有日志文件 |
| 查看文件(分页) |
less 文件名 |
less /var/log/syslog — 分页查看大文件,按 q 退出 |
| 查看文件头部 |
head -n 行数 文件名 |
head -20 /var/log/syslog — 查看前20行 |
| 查看文件尾部 |
tail -n 行数 文件名 |
tail -f /var/log/syslog — 实时跟踪日志输出 |
| 搜索文件内容 |
grep "关键词" 文件名 |
grep "error" /var/log/syslog — 搜索 error 关键词 |
| 统计行数字数 |
wc -l 文件名 |
wc -l log.txt — 统计文件行数 |
| 创建空文件 |
touch 文件名 |
touch index.html — 创建空文件 |
| 清空日志文件 |
> 日志文件路径 |
> /mnt/nas/web/all_access.log — 清空 NAS 访问日志(⚠️ 不可恢复) |
解压与压缩
| 名称 |
代码 |
用例 |
| 解压 zip |
unzip 文件名.zip |
unzip soft.zip — 解压到当前目录 |
| 压缩 zip |
zip -r 压缩包名.zip 目录名 |
zip -r backup.zip ./docs — 压缩 docs 目录 |
| 解压 tar.gz |
tar xvf 文件名.tar.gz |
tar xvf FreeFileSync.tar.gz |
| 压缩 tar.gz |
tar cvf 压缩包名.tar.gz 目录名 |
tar cvf archive.tar.gz ./folder |
| 解压 tar |
tar xvf 文件名.tar |
tar xvf package.tar |
| 查看 tar 内容 |
tar tvf 文件名.tar.gz |
查看压缩包内文件列表,不解压 |
权限与用户
| 名称 |
代码 |
用例 |
| 文件授权(加执行权限) |
chmod +x 文件名 |
chmod +x run.sh — 让 Shell 脚本可执行 |
| 文件授权(数字模式) |
chmod 755 文件名 |
chmod 644 config.ini — 设置读写权限 |
| 更改文件所有者 |
chown 用户名:组名 文件名 |
chown www-data:www-data index.html |
| 切换管理员 |
sudo -i |
切换为 root 用户 |
| 查看当前用户 |
whoami |
查看当前登录用户名 |
| 查看登录用户 |
who |
查看所有登录用户 |
进程与服务
| 名称 |
代码 |
用例 |
| 查看进程 |
ps aux |
`ps aux |
| 树形进程 |
ps auxf |
树形结构显示进程父子关系 |
| 交互式进程管理 |
htop |
直观查看进程、CPU、内存占用(需安装) |
| 结束进程 |
kill 进程号 |
kill -9 1234 — 强制结束 PID 1234 |
| 结束进程(按名称) |
pkill 进程名 |
pkill -9 python3 — 结束所有 python3 进程 |
| 查看端口占用 |
sudo lsof -i:端口 |
sudo lsof -i:80 — 查看 80 端口占用 |
| 查看监听端口 |
ss -ntlp |
查看所有监听端口及对应进程 |
| 管理系统服务 |
systemctl 动作 服务名 |
systemctl start nginx — 启动 nginx
systemctl enable nginx — 设置开机自启 |
| 查看服务状态 |
systemctl status 服务名 |
systemctl status nginx — 查看 nginx 状态 |
| 查看系统启动日志 |
journalctl |
排查开机卡顿、服务启动失败报错 |
网络配置
| 名称 |
代码 |
用例 |
| 查看网卡 IP |
ip a |
查看内网地址、网卡运行状态 |
| 查看路由表 |
ip route |
查看网关和路由信息 |
| 测试网络连通性 |
ping 域名 |
ping www.baidu.com — 测试外网是否通畅 |
| 查看开放端口 |
ss -ntlp |
查看系统开放端口与运行服务 |
| 扫描局域网主机(需安装) |
nmap 目标 |
nmap -sn 192.168.1.0/24 — 扫描在线主机 |
日期与时间
| 名称 |
代码 |
用例 |
| 查看当前时间 |
date |
查看系统当前时间 |
| 设置时区 |
sudo timedatectl set-timezone Asia/Shanghai |
设置北京时间 |
| 开启自动对时 |
sudo timedatectl set-ntp true |
联网自动同步准确系统时间 |
| 查看时区设置 |
timedatectl |
查看时区、NTP 状态 |
杂项
| 名称 |
代码 |
用例 |
| 获取文件和路径 |
tree /F > tree.txt |
tree /F > tree.txt |
| 软链接 |
ln -sf 源文件 链接名 |
ln -sf /usr/bin/python3 /usr/bin/python |
| 查看命令位置 |
which 命令名 |
which nginx — 查看 nginx 安装路径 |
| 查看命令帮助 |
命令 --help |
ls --help — 查看 ls 命令帮助 |
| 查看手册 |
man 命令名 |
man ls — 查看 ls 完整手册 |
附录:原始 dmb.html 分类对照表
| 原 dmb.html 分类 |
本速查表对应章节 |
| 综合/DNS列表和常用命令 |
一、网络与 DNS |
| 综合/常用命令(Windows / Mac / Linux) |
二、操作系统常用命令(跨平台通用命令) |
| Windows 命令速查表 |
二、操作系统常用命令(Windows 专属命令) |
| Ubuntu & K鸿蒙 通用命令 |
二、操作系统常用命令(K鸿蒙/Ubuntu 通用命令) |
| HTML 完整速查表 |
三、HTML 完整速查表 |
| CSS 常用样式速查表 |
四、CSS 常用样式速查表 |
| JavaScript 常用典型代码 |
五、JavaScript 常用典型代码 |
| Markdown 写作速查表 |
六、Markdown 写作速查表 |
| 常用颜色代码 |
七、常用颜色代码 |
| Linux 命令速查表 |
九、Linux 命令速查表(独立补充) |
| (新增) |
八、Mermaid 流程图完整速查表 |
本速查表整合自网络配置、操作系统命令、前端开发(HTML/CSS/JS)、Markdown 写作、颜色代码、Mermaid 流程图等领域,所有示例均经过验证,可直接复制使用。