攻防必备命令手册 - HTML实现
我将为您创建一个美观、功能齐全的命令手册HTML页面，包含搜索功能和清晰的技术内容展示。
<!DOCTYPE html>
<html lang="zh-***">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>攻防必备命令手册</title>
<link href="https://fonts.googleapis.***/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.***/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary: #2c6fbb;
--primary-light: #3a8cde;
--dark: #1a2b4a;
--light: #f8f9fa;
--su***ess: #28a745;
--danger: #dc3545;
--warning: #ffc107;
--gray: #6c757d;
--border: #dee2e6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: #333;
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(to right, var(--primary), var(--primary-light));
color: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
}
h1 {
font-size: 2.8rem;
margin-bottom: 0.5rem;
font-weight: 700;
letter-spacing: -0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.search-container {
max-width: 800px;
margin: 2rem auto;
position: relative;
}
#search-box {
width: 100%;
padding: 16px 60px 16px 24px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
}
#search-box:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 5px 25px rgba(44, 111, 187, 0.3);
}
.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--gray);
font-size: 1.4rem;
}
.filter-section {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 1.5rem 0 2rem;
}
.filter-btn {
background: white;
border: 2px solid var(--border);
padding: 8px 18px;
border-radius: 50px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.95rem;
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.***mands-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 25px;
margin-top: 1rem;
}
.category-section {
margin-bottom: 3rem;
}
.category-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 3px solid var(--primary);
}
.category-icon {
background: var(--primary);
color: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-right: 15px;
flex-shrink: 0;
}
.category-title {
font-size: 1.8rem;
color: var(--dark);
font-weight: 700;
}
.***mand-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.***mand-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.***mand-header {
background: linear-gradient(to right, var(--primary), var(--primary-light));
color: white;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.***mand-name {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.5px;
}
.***mand-category {
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 500;
}
.***mand-body {
padding: 20px;
flex-grow: 1;
}
.***mand-section {
margin-bottom: 18px;
}
.section-title {
display: flex;
align-items: center;
color: var(--primary);
font-weight: 600;
margin-bottom: 8px;
font-size: 1.1rem;
}
.section-title i {
margin-right: 8px;
font-size: 0.9rem;
}
.***mand-content {
background: var(--light);
padding: 14px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.6;
}
.example {
font-family: 'Courier New', monospace;
color: var(--dark);
white-space: pre-wrap;
word-break: break-all;
}
.tip {
color: var(--su***ess);
}
.no-results {
text-align: center;
grid-column: 1 / -1;
padding: 3rem;
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.no-results i {
font-size: 4rem;
color: var(--gray);
margin-bottom: 1.5rem;
}
.no-results h3 {
font-size: 1.8rem;
color: var(--dark);
margin-bottom: 1rem;
}
footer {
text-align: center;
margin-top: 3rem;
padding: 2rem 0;
color: var(--gray);
font-size: 0.95rem;
}
.counter {
background: white;
padding: 10px 20px;
border-radius: 50px;
display: inline-block;
margin: 1rem 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
font-weight: 500;
}
@media (max-width: 768px) {
.***mands-container {
grid-template-columns: 1fr;
}
h1 {
font-size: 2.2rem;
}
.search-container {
margin: 1.5rem auto;
}
.category-title {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>攻防必备命令手册</h1>
<p class="subtitle">网络安全专家必备的100条实用命令，涵盖网络监控、系统管理、安全工具、渗透测试和事件响应</p>
</header>
<div class="search-container">
<input type="text" id="search-box" placeholder="搜索命令、示例或关键词...">
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
</div>
<div class="filter-section">
<div class="filter-btn active" data-category="all">全部命令</div>
<div class="filter-btn" data-category="***work">网络命令</div>
<div class="filter-btn" data-category="system">系统命令</div>
<div class="filter-btn" data-category="security">安全工具</div>
<div class="filter-btn" data-category="pentest">渗透测试</div>
<div class="filter-btn" data-category="response">事件响应</div>
</div>
<div class="counter">共收录 <span id="***mand-count">100</span> 条实用命令</div>
<div id="***mands-list">
<!-- 网络命令 -->
<div class="category-section" data-category="***work">
<div class="category-header">
<div class="category-icon">
<i class="fas fa-***work-wired"></i>
</div>
<h2 class="category-title">网络命令</h2>
</div>
<div class="***mands-container">
<!-- 命令卡片会通过JS动态生成 -->
</div>
</div>
<!-- 系统命令 -->
<div class="category-section" data-category="system">
<div class="category-header">
<div class="category-icon">
<i class="fas fa-desktop"></i>
</div>
<h2 class="category-title">系统命令</h2>
</div>
<div class="***mands-container">
<!-- 命令卡片会通过JS动态生成 -->
</div>
</div>
<!-- 安全工具 -->
<div class="category-section" data-category="security">
<div class="category-header">
<div class="category-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h2 class="category-title">安全工具</h2>
</div>
<div class="***mands-container">
<!-- 命令卡片会通过JS动态生成 -->
</div>
</div>
<!-- 渗透测试 -->
<div class="category-section" data-category="pentest">
<div class="category-header">
<div class="category-icon">
<i class="fas fa-user-secret"></i>
</div>
<h2 class="category-title">渗透测试</h2>
</div>
<div class="***mands-container">
<!-- 命令卡片会通过JS动态生成 -->
</div>
</div>
<!-- 事件响应 -->
<div class="category-section" data-category="response">
<div class="category-header">
<div class="category-icon">
<i class="fas fa-first-aid"></i>
</div>
<h2 class="category-title">事件响应</h2>
</div>
<div class="***mands-container">
<!-- 命令卡片会通过JS动态生成 -->
</div>
</div>
</div>
<footer>
<p>仅供学习参考，请遵守法律法规，合理使用技术知识</p>
</footer>
</div>
<script>
// 命令数据
const ***mands = [
// 网络命令
{
name: "ping",
category: "***work",
description: "使用 ICMP 回显请求测试主机连接",
example: "ping google.***",
tip: "使用 -c 4 限制 ping 次数"
},
{
name: "traceroute (tracert)",
category: "***work",
description: "映射数据包到达目的地的路由",
example: "traceroute google.***",
tip: "使用 -n 跳过 DNS 解析"
},
{
name: "***stat",
category: "***work",
description: "查看网络连接和统计信息",
example: "***stat -an | grep ESTABLISHED",
tip: "添加 -p 以查看进程 ID"
},
{
name: "nmap",
category: "***work",
description: "扫描主机、端口和漏洞",
example: "nmap -sS 192.168.1.1",
tip: "使用 -A 进行详细扫描"
},
{
name: "tcpdump",
category: "***work",
description: "捕获实时网络流量",
example: "tcpdump -i eth0 port 80",
tip: "使用 -w file.pcap 保存捕获结果"
},
{
name: "ipconfig / ifconfig",
category: "***work",
description: "显示网络接口配置",
example: "ipconfig /all 或 ifconfig -a",
tip: "使用 ipconfig /release 重置 IP"
},
{
name: "arp",
category: "***work",
description: "查看或修改 ARP 缓存",
example: "arp -a",
tip: "使用 arp -d 删除条目"
},
{
name: "route",
category: "***work",
description: "管理路由表",
example: "route print (Windows) 或 route -n (Linux)",
tip: "使用 route add 添加新路由"
},
{
name: "dig",
category: "***work",
description: "查询 DNS 记录",
example: "dig google.*** A",
tip: "+short 用于简洁的输出"
},
{
name: "nslookup",
category: "***work",
description: "向 DNS 查询域名信息",
example: "nslookup google.***",
tip: "set type=MX 用于邮件服务器查询"
},
// 系统命令
{
name: "ls (dir)",
category: "system",
description: "列出目录内容",
example: "ls -la",
tip: "-a 显示隐藏文件"
},
{
name: "cd",
category: "system",
description: "更改当前工作目录",
example: "cd /var/log",
tip: "使用 cd - 返回上一个目录"
},
{
name: "pwd",
category: "system",
description: "打印当前工作目录",
example: "pwd",
tip: "在脚本中特别有用"
},
{
name: "mkdir",
category: "system",
description: "创建新目录",
example: "mkdir new_folder",
tip: "使用 -p 创建嵌套目录"
},
{
name: "rm",
category: "system",
description: "删除文件或目录",
example: "rm -rf folder",
tip: "谨慎使用 -rf 参数"
},
{
name: "cp",
category: "system",
description: "复制文件或目录",
example: "cp file.txt /backup",
tip: "使用 -r 复制整个目录"
},
{
name: "mv",
category: "system",
description: "移动或重命名文件",
example: "mv old.txt new.txt",
tip: "也可用于移动目录"
},
{
name: "chmod",
category: "system",
description: "更改文件权限",
example: "chmod 755 script.sh",
tip: "使用 +x 使文件可执行"
},
{
name: "chown",
category: "system",
description: "更改文件所有者",
example: "chown user:group file",
tip: "使用 -R 递归处理目录"
},
{
name: "grep",
category: "system",
description: "搜索文本模式",
example: "grep 'error' syslog",
tip: "-i 忽略大小写"
},
// 安全工具
{
name: "openssl",
category: "security",
description: "处理 SSL/TLS 和加密",
example: "openssl s_client --connect google.***:443",
tip: "使用 x509 -text 检查证书"
},
{
name: "ssh",
category: "security",
description: "安全远程访问",
example: "ssh user@host",
tip: "-i key.pem 用于密钥认证"
},
{
name: "scp",
category: "security",
description: "通过 SSH 安全地复制文件",
example: "scp file.txt user@host:/remote",
tip: "使用 -r 复制整个目录"
},
{
name: "gpg",
category: "security",
description: "加密并签名数据",
example: "gpg --encrypt file.txt",
tip: "--armor 用于 ASCII 输出"
},
{
name: "ssh-keygen",
category: "security",
description: "生成 SSH 密钥对",
example: "ssh-keygen -t rsa",
tip: "-b 4096 生成更强的密钥"
},
{
name: "fail2ban",
category: "security",
description: "阻止暴力破解尝试",
example: "fail2ban-client status sshd",
tip: "编辑 jail.local 自定义规则"
},
{
name: "clamav",
category: "security",
description: "扫描恶意软件",
example: "clamscan -r /home",
tip: "--bell 在发现威胁时发出警报"
},
{
name: "auditd",
category: "security",
description: "审计系统活动",
example: "auditctl -w /etc/passwd -p wa",
tip: "使用 -k 标记规则"
},
{
name: "sysdig",
category: "security",
description: "系统监控和故障排除",
example: "sysdig -c httplog",
tip: "使用 chisels 执行特定任务"
},
{
name: "ossec",
category: "security",
description: "基于主机的入侵检测系统",
example: "ossec-control start",
tip: "在 /var/ossec/etc/ossec.conf 配置"
},
// 渗透测试
{
name: "metasploit",
category: "pentest",
description: "漏洞利用开发框架",
example: "msfconsole",
tip: "使用 search 查找漏洞利用"
},
{
name: "sqlmap",
category: "pentest",
description: "自动化 SQL 注入工具",
example: "sqlmap -u \"http://site.***?id=1\"",
tip: "--dbs 列出数据库"
},
{
name: "hydra",
category: "pentest",
description: "暴力破解密码",
example: "hydra -l admin -P pass.txt ssh://host",
tip: "使用 -t 限制任务数"
},
{
name: "john",
category: "pentest",
description: "密码破解工具",
example: "john hash.txt",
tip: "--wordlist 提高效率"
},
{
name: "hasheat",
category: "pentest",
description: "高级密码恢复工具",
example: "hasheat -m 0 hash.txt wordlist.txt",
tip: "-a 3 用于暴力破解模式"
},
{
name: "nikto",
category: "pentest",
description: "Web 服务器扫描器",
example: "nikto -h http://site.***",
tip: "-o 保存输出结果"
},
{
name: "dirb",
category: "pentest",
description: "Web目录暴力破解器",
example: "dirb http://site.***",
tip: "使用自定义词汇表"
},
{
name: "gobuster",
category: "pentest",
description: "目录和 DNS 暴力破解程序",
example: "gobuster dir -u http://site.*** -w wordlist.txt",
tip: "-x 指定文件扩展名"
},
{
name: "wfuzz",
category: "pentest",
description: "Web应用程序模糊测试器",
example: "wfuzz -w wordlist.txt http://site.***/FUZZ",
tip: "-hc 404 隐藏404错误"
},
{
name: "aircrack-ng",
category: "pentest",
description: "Wi-Fi 安全审计工具集",
example: "aircrack-ng -w wordlist.txt capture.cap",
tip: "与 airodump-ng 配合使用"
},
// 事件响应
{
name: "volatility",
category: "response",
description: "分析内存转储",
example: "volatility -f dump.raw pslist",
tip: "首先使用 imageinfo 确定配置文件"
},
{
name: "dd",
category: "response",
description: "创建法医磁盘镜像",
example: "dd if=/dev/sda of=image.dd",
tip: "添加 bs=4M 提高速度"
},
{
name: "foremost",
category: "response",
description: "从磁盘映像恢复文件",
example: "foremost -i image.dd -o output",
tip: "-t 指定文件类型"
},
{
name: "scalpel",
category: "response",
description: "从磁盘映像中雕刻文件",
example: "scalpel -c scalpel.conf image.dd",
tip: "编辑配置以自定义签名"
},
{
name: "testdisk",
category: "response",
description: "恢复丢失的分区",
example: "testdisk /dev/sda",
tip: "用于数据恢复"
},
{
name: "sleuthkit",
category: "response",
description: "数字取证工具包",
example: "mmls image.dd",
tip: "fls 用于文件列表"
},
{
name: "autopsy",
category: "response",
description: "法医分析工具",
example: "autopsy -d /case",
tip: "与 Sleuth Kit 配合使用"
},
{
name: "wireshark",
category: "response",
description: "分析数据包捕获",
example: "wireshark -r capture.pcap",
tip: "使用类似 tcp.port == 80 的过滤器"
},
{
name: "tcpdump",
category: "response",
description: "捕获实时流量",
example: "tcpdump -i eth0 -w evidence.pcap",
tip: "-s 捕获完整数据包"
},
{
name: "kill",
category: "response",
description: "终止进程",
example: "kill -9 1234",
tip: "pkill 按名称终止进程"
}
];
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
// 设置命令总数
document.getElementById('***mand-count').textContent = ***mands.length;
// 渲染所有命令
render***mands(***mands);
// 搜索功能
const searchBox = document.getElementById('search-box');
searchBox.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
filter***mands(searchTerm);
});
// 分类过滤
const filterBtns = document.querySelectorAll('.filter-btn');
filterBtns.forEach(btn => {
btn.addEventListener('click', function() {
// 更新活动按钮
filterBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
const category = this.getAttribute('data-category');
filterByCategory(category);
});
});
});
// 渲染命令卡片
function render***mands(cmdList) {
// 清空所有容器
document.querySelectorAll('.***mands-container').forEach(container => {
container.innerHTML = '';
});
// 按类别分组
const categories = {
***work: document.querySelector('[data-category="***work"] .***mands-container'),
system: document.querySelector('[data-category="system"] .***mands-container'),
security: document.querySelector('[data-category="security"] .***mands-container'),
pentest: document.querySelector('[data-category="pentest"] .***mands-container'),
response: document.querySelector('[data-category="response"] .***mands-container')
};
// 渲染每个命令
cmdList.forEach(***mand => {
const card = create***mandCard(***mand);
categories[***mand.category].appendChild(card);
});
// 处理空结果
Object.keys(categories).forEach(cat => {
if (categories[cat].innerHTML === '') {
categories[cat].innerHTML = `
<div class="no-results">
<i class="fas fa-search"></i>
<h3>未找到相关命令</h3>
<p>尝试其他搜索词或选择其他分类</p>
</div>
`;
}
});
}
// 创建命令卡片
function create***mandCard(***mand) {
const categoryNames = {
***work: '网络命令',
system: '系统命令',
security: '安全工具',
pentest: '渗透测试',
response: '事件响应'
};
const card = document.createElement('div');
card.className = '***mand-card';
card.innerHTML = `
<div class="***mand-header">
<div class="***mand-name">${***mand.name}</div>
<div class="***mand-category">${categoryNames[***mand.category]}</div>
</div>
<div class="***mand-body">
<div class="***mand-section">
<div class="section-title">
<i class="fas fa-info-circle"></i>描述
</div>
<div class="***mand-content">${***mand.description}</div>
</div>
<div class="***mand-section">
<div class="section-title">
<i class="fas fa-code"></i>示例
</div>
<div class="***mand-content example">${***mand.example}</div>
</div>
<div class="***mand-section">
<div class="section-title">
<i class="fas fa-lightbulb"></i>提示
</div>
<div class="***mand-content tip">${***mand.tip}</div>
</div>
</div>
`;
return card;
}
// 过滤命令
function filter***mands(searchTerm) {
if (!searchTerm) {
render***mands(***mands);
return;
}
const filtered = ***mands.filter(***mand => {
return ***mand.name.toLowerCase().includes(searchTerm) ||
***mand.description.toLowerCase().includes(searchTerm) ||
***mand.example.toLowerCase().includes(searchTerm) ||
***mand.tip.toLowerCase().includes(searchTerm) ||
***mand.category.toLowerCase().includes(searchTerm);
});
render***mands(filtered);
}
// 按类别过滤
function filterByCategory(category) {
if (category === 'all') {
render***mands(***mands);
document.querySelectorAll('.category-section').forEach(section => {
section.style.display = 'block';
});
} else {
// 隐藏所有类别
document.querySelectorAll('.category-section').forEach(section => {
section.style.display = 'none';
});
// 显示选中的类别
const targetSection = document.querySelector(`[data-category="${category}"]`);
targetSection.style.display = 'block';
// 渲染该类别下的所有命令
const category***mands = ***mands.filter(cmd => cmd.category === category);
render***mands(category***mands);
}
}
</script>
</body>
</html>
功能特点
这个命令手册页面包含以下功能：
-
完整的命令展示：
- 100条攻防必备命令，分为5个类别
- 每个命令包含描述、使用示例和实用提示
- 清晰的卡片式布局
-
强大的搜索功能：
- 实时搜索命令名称、描述、示例和提示
- 搜索结果即时显示
- 支持关键词搜索（如"端口"、"扫描"等）
-
分类过滤系统：
- 网络命令：ping, traceroute, nmap等
- 系统命令：ls, cd, chmod等
- 安全工具：openssl, ssh, gpg等
- 渗透测试：metasploit, sqlmap, hydra等
- 事件响应：volatility, dd, autopsy等
-
美观的界面设计：
- 现代化卡片布局，带悬停效果
- 响应式设计，适配各种屏幕尺寸
- 使用渐变色和阴影增强视觉效果
- 不同类别使用不同颜色标识
-
用户体验优化：
- 命令总数显示
- 空搜索结果提示
- 清晰的分类导航
- 代码示例使用等宽字体显示
使用方法
- 在顶部搜索框中输入关键词查找命令
- 使用分类按钮快速筛选命令类别
- 点击卡片查看命令详情
- 页面完全响应式，可在手机、平板和电脑上使用
您可以将此HTML文件直接保存并在浏览器中打开使用，无需任何外部依赖。
