index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统主页</title>
</head>
<body>
<h3>系统主页</h3>
<a href="./register.html" target="_blank">注册</a>
<a href="./login.html" target="_blank">登录</a>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员登录页面</title>
</head>
<body>
<h3>会员登录页面</h3>
<hr>
<form method="get" action="index.html">
<table width="500" border="1" cellpadding="10" align="center">
<tr align="center">
<td colspan="2">OPENEDU会员登录</td>
</tr>
<tr>
<td align="right"><label for="zhanghao">账号：</label></td>
<!--
input 标签，没有width属性
所以修饰宽度、高度的时候，需要使用css样式
-->
<td><input type="text"
style="width:330px;height:30px;"
id="zhanghao" placeholder="请输入账号"/></td>
</tr>
<tr>
<td align="right"><label for="mima">密码：</label></td>
<td><input type="password"
style="width:330px;height:30px;"
id="mima" placeholder="请输入密码"/></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="reset" value="清空"/>
<input type="submit" value="登录"/>
</td>
</tr>
</table>
</form>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新用户注册页面</title>
</head>
<body>
<h3>新用户注册页面</h3>
<form action="login.html" method="post" target="_blank">
<label for="username">账号：</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">确认密码：</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
<label for="nickname">昵称：</label>
<input type="text" id="nickname" name="nickname"><br><br>
<input type="submit" value="注册">
</form>
</body>
</html>
实验效果
屏幕截图 2025-01-16 002417.png
屏幕截图 2025-01-16 003119.png
屏幕截图 2025-01-16 002449.png
