网络安全作业三


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户登录</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>body {font-family: 'Arial', sans-serif;background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;padding: 20px;}.login-container {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);width: 100%;max-width: 350px;transition: transform 0.2s ease;}.login-container:hover {transform: translateY(-3px);}.login-title {text-align: center;color: #1a73e8;margin-bottom: 1.5rem;padding-bottom: 0.8rem;border-bottom: 2px solid #1a73e8;}.form-group {margin-bottom: 1.2rem;position: relative;}label {display: block;margin-bottom: 0.5rem;color: #5f6368;}.input-wrapper {position: relative;}input {width: 100%;padding: 0.8rem 0.8rem 0.8rem 2.5rem;border: 1px solid #dadce0;border-radius: 4px;box-sizing: border-box;font-size: 1rem;transition: all 0.2s;}.input-icon {position: absolute;left: 0.8rem;top: 50%;transform: translateY(-50%);color: #86909C;}input:focus {outline: none;border-color: #1a73e8;box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);}.login-btn {width: 100%;padding: 0.8rem;background-color: #1a73e8;color: white;border: none;border-radius: 4px;font-size: 1rem;font-weight: 500;cursor: pointer;transition: background-color 0.2s;display: flex;justify-content: center;align-items: center;gap: 8px;}.login-btn:hover {background-color: #1557b0;}.login-btn.loading {background-color: #69b1ff;cursor: wait;}.spinner {display: none;width: 16px;height: 16px;border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50%;border-top-color: white;animation: spin 1s linear infinite;}@keyframes spin {to { transform: rotate(360deg); }}.login-btn.loading .spinner {display: inline-block;}.error-message {color: #d93025;text-align: center;margin: 1rem 0;padding: 0.6rem;background-color: #fff8f8;border-radius: 4px;display: none;border: 1px solid #ffebee;}.form-options {display: flex;justify-content: space-between;align-items: center;margin: 1rem 0;font-size: 0.9rem;}.remember-me {display: flex;align-items: center;gap: 5px;cursor: pointer;}.remember-me input {width: auto;padding: 0;}.forgot-link {color: #1a73e8;text-decoration: none;}.forgot-link:hover {text-decoration: underline;}</style>
</head>
<body><div class="login-container"><h2 class="login-title">账户登录</h2><form id="loginForm"><div class="form-group"><label for="username">用户名</label><div class="input-wrapper"><i class="fas fa-user input-icon"></i><input type="text" id="username" name="username" required></div></div><div class="form-group"><label for="password">密码</label><div class="input-wrapper"><i class="fas fa-lock input-icon"></i><input type="password" id="password" name="password" required></div></div><div class="form-options"><label class="remember-me"><input type="checkbox" id="rememberMe"> 记住我</label><a href="#" class="forgot-link">忘记密码?</a></div><button type="submit" class="login-btn"><span>登录</span><span class="spinner"></span></button><div class="error-message" id="errorMsg">用户名或密码错误</div></form></div><script>// 获取表单元素const loginForm = document.getElementById('loginForm');const usernameInput = document.getElementById('username');const passwordInput = document.getElementById('password');const rememberMe = document.getElementById('rememberMe');const errorMsg = document.getElementById('errorMsg');const loginBtn = document.querySelector('.login-btn');// 页面加载时检查记住的用户名document.addEventListener('DOMContentLoaded', () => {const savedUser = localStorage.getItem('savedUsername');if (savedUser) {usernameInput.value = savedUser;rememberMe.checked = true;}});// 表单提交事件loginForm.addEventListener('submit', async function(e) {e.preventDefault();const username = usernameInput.value.trim();const password = passwordInput.value.trim();// 简单验证if (!username) {showError('请输入用户名');return;}if (!password) {showError('请输入密码');return;}// 显示加载状态loginBtn.classList.add('loading');loginBtn.disabled = true;hideError();try {// 模拟网络请求延迟await new Promise(resolve => setTimeout(resolve, 800));// 验证逻辑if (username === 'admin' && password === '123456') {// 记住用户名if (rememberMe.checked) {localStorage.setItem('savedUsername', username);} else {localStorage.removeItem('savedUsername');}alert('登录成功！');// 实际应用中使用: window.location.href = '首页地址';} else {showError('用户名或密码错误');passwordInput.value = '';}} finally {// 恢复按钮状态loginBtn.classList.remove('loading');loginBtn.disabled = false;}});// 错误提示控制function showError(message) {errorMsg.textContent = message;errorMsg.style.display = 'block';// 3秒后自动隐藏setTimeout(hideError, 3000);}function hideError() {errorMsg.style.display = 'none';}// 输入框获得焦点时隐藏错误信息[usernameInput, passwordInput].forEach(input => {input.addEventListener('focus', hideError);});</script>
</body>
</html>

基础文档标签

<!DOCTYPE html>
声明文档类型为HTML5，告知浏览器使用HTML5标准解析页面，确保正确渲染新特性。
<html lang="zh-CN">
HTML文档的根元素，lang="zh-CN"指定页面主要语言为简体中文，有助于对搜索引擎优化和辅助技术（如屏幕阅读器）有重要意义。
<head>
包含页面的元数据，这些信息不直接显示在页面上，但对浏览器和搜索引擎至关重要。
<meta charset="UTF-8">
指定页面字符编码为UTF-8，支持包括中文在内的全球大多数语言字符，避免乱码问题。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
用于响应式设计，width=device-width使页面宽度与设备屏幕宽度一致，initial-scale=1.0设置初始缩放比例为1，确保移动设备上显示正常。
<title>用户登录</title>
定义页面标题，显示在浏览器标签页上，也用于书签和搜索引擎结果展示。
<link rel="stylesheet" href="...">
引入外部资源，这里用于加载Font Awesome图标库，提供表单中使用的用户图标（fa-user）和锁图标（fa-lock）。
<style>
内嵌CSS样式块，用于定义页面元素的布局、颜色、字体等视觉样式，使页面更美观。
<body>
包含页面所有可见内容，如登录表单、按钮、文本等，是用户直接交互的区域。

页面内容标签

<div class="login-container">
通用容器元素，class="login-container"用于通过CSS设置登录框的整体样式（如背景、边框、阴影等），将相关元素分组便于布局管理。
<h2 class="login-title">账户登录</h2>
二级标题标签，用于显示页面主标题，class="login-title"用于设置标题的样式（如颜色、边框等）。
<form id="loginForm">
表单容器，用于收集用户输入信息。id="loginForm"便于JavaScript通过ID获取表单元素，进而处理提交事件。
<div class="form-group">
表单分组容器，class="form-group"用于对表单中的输入项（如用户名、密码）进行分组，设置统一的间距和布局。
<label for="username">用户名</label>
表单标签，for="username"与id="username"的输入框关联，点击标签时会自动聚焦到对应的输入框，提升可用性。
<div class="input-wrapper">
输入框容器，用于包裹输入框和图标，通过CSS定位实现图标在输入框内的效果。
<i class="fas fa-user input-icon"></i>
Font Awesome图标元素，fas fa-user表示用户图标，input-icon用于设置图标在输入框内的位置样式，增强视觉引导。
<input> 输入框系列：
- type="text"：文本输入框，用于输入用户名，内容可见。
- type="password"：密码输入框，输入内容会被隐藏（显示为圆点或星号）。
- type="checkbox"：复选框，用于"记住我"功能，id="rememberMe"与对应标签关联。
- id属性：唯一标识输入框，用于关联标签和JavaScript操作。
- required属性：指定输入框为必填项，表单提交时若未填写会触发浏览器默认验证提示。
<a href="#" class="forgot-link">忘记密码?</a>
超链接元素，href="#"为临时链接占位符，class="forgot-link"设置链接样式，用于跳转至密码找回页面。
<button type="submit" class="login-btn">
提交按钮，type="submit"表示点击时会触发表单的提交事件，class="login-btn"设置按钮样式，内部包含"登录"文本和加载状态的spinner元素。
<span class="spinner"></span>
加载状态指示器，通过CSS动画实现旋转效果，登录过程中显示，提示用户操作正在处理。
<div class="error-message" id="errorMsg">
错误信息容器，id="errorMsg"用于JavaScript控制显示/隐藏，class="error-message"设置错误提示的样式（如红色文字、浅色背景）。

JavaScript相关元素

<script>
包含JavaScript代码，用于实现页面交互逻辑，如表单验证、登录状态处理、错误提示控制等。
核心JavaScript逻辑涉及的元素操作：
- 通过document.getElementById()获取表单、输入框、按钮等元素。
- 使用addEventListener('submit', ...)监听表单提交事件。
- 用e.preventDefault()阻止表单默认提交行为（避免页面刷新）。
- 通过localStorage实现"记住我"功能，保存/读取用户名。
- 控制errorMsg元素的显示/隐藏，展示不同的错误提示。
- 切换按钮的loading类，显示/隐藏加载状态。