语义化标签提升成绩报告可访问性与可维护性：用<section>、<table>、<aside>结构化内容，data-score属性标记分数，原生表格配合响应式折叠，打印与暗色模式CSS适配，JS精准选取DOM并校验数据。
用语义化标签组织成绩报告结构
成绩报告页不是堆 <div> 的地方。浏览器和屏幕阅读器靠标签含义理解内容，<section> 包学生基本信息，<table> 展示科目成绩，<aside> 放教师评语或等级说明——这些比全用 <div class="box"> 更可靠，也方便后续加 CSS 或 JS 逻辑。
常见错误是把分数当纯文本塞进 <p>，结果无法被程序识别为数值。正确做法：给分数加 data-score 属性，比如 <td data-score="87">87</td>，后续做平均分计算或颜色标记（如低于 60 标红）就直接可读。
表格布局别硬套 Bootstrap 类名
考试成绩本质是二维关系数据，<table> 是语义和功能双优解。但很多人一上来就引入 Bootstrap，再套 table-responsive，结果在手机上横向滚动卡顿，打印时样式错乱。
- 先写原生
<table>：用<thead>固定表头，<tbody>装成绩行，<th scope="col">明确列含义 - 响应式优先考虑“折叠列”而非“滚动容器”：比如把“平时分/期中/期末”三列合并为“考核明细”，用
<details>展开 - 避免在
<td>里嵌套<div>布局，会破坏表格的固有渲染逻辑，尤其影响打印样式
CSS 控制打印与暗色模式兼容性
成绩报告常需打印存档，也越来越多用户开启系统级暗色模式。这两件事不处理，轻则打印出来一片黑底白字，重则关键分数看不见。
立即学习“前端免费学习笔记（深入）”；
- 强制打印时恢复浅色背景：
@media print { body { background: #fff !important; color: #000 !important; } } - 用
prefers-color-scheme区分主题：@media (prefers-color-scheme: dark) { .score-high { color: #4caf50; } .score-low { color: #f44336; } }，注意别只依赖颜色区分高低分，加图标或文字标注更稳妥 - 字体大小别用
rem死绑根元素，打印时浏览器缩放行为不可控，改用pt或em更稳
JavaScript 动态计算别绕过 DOM 结构
要算班级平均分、最高分、及格率？别用 document.querySelectorAll('.score') 硬抓所有带“score”类的元素——一旦页面加了其他分数（比如页脚统计），结果就错。
- 只从成绩表格内部取数：
document.querySelector('#scores-table tbody tr').forEach(...) - 用
parseFloat(cell.getAttribute('data-score'))读值，比parseInt(cell.textContent)更安全（能处理 “87.5” 这类小数） - 及格线别写死在 JS 里，从 HTML 提取：
const passing = document.querySelector('[data-passing]').dataset.passing || '60'; - 计算完立刻更新对应
<span id="avg-score">，而不是拼接大段 HTML 字符串重新 innerHTML
真正麻烦的不是布局，是成绩数据可能来自多个来源（Excel 导入、API 返回、手动填写），而 HTML 页面本身没有校验能力。所以只要涉及动态渲染，务必确保 data-score 值是合法数字，否则 NaN 会一路污染到平均分和图表里。
