当前位置：首页 > web >正文

网络安全基础作业三

web 2025/7/23 7:54:04

回顾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 代码，用于实现交互逻辑，这里处理表单提交事件和登录验证。