<!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}) })}
});

验证逻辑说明：