练习三：熟知前端知识
一、题目要求
使用 Trae 内嵌 AI 生成一个简单的 html 登录网页并熟知代码含义
二、实验
TRAE 官网下载：TRAE - The Real AI Engineer
1.HTML
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- HTML根元素，lang属性指定页面语言为简体中文 -->
<head> <!-- 头部区域，包含文档元数据 --><meta charset="UTF-8"> <!-- 指定字符编码为UTF-8，支持中文等多语言 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，确保移动端正确显示 --><title>登录页面</title> <!-- 网页标题，显示在浏览器标签栏 --><link rel="stylesheet" href="style.css"> <!-- 引入外部CSS样式表 -->
</head>
<body> <!-- 页面主体内容区域 --><div class="login-container"> <!-- 登录容器，用于居中布局和样式控制 --><h2>用户登录</h2> <!-- 登录表单标题 --><form id="login-form"> <!-- 登录表单，id用于JavaScript选择 --><div class="form-group"> <!-- 表单组，用于包裹标签和输入框 --><label for="username">用户名</label> <!-- 用户名标签，for属性关联输入框 --><input type="text" id="username" name="username" required> <!-- 用户名输入框，required表示必填 --></div><div class="form-group"> <!-- 密码输入组 --><label for="password">密码</label> <!-- 密码标签 --><input type="password" id="password" name="password" required> <!-- 密码输入框，type=password会隐藏输入内容 --></div><button type="submit" class="login-btn">登录</button> <!-- 提交按钮，type=submit触发表单提交 --><div class="form-footer"> <!-- 表单底部区域，包含辅助链接 --><a href="#">忘记密码?</a> <!-- 忘记密码链接 --><a href="#">注册账号</a> <!-- 注册账号链接 --></div></form></div>
</body>
</html> <!-- HTML文档结束 -->2. CSS
/* 通用选择器：重置所有元素的默认样式 */
* {margin: 0; /* 清除默认外边距 */padding: 0; /* 清除默认内边距 */box-sizing: border-box; /* 盒模型设置为border-box，宽度包含边框和内边距 */font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置全局字体 */
}/* body选择器：设置页面主体样式 */
body {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 背景使用紫色渐变 */min-height: 100vh; /* 最小高度为视口高度，确保背景铺满整个屏幕 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中对齐子元素 */align-items: center; /* 垂直居中对齐子元素 */
}/* 登录容器样式 */
.login-container {background: white; /* 白色背景 */padding: 2.5rem 2rem; /* 内边距：上下2.5rem，左右2rem */border-radius: 10px; /* 圆角边框，值越大角越圆 */box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 添加阴影效果：x偏移0，y偏移8px，模糊24px，透明度0.15 */width: 100%; /* 宽度占父容器100% */max-width: 400px; /* 最大宽度限制为400px，实现响应式效果 */
}