用语义化 <nav>+<ul> 结构，当前页用 <li aria-current="page"><span>，上/下页保留真实 href；CSS 用 inline-flex+gap 布局，小屏改三按钮+页码输入框，确保可访问性与响应式体验。
怎么用纯 HTML + CSS 实现无 JS 的简约分页器
纯静态分页器本身不处理数据，只负责展示「当前页」「上一页」「下一页」「页码跳转入口」这些视觉结构。关键在于：用语义化标签（<nav> + <ul>）组织，避免用 <div> 堆砌；CSS 控制间距、对齐和状态样式，不依赖 JS 切换类名。
常见错误是直接套用框架组件代码，结果引入一堆没用的 aria- 属性或 JS 监听逻辑，反而让简单分页变重、不可访问、难维护。
- 用
<nav aria-label="分页导航">包裹整个分页区域，屏幕阅读器能识别用途 - 页码项统一用
<li><a href="?page=2">2</a></li>，当前页改用<li aria-current="page"><span>3</span></li>（不用<a>，避免无效跳转） - 上/下页链接保留
href，但指向真实可访问的 URL（如?page=2），别写#或空字符串
为什么 display: inline-flex 比 float 或 inline-block 更适合分页容器
老式写法常用 float: left 清除浮动，或给 <li> 设 display: inline-block 加 vertical-align: middle 对齐——但两者都容易因空白符、行高、基线差异导致错位或间隙。
inline-flex 能天然控制子项对齐、间距和换行，且兼容性足够（IE11+ 支持，若需 IE9–10 可降级为 display: flex + flex-wrap: wrap）。
立即学习“前端免费学习笔记（深入）”；
- 容器设
display: inline-flex+gap: 4px（比margin更干净，不触发外边距合并） - 禁用
white-space: nowrap，否则小屏会横向溢出；改用flex-wrap: wrap+justify-content: center - 当前页
<span>加font-weight: 600和轻微背景色，别用纯加粗+无对比色，否则弱视用户难识别
aria-current="page" 不只是装饰，它影响实际可访问性
很多开发者把当前页高亮当成纯视觉需求，只加个 class="active"，但这个 class 对屏幕阅读器毫无意义。没有 aria-current，NVDA 或 VoiceOver 读出来就是“3”，完全不知道这是当前位置。
必须配合语义化结构使用：<li aria-current="page"><span>3</span></li>，此时读屏软件会读作“3（当前页）”。
- 不要写成
aria-current="true"或aria-current="1"，合法值只有page、step、location等，分页场景固定用page - 当前页不能是
<a>标签，否则键盘用户按 Enter 会刷新当前页（无意义操作），也违反 WAI-ARIA 最佳实践 - 如果后端渲染，确保服务端输出时就写对
aria-current，别等 JS 补充——否则首屏可访问性直接丢失
响应式断点怎么设才不崩？重点不是隐藏页码，而是重构布局
很多“响应式分页”在手机上直接隐藏中间页码（如只留 1…5），看似省空间，实则破坏导航意图：用户根本不知道总共有多少页，也无法估算位置。
更合理的方式是，在小屏下切换为「上一页 / 当前页 / 下一页」三按钮布局，辅以页码输入框（<input type="number">），而非暴力裁剪。
- 断点建议设在
max-width: 480px（非绝对，看实际内容宽度），用@media (max-width: 480px) - 小屏下隐藏所有数字页码（
display: none），只显示<a href="?page=2">上一页</a>、<span aria-current="page">3</span>、<a href="?page=4">下一页</a> - 额外加一个
<form>包裹的页码跳转输入框，input设min="1"和max（后端传入总页数），提交时GET到对应page参数
真正难的不是写样式，是想清楚：用户在不同设备上，到底需要什么信息来完成「跳转到某页」这个动作。漏掉输入框、砍掉总页数提示、或者让「当前页」在小屏消失，都是典型设计盲区。
