<!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>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}body {background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;min-height: 100vh;}.login-container {background-color: white;padding: 2rem 3rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;}h1 {text-align: center;color: #1a73e8;margin-bottom: 2rem;font-size: 24px;}.form-group {margin-bottom: 1.5rem;}label {display: block;margin-bottom: 0.5rem;color: #5f6368;font-size: 14px;}input {width: 100%;padding: 12px;border: 1px solid #dadce0;border-radius: 4px;font-size: 16px;}input:focus {outline: none;border-color: #1a73e8;box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);}button {width: 100%;padding: 12px;background-color: #1a73e8;color: white;border: none;border-radius: 4px;font-size: 16px;font-weight: 500;cursor: pointer;transition: background-color 0.2s;}button:hover {background-color: #1557b0;}.error-message {color: #d93025;font-size: 13px;margin-top: 5px;display: none;}</style>
</head>
<body><div class="login-container"><h1>賬戶登錄</h1><form id="loginForm"><div class="form-group"><label for="username">用戶名</label><input type="text" id="username" name="username" required><div class="error-message" id="usernameError">請輸入用戶名</div></div><div class="form-group"><label for="password">密碼</label><input type="password" id="password" name="password" required><div class="error-message" id="passwordError">請輸入密碼</div></div><button type="submit">登錄</button></form></div><script>document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();let isValid = true;const username = document.getElementById('username').value.trim();const password = document.getElementById('password').value.trim();const usernameError = document.getElementById('usernameError');const passwordError = document.getElementById('passwordError');// 重置錯誤消息usernameError.style.display = 'none';passwordError.style.display = 'none';// 驗證用戶名if (!username) {usernameError.textContent = '請輸入用戶名';usernameError.style.display = 'block';isValid = false;}// 驗證密碼if (!password) {passwordError.textContent = '請輸入密碼';passwordError.style.display = 'block';isValid = false;} else if (password.length < 6) {passwordError.textContent = '密碼長度不能少于6個字符';passwordError.style.display = 'block';isValid = false;}// 如果驗證通過，可以在這里添加登錄邏輯if (isValid) {alert('登錄成功！\n用戶名: ' + username);// 實際應用中，這里會發送登錄請求到服務器// fetch('/api/login', { method: 'POST', body: JSON.stringify({username, password}) })}});</script>
</body>
</html>代碼標簽的作用
<!DOCTYPE html
聲明文檔類型為 HTML5，告訴瀏覽器告訴瀏覽器使用 HTML5 標準解析頁面。<html>
HTML 文檔的根標簽，所有其他標簽都嵌套在其中。lang="zh-CN"屬性指定頁面主要語言為簡體中文，有助于搜索引擎和輔助工具理解內容。<head>
包含頁面的元數據（不直接顯示在頁面上的信息），如字符集、標題、樣式等。<meta>charset="UTF-8"：指定頁面字符編碼為 UTF-8，支持中文等多語言顯示。name="viewport" content="width=device-width, initial-scale=1.0"：設置響應式視圖，確保頁面在移動設備上正確縮放。
<title>
定義頁面標題，顯示在瀏覽器標簽頁上，也用于搜索引擎索引。<style>
包含 CSS 樣式代碼，用于控制頁面元素的布局和外觀（如顏色、大小、間距等）。<body>
包含頁面的所有可見內容，如文本、圖片、表單等。<div>
通用容器標簽，用于分組其他元素，便于通過 CSS 統一樣式或通過 JavaScript 操作。例如.login-container用于包裹整個登錄表單。<h1>
一級標題標簽，用于顯示頁面的主要標題（此處為 “賬戶登錄”），具有語義化含義，也影響搜索引擎排名。<form>
表單標簽，用于創建用戶輸入表單。id="loginForm"用于通過 JavaScript 獲取表單并綁定提交事件。<label>
為表單元素定義標簽，點擊標簽會聚焦到對應的輸入框（通過for屬性與輸入框的id關聯），提升用戶體驗。<input>
輸入框標簽，用于收集用戶輸入：type="text"：文本輸入框（用戶名）。type="password"：密碼輸入框（輸入內容會被隱藏）。required：指定該字段為必填項，瀏覽器會自動驗證。
<button>
按鈕標簽，type="submit"表示點擊后提交表單。<script>
包含 JavaScript 代碼，用于實現交互邏輯（如表單驗證、提交處理等）。
?該頁面由三部分組成：
- HTML：構建頁面的基本結構和內容
- CSS：負責頁面的樣式和布局設計
- JavaScript：實現表單驗證和提交邏輯
?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樣式 -->
</head>
<body><!-- 登錄表單容器 --><div class="login-container"><h1>賬戶登錄</h1><form id="loginForm"><!-- 用戶名輸入區域 --><div class="form-group"><label for="username">用戶名</label><input type="text" id="username" name="username" required><div class="error-message" id="usernameError">請輸入用戶名</div></div><!-- 密碼輸入區域 --><div class="form-group"><label for="password">密碼</label><input type="password" id="password" name="password" required><div class="error-message" id="passwordError">請輸入密碼</div></div><button type="submit">登錄</button></form></div><!-- 引入JavaScript腳本 -->
</body>
</html>- 使用
<form>標簽創建了一個登錄表單，ID 為loginForm - 包含兩個輸入字段：用戶名（
text類型）和密碼（password類型） - 每個輸入字段都有對應的錯誤提示區域（
error-message類） - 使用
required屬性進行基本的表單驗證
?CSS 部分
基礎樣式重置
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;
}頁面布局
body {background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;min-height: 100vh;
}登錄容器樣式
.login-container {background-color: white;padding: 2rem 3rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;
}?JavaScript 部分
document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault(); // 阻止表單默認提交行為let isValid = true;// 獲取表單值和錯誤消息元素const username = document.getElementById('username').value.trim();const password = document.getElementById('password').value.trim();const usernameError = document.getElementById('usernameError');const passwordError = document.getElementById('passwordError');// 重置錯誤消息usernameError.style.display = 'none';passwordError.style.display = 'none';// 驗證用戶名if (!username) {usernameError.textContent = '請輸入用戶名';usernameError.style.display = 'block';isValid = false;}// 驗證密碼if (!password) {passwordError.textContent = '請輸入密碼';passwordError.style.display = 'block';isValid = false;} else if (password.length < 6) {passwordError.textContent = '密碼長度不能少于6個字符';passwordError.style.display = 'block';isValid = false;}// 如果驗證通過，執行登錄邏輯if (isValid) {alert('登錄成功！\n用戶名: ' + username);// 實際應用中，這里會發送登錄請求到服務器// fetch('/api/login', { method: 'POST', body: JSON.stringify({username, password}) })}
});驗證邏輯說明：
- 阻止表單默認提交行為，使用自定義驗證
- 檢查用戶名是否為空
- 檢查密碼是否為空以及長度是否不少于 6 個字符
- 驗證失敗時顯示相應的錯誤消息
- 驗證通過時彈出登錄成功提示（實際應用中會發送登錄請求到服務器）
?
 128. 最長連續序列 （哈希表）)
)