一、HTML5 简介

HTML5是当前最流行的网页制作技术之一，它提供了丰富的标签和功能，使得开发者可以更加轻松地构建出丰富的网页应用。在本教程中，我们将使用HTML5来创建一个个性化的学生成绩录入网页。

二、准备工作

在开始之前，请确保您的电脑已安装以下软件：

  • 文本编辑器：例如Notepad++、Sublime Text等。
  • 浏览器：例如Chrome、Firefox等。

三、创建基本网页结构

  1. 创建新文件：打开您的文本编辑器，创建一个新的HTML文件，命名为student_grade_input.html。

  2. 设置文档类型和标题：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生成绩录入系统</title>
</head>
<body>

</body>
</html>
  1. 添加CSS样式：

为了使网页更加美观，我们可以添加一些CSS样式。将以下代码添加到<head>标签内部：

<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
        text-align: center;
    }
</style>

四、设计网页布局

  1. 添加头部导航：
<header>
    <div class="container">
        <h1>学生成绩录入系统</h1>
    </div>
</header>
  1. 添加学生信息录入表单：
<section>
    <div class="container">
        <h2>学生信息录入</h2>
        <form action="#" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required>
            <label for="class">班级：</label>
            <input type="text" id="class" name="class" required>
            <label for="score">成绩：</label>
            <input type="number" id="score" name="score" required>
            <input type="submit" value="提交">
        </form>
    </div>
</section>
  1. 添加底部信息：
<footer>
    <div class="container">
        <p>版权所有 &copy; 2021 学生成绩录入系统</p>
    </div>
</footer>

五、添加JavaScript功能

为了使表单在提交时能够进行一些简单的验证，我们可以添加JavaScript代码。将以下代码添加到<body>标签的底部：

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        var name = document.querySelector('#name').value;
        var class_name = document.querySelector('#class').value;
        var score = document.querySelector('#score').value;
        if (!name || !class_name || !score) {
            alert('请填写完整信息！');
            e.preventDefault();
        }
    });
</script>

六、保存并预览

  1. 保存文件：将以上代码保存到您创建的HTML文件中。

  2. 预览网页：打开浏览器，输入文件的保存路径（例如file:///C:/path/to/student_grade_input.html），即可看到您创建的学生成绩录入网页。

七、总结

通过本教程，您已经学会了如何使用HTML5和CSS来创建一个简单的学生成绩录入网页。在实际应用中，您可以根据需要添加更多的功能和样式，使您的网页更加美观和实用。