基于h5的学生信息管理系统的前端页面代码
时间: 2023-09-08 19:16:45 浏览: 58
这里是一个基于 HTML5 的学生信息管理系统的前端页面示例代码。由于这只是前端页面,所以其中的数据都是静态的,没有任何交互和后端处理:
```
<!DOCTYPE html>
<html>
<head>
<title>学生信息管理系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>学生信息管理系统</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">添加学生</a></li>
<li><a href="#">查看学生</a></li>
<li><a href="#">修改学生</a></li>
<li><a href="#">删除学生</a></li>
</ul>
</nav>
<main>
<h2>欢迎使用学生信息管理系统</h2>
<p>在这里,您可以轻松地管理学生的基本信息。</p>
<section>
<h3>添加学生</h3>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">女</label><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="1" max="100" required><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major" required><br>
<input type="submit" value="添加">
<input type="reset" value="重置">
</form>
</section>
<section>
<h3>查看学生</h3>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>计算机科学与技术</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td>软件工程</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td>信息工程</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3>修改学生</h3>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">女</label><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="1" max="100" required><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major" required><br>
<input type="submit" value="修改">
<input type="reset" value="重置">
</form>
</section>
<section>
<h3>删除学生</h3>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<input type="submit" value="删除">
<input type="reset" value="重置">
</form>
</section>
</main>
<footer>
<p>© 2021 学生信息管理系统</p>
</footer>
</body>
</html>
```
以上代码包含了一个简单的前端页面,包括导航栏、表单和表格等。您可以通过更改 CSS 样式和 JavaScript 代码,使其更加美观和交互性更强。