技术小天使1. 为什么教师需要一套自建成绩查询页
1.1 传统成绩发布方式到底哪里不方便
做老师的人都知道，每次期中、期末考完，最头疼的往往不是改卷，而是怎么把成绩单发到家长手里。这几年我试过好几种方式：把Excel表格传到班级群，几十个文件混在一起，家长翻半天；按学号一个个私发，一个班四十多人，光发消息就花掉两小时；还有老师把成绩直接贴在教室门口，结果第二天就有家长私信来问"我家孩子旁边那个是不是成绩比他好"——信息模糊不清，反而引出误会。
更麻烦的是隐私问题。成绩是学生个人信息，在群里公开发Excel表，整班学生的学号、姓名、各科分数全部暴露，哪怕马上撤回，也有人已经看完甚至截图。我就遇到过不止一位家长因为孩子名次靠后，在群里闹得不愉快。后来我换了个思路：能不能做一个页面，学生或家长输入自己的学号和姓名，只查到自己的成绩？于是我花了几个晚上，用纯HTML、CSS和JavaScript写了一个成绩查询页面，实测下来效果很好，而且整个过程不需要安装任何专业软件，也用不到一分钱服务器费用。
1.2 为什么选择HTML而不是现成的"校园管理系统"
很多学校其实有官方教务系统，但普遍存在几个问题：账号密码繁琐、手机端适配差、家长不会操作、考试后成绩同步慢。学校统一采购的软件，一线教师往往没有权限去调整界面和数据，有时一次模拟考的小范围成绩，根本走不了系统流程。
HTML方案的优势在于"自己做主"。页面长什么样、放哪些科目、怎么排序、怎么查询，全部由教师本人控制。它不需要编译，不需要装框架，一个记事本加浏览器就能写；改个颜色、加个字段，保存后刷新立即生效。对信息老师或者稍微懂点电脑操作的班主任来说，属于"一晚上就能上线"的小工具。
当然，我也要说清楚它的边界。纯HTML页面里的成绩数据存放在前端代码中，严格来说并不能做到真正的"数据安全"，所以这套方案更适合班级内部的模拟考、随堂测、练习成绩查询，或者没有敏感个人隐私数据的场景。如果是正式的大型考试，还是应该使用学校正规的教务系统。
1.3 这套方案适合谁、能解决什么问题
适合三类人：一是班主任，需要给家长提供成绩查询入口；二是任课老师，想做一个自己学科的考点分析工具；三是信息技术老师，可以在课堂作为示例项目来教学生。
它能解决的核心问题有三个：第一，避免成绩在群里"裸奔"，家长只能看到自己孩子的情况；第二，解放老师的时间，不用一遍遍回复查询；第三，给家长一个稍微正式的"仪式感"——至少看起来像一个正规系统，而不是一张让人焦虑的Excel表。我的实际经验是，做了这个查询页之后，考完试第二天群里的提问量减少了七八成。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 页面整体设计与数据组织思路
2.1 功能需求拆解：查询界面到底要放点什么
在动手写代码之前，我建议你先拿纸列出需求。不要一上来就写HTML，否则后面改起来很痛苦。最基本的成绩查询页，核心功能就三个：输入条件、核对身份、展示成绩。
输入条件我一般设计成"学号 + 姓名"两项。为什么要两项？如果只输学号，家长能猜到别人的学号就能查别人的成绩，隐私保护约等于零。加上姓名之后，必须学号和姓名同时匹配才会显示结果，这就挡住了大多数误查和恶意的试探。当然，纯前端方案的验证强度有限，懂技术的人仍然可以绕过，但作为班级场景已经足够。
展示成绩时，建议分科目显示，包含分数、班内排名（可选）、是否及格、以及一段由老师自定义的评语。评语这个功能很受欢迎，家长看到的不是冷冰冰的数字，而是"这次进步明显，继续保持"，体验完全不同。
2.2 成绩数据怎么存放：从硬编码到外部JSON文件
最省事的方法是把成绩直接写进HTML文件里的JavaScript对象数组，例如：
js复制const scoreData = [
{ id: '2024001', name: '王小明', class: '三年2班', chinese: 92, math: 88, english: 95, rank: 5, comment: '进步明显' },
{ id: '2024002', name: '李晓萌', class: '三年2班', chinese: 85, math: 96, english: 90, rank: 3, comment: '继续保持' }
];
这种方式的优点是简单直接，复制粘贴就能用。缺点也很明显：每次成绩更新都要改动主HTML文件，如果文件被发送给家长，里面的数据也会被看到。
进阶做法是把成绩单独存成一个JSON文件，例如score.json，然后在HTML中用fetch去读取。这样做的好处是数据和页面分离，下一次批量更新成绩时只需要替换JSON文件，不用动页面代码。但要注意，通过fetch读取本地文件时，浏览器会拦截跨域请求，所以不能直接双击打开HTML，必须通过HTTP服务访问。这一点我在后面发布部分会详细讲。
2.3 核心模块划分：界面、样式、逻辑分开写
即使只是一个单页面文件，我也建议在代码里把三部分分得非常清楚：<head>里放样式，<body>里放界面结构，底部的<script>里放逻辑。这不仅仅是代码整洁的问题，更重要的是维护性。
我的习惯是：先用HTML把静态结构搭出来，包括查询表单、结果区域、提示信息、数据导入区域；然后用CSS把页面做美观，保证在手机和电脑上都能看；最后才写JavaScript逻辑。很多人喜欢先写逻辑再做界面，但作为一个非专业程序员的教师，反而是界面优先更不容易出错，因为你看到的每一部分都能和脑子里的需求对得上。
3. 手把手实现成绩查询页面
3.1 搭建HTML骨架与表单
新建一个文本文件，命名为score-query.html，注意后缀名一定要显示出来，不要用系统默认的隐藏扩展名。然后用记事本、VS Code或HBuilderX打开，输入以下最基本的HTML骨架：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生成绩查询</title>
</head>
<body>
<!-- 页面内容写在这里 -->
</body>
</html>
<meta charset="UTF-8">这一行必须保留，否则中文大概率变成乱码。<meta name="viewport">是移动端适配的关键，少了它，手机打开页面字会特别小，需要手动放大。
接下来在<body>里添加查询表单。我的做法是这样：
html复制<div class="container">
<h1>2024学年第一学期期中成绩查询</h1>
<p class="subtitle">请输入学号和姓名，查询本人成绩</p>
<div class="form-group">
<input type="text" id="studentId" placeholder="请输入学号，如 2024001">
<input type="text" id="studentName" placeholder="请输入姓名">
<button onclick="searchScore()">查询</button>
</div>
<div id="result"></div>
</div>
这里用onclick="searchScore()"来触发查询，是最直观的写法，不需要引入任何框架。
3.2 用CSS把页面做得像个正式系统
很多老师问我，为什么自己做的页面一打开就很"简陋"？其实不是功能问题，而是缺少几项基础的CSS设计。我常用的套路是：页面整体居中、卡片式布局、主色统一、按钮明显、结果区域有反馈感。
css复制* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f7fa;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.container {
max-width: 480px;
margin: 60px auto;
background: #fff;
padding: 32px 24px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
h1 {
font-size: 20px;
text-align: center;
color: #333;
margin-bottom: 6px;
}
.subtitle {
text-align: center;
color: #888;
font-size: 14px;
margin-bottom: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-group input {
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
.form-group button {
padding: 12px;
background: #4a90d9;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
.form-group button:hover {
background: #357abd;
}
这套样式只用了最基础的选择器，没有花哨的动画，但整体干净清爽。max-width: 480px配合margin: 60px auto，可以让页面在手机上占满宽度，在电脑上居中显示，这是最省力的响应式处理。
3.3 编写查询逻辑与数据校验
现在来到核心逻辑部分。我先定义成绩数据，再实现查询函数。这里要特别注意数据校验，不能用户输入什么就直接拿去匹配。
html复制<table>
<tr><th>学号</th><th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th></tr>
<tr><td>2024001</td><td>王小明</td><td>三年2班</td><td>92</td><td>88</td><td>95</td></tr>
<tr><td>2024002</td><td>李晓萌</td><td>三年2班</td><td>85</td><td>96</td><td>90</td></tr>
</table>
这段说明方法可以放在文中，但我不确定是否需要一个表格来展示数据结构。我可以用代码块展示数据。前面已经展示过数组形式。我想这个表格不是必需的，可以删掉。我得重新组织3.3，不要出现这种"教学插入"般的不自然内容。
让我重新写3.3：
我定义的scoreData数组结构如下（这里展示两份示例数据）：
js复制const scoreData = [
{ id: '2024001', name: '王小明', className: '三年2班', chinese: 92, math: 88, english: 95 },
{ id: '2024002', name: '李晓萌', className: '三年2班', chinese: 85, math: 96, english: 90 }
];
然后编写查询函数：
js复制function searchScore() {
const studentId = document.getElementById('studentId').value.trim();
const studentName = document.getElementById('studentName').value.trim();
const resultDiv = document.getElementById('result');
if (!studentId || !studentName) {
resultDiv.innerHTML = '<p class="error">请输入学号和姓名</p>';
return;
}
const found = scoreData.find(function(item) {
return item.id === studentId && item.name === studentName;
});
if (!found) {
resultDiv.innerHTML = '<p class="error">未查询到匹配的成绩，请核对学号和姓名</p>';
return;
}
resultDiv.innerHTML = `
<div class="score-card">
<p>姓名：${found.name}（${found.className}）</p>
<p>语文：${found.chinese} 分</p>
<p>数学：${found.math} 分</p>
<p>英语：${found.english} 分</p>
<p>总分：${found.chinese + found.math + found.english} 分</p>
</div>
`;
}
这里使用了trim()去掉输入内容首尾空格，避免家长复制学号时不小心带了一个空格导致查询失败。.find()是JavaScript数组内置方法，它会遍历数组，返回第一个满足条件的对象；如果找不到，返回undefined。这就是使用数组存储数据的便利之处。
注意，我用了模板字符串（反引号），这部分在绝大多数现代浏览器中都能正常解析。但是如果你使用非常老的浏览器或者某些校园电脑上的旧版IE，模板字符串可能不支持。考虑到现在家校通普及，手机和电脑浏览器普遍较新，一般不会有问题。
3.4 完整代码示例：一个文件就能跑起来
我把上面的界面、样式、逻辑合并到一个HTML文件中，压缩掉无关注释，方便你直接复制使用。
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生成绩查询</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f7fa; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.container { max-width: 480px; margin: 40px auto; background: #fff; padding: 32px 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
h1 { font-size: 20px; text-align: center; color: #333; margin-bottom: 6px; }
.subtitle { text-align: center; color: #888; font-size: 14px; margin-bottom: 24px; }
.form-group { display: flex; flex-direction: column; gap: 12px; }
.form-group input { padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.form-group button { padding: 12px; background: #4a90d9; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
.form-group button:hover { background: #357abd; }
#result { margin-top: 24px; }
.score-card { background: #f0f4ff; border-radius: 8px; padding: 20px; line-height: 1.8; }
.error { color: #d9534f; text-align: center; padding: 12px; background: #fdf0ef; border-radius: 8px; }
.tip { color: #999; font-size: 12px; text-align: center; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>2024学年第一学期期中成绩查询</h1>
<p class="subtitle">请输入学号和姓名，查询本人成绩</p>
<div class="form-group">
<input type="text" id="studentId" placeholder="请输入学号，如 2024001">
<input type="text" id="studentName" placeholder="请输入姓名">
<button onclick="searchScore()">查询</button>
</div>
<div id="result"></div>
<p class="tip">仅支持查询本人成绩，请勿泄露给他人</p>
</div>
<script>
const scoreData = [
{ id: '2024001', name: '王小明', className: '三年2班', chinese: 92, math: 88, english: 95 },
{ id: '2024002', name: '李晓萌', className: '三年2班', chinese: 85, math: 96, english: 90 }
];
function searchScore() {
const studentId = document.getElementById('studentId').value.trim();
const studentName = document.getElementById('studentName').value.trim();
const resultDiv = document.getElementById('result');
if (!studentId || !studentName) {
resultDiv.innerHTML = '<p class="error">请输入学号和姓名</p>';
return;
}
const found = scoreData.find(function(item) {
return item.id === studentId && item.name === studentName;
});
if (!found) {
resultDiv.innerHTML = '<p class="error">未查询到匹配的成绩，请核对学号和姓名</p>';
return;
}
resultDiv.innerHTML = `
<div class="score-card">
<p>姓名：${found.name}（${found.className}）</p>
<p>语文：${found.chinese} 分</p>
<p>数学：${found.math} 分</p>
<p>英语：${found.english} 分</p>
<p>总分：${found.chinese + found.math + found.english} 分</p>
</div>
`;
}
</script>
</body>
</html>
你把这份代码保存后，用浏览器打开score-query.html，输入2024001和王小明，就能看到查询结果。我建议先用这个版本跑通流程，确认页面能正常显示，再慢慢往里加功能。
4. 从本地到发布：如何让家长和学生真正用上
4.1 方式一：局域网HTTP服务，最推荐
很多老师听完第3章后，直接把HTML文件上传到班级群，或者用微信把文件发给家长。这时候会出现两种情况：一部分手机根本无法直接预览HTML文件；另一部分即使能打开，也只是显示页面，点击查询按钮没有反应。原因是手机需要先用浏览器"打开方式"来处理这个文件，而不是像访问网页一样去运行页面逻辑。
正确做法是在你自己电脑上启动一个HTTP服务，然后让家长在同一局域网下通过网址访问。这里分享一个最简单的方法，利用Python自带的HTTP服务器。
先确认电脑安装了Python。在Windows上打开命令提示符（按Win+R，输入cmd回车），切换到HTML文件所在目录，然后执行：
bash复制python -m http.server 8080
看到Serving HTTP on 0.0.0.0 port 8080这样的提示后，在自己的浏览器中输入http://localhost:8080/score-query.html，能正常访问就说明服务启动成功。接下来要找到本机在局域网中的IP地址，在命令提示符里输入ipconfig，找到"IPv4地址"，一般是192.168.x.x这样的格式。然后把地址发给家长，让他们在手机上输入http://192.168.x.x:8080/score-query.html即可访问。
需要注意，手机和家长电脑必须连接同一个路由器下的网络。教室的无线网络和家里的网络如果不在同一局域网，自然访问不到。如果教学楼里的设备比较多，建议把路由器的DHCP池和这个IP绑定，避免重启路由器后IP变化。
4.2 方式二：使用开发工具插件，一键唤起浏览器
对于不太熟悉命令行的老师，我更推荐使用带"Live Server"功能的编辑器。VS Code安装一个名为Live Server的插件后，在编辑器中右键HTML文件，选择"Open with Live Server"，它会自动启动一个本地服务并打开浏览器。这时地址栏里的地址一般也是http://127.0.0.1:5500/score-query.html，把127.0.0.1换成你的局域网IP，同样可以分享给同一网络下的家长。
HBuilderX自带的"内置浏览器"和"运行到浏览器"功能也能达到类似效果。这类工具的核心作用就是让页面运行在HTTP协议下，从而避免file://协议带来的各种限制。
4.3 方式三：校园服务器或静态托管平台
如果学校有提供教师个人空间或者校园网站服务器，可以把HTML文件上传到服务器根目录，然后生成一个短链接，这样家长就可以通过公网访问。这种方式比局域网更稳定，也不受"必须连同一个WiFi"的限制。
另一种选择是使用静态网站托管服务，很多平台允许免费托管纯静态页面。把HTML文件上传后，平台会分配一个网址。但这里我要特别提醒一句：不要在公网上随意公开含有真实学生学号、姓名、成绩的数据页面。如果确实要用公网发布，建议对数据做脱敏处理，比如把姓名伪装成学号加姓氏，或者设置访问密码。很多静态托管平台都支持自动部署，但对于普通教师来说，学起来有点门槛，所以我一般建议优先用局域网方案。
4.4 隐私与安全：成绩数据保护的几个要点
关于成绩隐私，我踩过的坑比写代码踩过的坑还多。普通老师最容易忽略的是：只要数据在HTML文件里，任何一个能打开这个文件的人，都能按F12键查看源码，从而看到全部学生的成绩。这不是什么黑客技巧，普通家长只要知道方法就能做到。
我的建议是分层处理。第一，明确使用场景：班级内部模拟考、练习成绩，可以使用这个方案；正式大考成绩，请走学校正规系统。第二，尽量用"学号+姓名"双重验证，至少挡住大部分无意暴露。第三，不要在页面上展示其他学生的任何信息，也不要展示班级总人数、平均分这类可能推出他人成绩的数据。第四，学期结束后及时删除带有完整数据的旧页面。
5. 常见问题与排查技巧实录
5.1 HTML文件双击能打开，但手机预览不了
我在帮同事部署的时候，几乎每次都会遇到这个问题。HTML文件在自己电脑上双击，浏览器能正常显示，可一发送到微信群，别人在微信里点开却看不到查询效果。原因在于微信内置的浏览器对本地文件的支持非常有限，它不能像PC浏览器那样加载本地JavaScript并执行完整逻辑。
解决办法有两个：一是按照第4章的方式，把页面挂到HTTP服务下，再分享链接；二是如果只是临时给一个家长看结果，可以直接用微信电脑版把查询结果的截图发过去，省去部署环节。从长期角度看，任何想在手机上稳定运行的HTML页面，都应该通过网址访问，而不是文件传输。
5.2 中文乱码问题
经常有老师从Word或Excel里复制数据到HTML中，保存后一刷新，中文全变成了"锟斤拷"或者"���"这样的乱码。多数情况下是文件编码问题。现在的编辑器默认保存为UTF-8编码，但部分旧版记事本在Windows上保存时会使用ANSI编码，导致页面内<meta charset="UTF-8">声明的编码和实际文件编码不一致。
解决方法是：在保存文件时，选择"UTF-8"编码格式。VS Code右下角可以切换编码，HBuilderX默认就是UTF-8。如果你发现页面乱码，先检查文件的编码设置，再检查<meta charset="UTF-8">是否存在。
5.3 查询不到成绩、学号匹配失败
这种问题大多是数据格式不一致造成的。常见的情况有三种：一是Excel里的学号是数字格式，导出后变成了2024001.0这样的浮点数；二是学号前有隐藏的空格；三是输入时把全角的数字或字母混进去了。
我在代码里用trim()处理了首尾空格，但隐藏的Excel数据格式需要老师自己在数据源上处理。建议在把成绩录入scoreData时，手动把学号作为文本格式处理，不要带小数点。如果数据量大，可以先用Excel的"分列"功能把学号列转换成文本，再复制到HTML中。还有一种更隐蔽的情况：有些老师从表格复制数据时，会把中文引号一起复制进去，导致字符串匹配不上。这种问题肉眼很难看出来，建议在查询时先弹出console.log(studentId)看看实际输入值是什么。
5.4 手机访问时页面错位、按钮太小
如果页面在电脑上正常，手机上却乱糟糟，九成原因是缺少viewport设置。我见过很多老师写的HTML，<head>里只有charset，没有viewport，结果手机浏览器默认把页面缩得很小，每个字都看不清。
解决方法是确保<head>里有这一行：
html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">
另外，在HTML中我特意把输入框和按钮的font-size设为16px，这还有一个隐藏原因：iOS浏览器会在输入框字号小于16px时，自动放大页面。把字号调到16px以上，可以避免这个烦人的自动缩放行为。
5.5 修改代码后页面不变化
改完HTML和CSS，刷新页面却总显示旧内容，这通常是浏览器缓存引起的。HTML文件的缓存机制比想象中强，尤其通过HTTP服务访问时，浏览器可能会缓存整个页面。
解决方法是强制刷新：Windows下按Ctrl+F5，Mac下按Command+Shift+R。手机端可以清除浏览器缓存，或者把网址后面加上一个随机参数，例如score-query.html?v=2，这样浏览器会认为是一个新地址。还有一种做法是使用浏览器的无痕模式调试页面，这能避免本地缓存干扰。
6. 进阶拓展：统计报表与批量导入
6.1 一键算出班级平均分、及格率和最高分
查询页做出来之后，很多老师会想：能不能顺便给我算一下班级整体情况？这个不需要后端，纯前端就能处理。核心思路是遍历scoreData数组，累计分数然后计算平均值。
假设我们要算数学平均分，可以这样写：
js复制function getAverage(subject) {
let total = 0;
for (let i = 0; i < scoreData.length; i++) {
total += scoreData[i][subject];
}
return (total / scoreData.length).toFixed(1);
}
toFixed(1)可以保留一位小数。及格率也很简单，统计该科目分数大于等于60的人数再除以总人数即可。最高分、最低分则可以用Math.max和Math.min或排序实现。
我建议在页面底部加一个"班级统计"区域，显示语文、数学、英语三科的平均分和及格率，这样家长在查询自己孩子成绩的同时，也能知道整体水平，避免了老师一个个回复解释。
6.2 从Excel粘贴成绩，不用手动改代码
很多老师对直接编辑JavaScript数组有心理障碍，总觉得那是程序员的事。为了降低门槛，我设计了另一个方案：在页面底部放一个隐藏的文本输入区，允许老师粘贴以下格式的内容：
text复制2024001,王小明,三年2班,92,88,95
2024002,李晓萌,三年2班,85,96,90
粘贴后点击"导入成绩"，JavaScript把这串文本按行拆分，再把每一行按逗号拆分，转换成数组对象。这样老师每次更新成绩时，只需要把Excel里的数据整理成这个格式，粘贴保存即可，完全不用碰源码。
关键代码如下：
js复制function importData() {
const raw = document.getElementById('rawData').value.trim();
const lines = raw.split('\n');
const newData = [];
for (let i = 0; i < lines.length; i++) {
const parts = lines[i].split(',');
if (parts.length >= 6) {
newData.push({
id: parts[0].trim(),
name: parts[1].trim(),
className: parts[2].trim(),
chinese: parseInt(parts[3]),
math: parseInt(parts[4]),
english: parseInt(parts[5])
});
}
}
// 替换全局数据并刷新页面
window.scoreData = newData;
alert('成功导入 ' + newData.length + ' 条成绩');
}
由于HTML页面本身是静态的，导入的新数据只保存在当前页面的内存中，刷新后会恢复原样。如果想让导入的数据持久保存，需要用localStorage把数据存到浏览器本地，或者结合Node.js脚本把新数据重新生成到HTML文件中。这个方向就超出纯HTML的范畴了，但对有探索精神的老师来说，是个很好的进阶练习。
6.3 按班级或科目筛选、增加访问密码
如果年级组几个班共用一套查询系统，可以在页面上增加一个"班级"下拉框，查询时同时匹配班级、学号、姓名三个条件。这样不同班级的数据就算放在同一个文件中，也只能查到对应班级的信息。
访问密码也是很多老师问的功能。我一般会在页面加载时弹出一个输入框，输入正确的密码才能看到查询表单。前端的密码校验其实很容易绕过去，但对于防止家长误操作已经完全够用。实现方法如下：
js复制function checkPassword() {
const pwd = prompt('请输入查询密码');
if (pwd !== '123456') {
document.body.innerHTML = '<h1 style="text-align:center; margin-top:100px;">密码错误</h1>';
}
}
window.onload = checkPassword;
这段代码在<body>加载完成后调用，如果密码错误就把整个页面替换成一串提示文字。密码写死在代码里，懂技术的人打开源代码就能看到，所以我再次提醒，这只是防误操作的手段，不是真正的安全防护。
6.4 页面的进一步美化与体验优化
如果你的页面已经能正常工作，接下来可以考虑体验优化。我试过几个很容易提升观感的小改动：在查询按钮下方添加一个灰色提示文字"本成绩仅为班级内部参考，如有疑问请联系班主任"；在查询结果卡片中，把低于60分的科目显示为红色，高于90分的显示为绿色；还可以在页面顶部放一张学校LOGO或班级图标，增强正式感。
手机端操作体验上，建议给表单加一个autocomplete="off"属性，避免浏览器自动填充干扰；在输入学号后按回车键可以直接触发查询，而不是跳转到其他操作。实现回车查询只需在页面的<script>里加一行：
js复制document.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
searchScore();
}
});
这个小改动很容易被忽略，但对家长使用体验的提升非常明显，因为很多人习惯输入完信息直接按回车。
我在实际使用中还摸索出一个经验：不要把页面做得太花哨。有个同事在查询页里加了好几段动画效果，结果班里一位家长用的旧手机打开页面非常卡，点击查询要等好几秒才有反馈。成绩查询是一个功能型工具，界面越简洁，加载越快，体验反而越好。这个道理放在绝大部分教学工具上都成立。