动手示例
全部 6 项任务，按预计分钟数从少到多排列。
| 任务 | 主题 | 预计分钟 | 练习目标 |
|---|---|---|---|
| 添加正文跳转 | HTML | 10 | 普通链接指向唯一 id |
| 标注表格标题 | HTML | 15 | caption 与 scope 配对 |
| 调整手机卡片 | CSS | 20 | 窄屏改为单栏 |
| 补充焦点样式 | CSS | 25 | 键盘焦点清晰可见 |
| 实现本地状态 | JavaScript | 30 | 文字状态与数据同步 |
| 校验配置导出 | JavaScript | 45 | 检验后输出 JSON |
这段代码解决什么问题
caption 说明表格整体用途。顶行的 th scope="col" 是列标题，每行首格的 th scope="row" 是任务名称，帮助读者理解数据归属。
预计时长是本站构造的学习安排，不是实际测量结果。排序使用数值比较函数，避免默认字符串排序导致 100 排在 20 前面。筛选仅改变这些已存在行的 hidden，不请求远程数据。
- 表格在窄屏可横向滚动，保留行列关系。
- 分钟列的 aria-sort 跟随排序方向更新，文字状态也同步说明当前顺序。
- 数据量大时应考虑分页与服务端查询，此例只演示六行内存操作。
- 排序按钮与表头分开，保持按钮名称直接表达下一次操作。
关键片段
<caption>原创网页练习清单</caption>
<th scope="col" aria-sort="ascending">预计分钟</th>
<th scope="row">添加正文跳转</th>
// 默认 sort 是字符串顺序；此处明确比较数值
rows.sort((a, b) => Number(a.dataset.minutes) - Number(b.dataset.minutes));这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。
运行条件与源文件
解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 data-table.html。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。
关闭 JavaScript 仍可阅读本文和初始示例内容；动态操作按钮保留禁用状态或静态内容，不表示已运行交互。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。
本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。查看完整 MIT 许可 · 运行说明
进一步阅读
以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。
- W3C WAI：行列两类表头（在线参考，访问需网络）
- MDN：Array.prototype.sort（在线参考，访问需网络）
- MDN：aria-sort（在线参考，访问需网络）