用语义化 + 结构，当前页用 ，上/下页保留真实 href；css 用 inline-flex+gap 布局，小屏改三按钮+页码输入框，确保可访问性与响应式体验。
怎么用纯 HTML + CSS 实现无 JS 的简约分页器
纯静态分页器本身不处理数据，只负责展示「当前页」「上一页」「下一页」「页码跳转入口」这些视觉结构。关键在于：用语义化标签（<nav></nav> + <ul></ul>）组织，避免用 <div> 堆砌；CSS 控制间距、对齐和状态样式，不依赖 JS 切换类名。
<p>常见错误是直接套用框架组件代码，结果引入一堆没用的 <code>aria- 属性或 JS 监听逻辑，反而让简单分页变重、不可访问、难维护。
- 用
<nav aria-label="分页导航"></nav>包裹整个分页区域，屏幕阅读器能识别用途 - 页码项统一用
<li>@#@#@#@#@#@#@#@#@#@0</li>，当前页改用<li aria-current="page"><span>3</span></li>（不用@#@#@#@#@#@#@#@#@#@1、<span aria-current="page">3</span>、@#@#@#@#@#@#@#@#@#@2 - 额外加一个
<form></form>包裹的页码跳转输入框，input设min="1"和max（后端传入总页数），提交时GET到对应page参数
真正难的不是写样式，是想清楚：用户在不同设备上，到底需要什么信息来完成「跳转到某页」这个动作。漏掉输入框、砍掉总页数提示、或者让「当前页」在小屏消失，都是典型设计盲区。
