纯 HTML + CSS 实现带「下一页」的分页器，必须用 <nav aria-label="pagination"> 包裹语义化结构，「下一页」应为 <a href="?page=4" aria-label="下一页">下一页 →</a>，而非按钮；当前页用 aria-current="page" 标记，CSS 重置列表样式、设置足够触摸目标（≥36px）、禁用浮动改用 Flex 布局，并确保焦点可见与色觉友好。
怎么用纯 HTML + CSS 实现带「下一页」的分页器？
纯 HTML 本身不支持分页逻辑，next 按钮只是个 <a> 或 <button> 标签，关键在结构语义和可访问性。别直接写 <button>下一页</button> —— 屏幕阅读器和 SEO 都会懵。
推荐用 <nav> 包裹，用 aria-label="pagination" 明确用途，当前页用 aria-current="page" 标记：
<nav aria-label="pagination">
<ul>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li aria-current="page">3</li>
<li><a href="?page=4">下一页</a></li>
</ul>
</nav>
- 不要把「下一页」塞进
<li>里再套<button>—— 它本质是导航链接，不是操作按钮 -
href必须指向真实可访问的下一页 URL（比如?page=4），否则禁用状态得靠 JS 控制，且要加aria-disabled="true"和tabindex="-1" - 如果后端没返回总页数，就别硬写「共 10 页」—— 留空或用「更多」代替，避免误导
「下一页」按钮该用 <a> 还是 <button>？
绝大多数情况必须用 <a>。因为分页本质是页面跳转，不是前端状态切换。
- 用
<button>的唯一合理场景：SPA（如 React/Vue）且分页完全由 JS 控制、URL 不变（此时需手动 pushState 并设role="link"） - 用
<a>时，即使当前是最后一页，也建议保留链接并服务端返回 404 或重定向到末页，比 JS 禁用更可靠 - 千万别写
<a href="#">下一页</a>—— 点击会滚顶，还破坏浏览器前进/后退栈
CSS 怎么让分页器不丑又可用？
默认 <ul> 的列表符号和外边距会干扰布局，必须重置。重点不是“好看”，而是「焦点可见」「足够点击区域」「移动端友好」。
立即学习“前端免费学习笔记（深入）”；
- 给
<a>和<li>设display: inline-block或用 Flex 布局，别依赖浮动 - 每个项最小宽度设
min-width: 32px，高度至少36px，满足 WCAG 触摸目标要求 - 当前页用
background+font-weight: bold，别只靠颜色区分（色弱用户看不见） - 「下一页」文字右侧加
→箭头（content: " →"），比纯文字更明确方向性
后端没给总页数时，怎么安全显示「下一页」？
很多 API 只返回 has_next: true 或下一页的 next_url，而不是总页数。这时候「下一页」按钮的存在本身，就是分页是否继续的唯一依据。
- 渲染时检查响应里的
next_url字段，有值才渲染「下一页」链接，没值就彻底不输出那个<li> - 别用「第 3 页，共 N 页」这种结构 —— N 未知时强行写「...」或「更多」反而更诚实
- 如果用无限滚动替代传统分页，就别叫它“分页器”，也别放「下一页」按钮 —— 这是两种交互范式，混用会 confuse 用户
真正麻烦的从来不是怎么写按钮，而是当用户点完「下一页」发现数据为空、接口报错、或者 URL 参数错乱时，你有没有预留 fallback 路径。结构可以抄，但错误边界处理得自己填。
