综合案例

案例1-学生信息管理

表单

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
</head>

<body>
  <h3>学生表</h3>
  <div class="container">
    <form action="#">
      <label for="no">学号:</label>
      <input type="text" id="no" name="no" placeholder="请输入学号..">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" placeholder="请输入姓名..">
      <label for="age">年龄:</label>
      <input type="text" id="age" name="age" placeholder="请输入年龄..">
      <input type="submit" value="提交">
    </form>
    </table>
</body>

</html>

表格

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
</head>

<body>
  <h3>学生表</h3>
  <table id="STUDENT" border="1">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>X1</td>
      <td>X1</td>
      <td>1</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X2</td>
      <td>X2</td>
      <td>2</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X3</td>
      <td>X3</td>
      <td>3</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X4</td>
      <td>X4</td>
      <td>4</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X5</td>
      <td>X5</td>
      <td>5</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X6</td>
      <td>X6</td>
      <td>6</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
  </table>
</body>

</html>