網絡安全作業三


<!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類，顯示/隱藏加載狀態。