网络安全初级（前端页面的编写分析）

源代码

index.html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 登录页面的容器 -->
    <div class="login-container">
        <!-- 页面标题 -->
        <h2>登录</h2>
        <!-- 表单元素，用于用户输入 -->
        <form id="loginForm">
            <!-- 用户名输入框 -->
            <div class="input-group">
                <label for="username">用户名:</label>
                <!-- 输入框必须填写 -->
                <input type="text" id="username" name="username" required>
            </div>
            <!-- 密码输入框 -->
            <div class="input-group">
                <label for="password">密码:</label>
                <!-- 输入框必须填写 -->
                <input type="password" id="password" name="password" required>
            </div>
            <!-- 提交按钮 -->
            <button type="submit">登录</button>
        </form>
        <!-- 显示验证信息的容器 -->
        <div id="message"></div>
    </div>
    <!-- 引入外部JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

styles.css

复制代码

/* 整体页面样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* 登录页面容器样式 */
.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

/* 标题样式 */
h2 {
    margin-bottom: 20px;
}

/* 输入框组样式 */
.input-group {
    margin-bottom: 15px;
    text-align: left;
}

/* 标签样式 */
label {
    display: block;
    margin-bottom: 5px;
}

/* 输入框样式 */
input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 按钮样式 */
button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 按钮悬停样式 */
button:hover {
    background-color: #0056b3;
}

/* 验证信息显示样式 */
#message {
    margin-top: 15px;
    color: red;
}

script.js

复制代码

// 为表单添加提交事件监听器
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为，防止页面刷新
    
    // 获取用户名和密码输入框的值
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var messageDiv = document.getElementById('message');
    
    // 简单的验证逻辑
    if (username === '' || password === '') {
        // 如果用户名或密码为空，显示错误信息
        messageDiv.textContent = '用户名和密码不能为空';
    } else if (username === 'admin' && password === 'password') {
        // 如果用户名和密码匹配预定义值，显示成功信息
        messageDiv.style.color = 'green';
        messageDiv.textContent = '登录成功';
        // 这里可以添加登录成功后的逻辑，比如重定向到其他页面
        // window.location.href = 'dashboard.html';
    } else {
        // 如果用户名或密码不匹配，显示错误信息
        messageDiv.textContent = '用户名或密码错误';
    }
});

效果图

分析

1. index.html

此为网页的 HTML 结构，它定义了页面的基本内容与布局。

元数据与标题 ：借助 <meta> 标签设定字符编码与视口，页面标题为 "登录页面"。
样式引入 ：通过 <link> 标签引入外部 CSS 文件 styles.css，用于页面样式的美化。
登录表单 ：构建了一个包含用户名和密码输入框的表单，二者均为必填项。表单的 id 为 loginForm，方便后续 JavaScript 操作。
消息显示区域 ：利用 <div id="message"> 来显示登录验证的结果信息。
脚本引入 ：通过 <script> 标签引入外部 JavaScript 文件 script.js，以实现表单提交的交互逻辑。

2. styles.css

为页面提供样式，确保页面具有良好的视觉效果。

整体页面样式 ：将页面背景颜色设为 #f4f4f9，使用 flexbox 布局让登录容器居中显示。
登录容器样式：设置登录容器的背景颜色为白色，添加圆角和阴影效果，宽度为 300px。
输入框与按钮样式：为输入框和按钮添加了边框、圆角和内边距，按钮悬停时背景颜色会发生变化。
验证信息样式：验证信息默认显示为红色。

3. script.js

实现了表单提交的交互逻辑，包含输入验证和登录结果显示。

事件监听 ：为表单添加 submit 事件监听器，阻止表单的默认提交行为，避免页面刷新。
输入验证 ：获取用户名和密码输入框的值，进行简单的验证。若用户名或密码为空，显示错误信息；若用户名和密码匹配预定义值（admin 和 password），显示成功信息；否则，显示错误信息。
登录成功逻辑 ：在登录成功时，可添加重定向到其他页面的逻辑，如 window.location.href = 'dashboard.html';。