回顧web前端的代碼
<!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;background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.login-container {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 350px;}.login-title {text-align: center;color: #1a73e8;margin-bottom: 1.5rem;}.form-group {margin-bottom: 1rem;}label {display: block;margin-bottom: 0.5rem;color: #5f6368;}input {width: 100%;padding: 0.8rem;border: 1px solid #dadce0;border-radius: 4px;box-sizing: border-box;font-size: 1rem;}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.3s;}.login-btn:hover {background-color: #1557b0;}.error-message {color: #d93025;text-align: center;margin-top: 1rem;display: none;}</style>
</head>
<body><div class="login-container"><h2 class="login-title">賬戶登錄</h2><form id="loginForm"><div class="form-group"><label for="username">用戶名</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">密碼</label><input type="password" id="password" name="password" required></div><button type="submit" class="login-btn">登錄</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 errorMsg = document.getElementById('errorMsg');// 為表單添加提交事件監聽loginForm.addEventListener('submit', function(e) {// 阻止表單默認提交行為e.preventDefault();// 獲取輸入的用戶名和密碼const username = usernameInput.value.trim();const password = passwordInput.value.trim();// 簡單的驗證邏輯（實際項目中會發送到后端驗證）if (username === 'admin' && password === '123456') {// 登錄成功，跳轉到首頁或其他頁面alert('登錄成功！');// 實際應用中可以使用 window.location.href = '首頁地址';} else {// 登錄失敗，顯示錯誤信息errorMsg.style.display = 'block';// 3秒后隱藏錯誤信息setTimeout(() => {errorMsg.style.display = 'none';}, 3000);}});</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">：用于響應式設計，確保在移動設備上正確顯示頁面。<title>：定義頁面標題，顯示在瀏覽器標簽頁上。<style>：包含 CSS 樣式代碼，用于美化頁面元素。
<body>：包含頁面的所有可見內容。<div>：通用容器元素，用于分組其他 HTML 元素，便于樣式設計和布局。這里的login-container類用于包裹整個登錄表單。<h2>：二級標題標簽，用于顯示 "賬戶登錄" 這樣的標題文字。<form id="loginForm">：表單元素，用于收集用戶輸入。id屬性用于在 JavaScript 中獲取該元素。<label for="username">：標簽元素，與表單控件關聯。for屬性的值與對應輸入框的id一致，點擊標簽會聚焦到對應的輸入框。<input>：輸入框元素，用于接收用戶輸入：type="text"：文本輸入框，用于輸入用戶名。type="password"：密碼輸入框，輸入的內容會被隱藏（顯示為圓點或星號）。id屬性：唯一標識該輸入框，用于與 label 關聯和 JavaScript 操作。name屬性：表單提交時的參數名。required屬性：表示該字段為必填項，提交表單時如果未填寫會提示用戶。
<button type="submit">：提交按鈕，點擊會觸發表單的提交事件。type="submit"表示這是一個提交按鈕。<script>：包含 JavaScript 代碼，用于實現交互邏輯，這里處理表單提交事件和登錄驗證。
JavaScript 部分說明：
- 通過
document.getElementById()獲取表單和輸入框元素。 - 使用
addEventListener('submit', ...)為表單添加提交事件監聽。 e.preventDefault()阻止表單默認的提交行為（避免頁面刷新）。- 簡單的登錄驗證邏輯：當用戶名是 "admin" 且密碼是 "123456" 時提示登錄成功，否則顯示錯誤信息。
- 錯誤信息會在 3 秒后自動隱藏（通過
setTimeout實現）。
