HTML模拟网络钓鱼教育页面

最新推荐文章于 2025-07-05 11:58:46 发布

bat_and_vbs

最新推荐文章于 2025-07-05 11:58:46 发布

阅读量118

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 网络前端网络安全安全

本文链接：https://blog.youkuaiyun.com/bat_and_vbs/article/details/149113211

html 专栏收录该内容

23 篇文章

订阅专栏

模拟网络钓鱼教育页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全教育 - 识别钓鱼网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .warning-banner {
            background-color: #ffeb3b;
            padding: 15px;
            border-left: 5px solid #ffc107;
            margin-bottom: 20px;
        }
        .phishing-example {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 30px;
            position: relative;
        }
        .phishing-example::after {
            content: "此为模拟示例 - 非真实网站";
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: red;
            color: white;
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 3px;
        }
        .red-flags {
            background-color: #ffebee;
            padding: 15px;
            border-left: 5px solid #f44336;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            margin-top: 10px;
        }
        .reveal {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f5e9;
        }
    </style>
</head>
<body>
    <h1>网络安全教育</h1>
    <h2>如何识别钓鱼网站</h2>
    
    <div class="warning-banner">
        <strong>注意：</strong> 此页面仅用于教育目的，展示网络钓鱼网站的常见特征，帮助您识别真实世界中的诈骗企图。
    </div>
    
    <h3>模拟钓鱼网站示例</h3>
    
    <div class="phishing-example">
        <h4 style="color: #1565c0;">您的账户存在异常</h4>
        <p>尊敬的用户：</p>
        <p>我们检测到您的账户存在异常登录活动。为保护您的账户安全，请立即验证您的身份信息。</p>
        <p><a href="#" style="color: #1565c0;">点击此处立即验证</a></p>
        <p>如不验证，您的账户将在24小时后被冻结。</p>
        
        <button onclick="document.getElementById('phishing-analysis').style.display='block'">分析此邮件的问题</button>
        
        <div id="phishing-analysis" class="reveal">
            <h4>这封"邮件"中的危险信号：</h4>
            <ul class="red-flags">
                <li>制造紧迫感 - "立即"、"24小时后"等字眼</li>
                <li>要求点击链接验证信息</li>
                <li>模仿正规公司的语气和样式</li>
                <li>没有具体的账户信息或个性化内容</li>
            </ul>
            <p><strong>正确做法：</strong> 不要点击邮件中的链接，而是直接访问官方网站或拨打官方客服电话确认。</p>
        </div>
    </div>
    
    <h3>如何保护自己</h3>
    <ul>
        <li>永远不要通过邮件或短信中的链接输入敏感信息</li>
        <li>检查网址是否正确 - 钓鱼网站常使用相似的域名</li>
        <li>注意拼写和语法错误 - 正规公司很少会有这类错误</li>
        <li>启用双重身份验证</li>
        <li>定期更改密码</li>
    </ul>
    
    <script>
        // 此页面仅用于教育目的，不收集任何数据
        console.log("此页面仅用于网络安全教育目的");
    </script>
</body>
</html>