前端学生管理系统代码示例：首页、学生列表、添加和编辑

这是一个简单的前端学生管理系统示例，包含首页、学生列表页、添加学生页和编辑学生页的代码。该示例展示了基础的前端页面结构，可作为开发类似系统的参考。

请注意，这仅仅是一个基本的示例，可以根据您的需求进行定制和扩展。

1. 首页（index.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>学生管理系统</title>
</head>
<body>
    <h1>学生管理系统</h1>
    <a href='student-list.html'>学生列表</a>
    <a href='add-student.html'>添加学生</a>
</body>
</html>

2. 学生列表页（student-list.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>学生列表</title>
</head>
<body>
    <h1>学生列表</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
            <td>
                <a href='edit-student.html?id=1'>编辑</a>
                <a href='#'>删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
            <td>
                <a href='edit-student.html?id=2'>编辑</a>
                <a href='#'>删除</a>
            </td>
        </tr>
        <!-- 其他学生数据行 -->
    </table>
</body>
</html>

3. 添加学生页（add-student.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>添加学生</title>
</head>
<body>
    <h1>添加学生</h1>
    <form>
        <label for='name'>姓名：</label>
        <input type='text' id='name' required><br><br>
        
        <label for='age'>年龄：</label>
        <input type='number' id='age' required><br><br>
        
        <input type='submit' value='添加'>
    </form>
</body>
</html>

4. 编辑学生页（edit-student.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>编辑学生</title>
</head>
<body>
    <h1>编辑学生</h1>
    <form>
        <label for='name'>姓名：</label>
        <input type='text' id='name' value='张三' required><br><br>
        
        <label for='age'>年龄：</label>
        <input type='number' id='age' value='18' required><br><br>
        
        <input type='submit' value='保存'>
    </form>
</body>
</html>

以上是一个简单的前端学生管理系统的代码示例。您可以将这些代码保存为相应的HTML文件，并在浏览器中打开以查看效果。

请注意，这仅仅是前端代码，不包括与后端交互的实现。如果需要与后端进行数据交互，您需要使用AJAX或表单提交等技术来发送和接收数据。同时，您还可以根据具体需求进行样式和功能的扩展。