网络安全基础作业三

回顾web前端的代码

     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; }  
 
账户登录
  
 用户名  
 
 密码  
 登录 
用户名或密码错误
  
  // 获取表单元素 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); } }); 

各标签含义解释：

1. ：声明文档类型为 HTML5，告诉浏览器使用 HTML5 标准解析页面。

2. ：HTML 文档的根元素，lang=\"zh-CN\"表示页面主要语言为简体中文。

3. ：包含文档的元数据（不直接显示在页面上的信息）。

   • ：指定页面字符编码为 UTF-8，支持中文等多种字符。
   • ：用于响应式设计，确保在移动设备上正确显示页面。