应使用 包裹全部分页链接，当前页用 标识，禁用状态不可用 disabled，省略号需带 aria-label，服务端分页优先采用 ?page=N URL 参数。
怎么用 <nav></nav> 包裹分页链接才不算错
语义错误是分页最常被忽略的问题：很多人直接写一堆 <a></a>，没包 <nav></nav>，或者把分页塞进 <div role="navigation"> 这种冗余写法里。W3C 明确要求带导航意图的页码组必须用 <code><nav></nav>，否则屏幕阅读器可能跳过、SEO 也可能降权。
实操建议：
- 整个页码区域（含“上一页”“下一页”“共 X 页”等）统一包裹在单个
<nav aria-label="页码导航"></nav>内，aria-label不可省，避免多个<nav></nav>造成混淆 - 当前页用
<span aria-current="page">2</span>，不是<strong></strong>或禁用<a></a>—— 后者会破坏键盘焦点流 - “上一页”“下一页”链接必须带
rel="prev"/rel="next"，这对爬虫识别序列关系很关键
aria-current="page" 和 disabled 的区别在哪
视觉上都显示为不可点击，但行为和语义天差地别。用 disabled 是无效操作 —— 它只适用于表单控件，对 <a></a> 根本不生效（浏览器会忽略），强行加反而让链接失去焦点和屏幕阅读器感知。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写
<a href="#" disabled>3</a>→ 实际仍可点击、可聚焦，且读屏会念“链接 3”，完全误导用户 - 用
<button disabled>3</button>模拟页码 → 错失链接语义，无法被搜索引擎索引，也不支持右键新标签打开
正确做法只有一条：当前页用 <span aria-current="page">3</span>，样式靠 CSS 控制，语义靠属性保障。
页码太多时要不要用“省略号”？怎么写才不伤可访问性
纯视觉省略号（如 <span>…</span>）对读屏用户毫无意义，他们会听到“点点点”或直接跳过。必须提供明确的上下文。
实操建议：
- 用
<span aria-label="中间页码，从第5页跳到第12页">…</span>，而非空<span>…</span> - 如果页码动态生成（比如 React/Vue 渲染），确保每次更新后
aria-label动态计算起止值，不能写死 - 移动端慎用省略号：小屏下连续点击 5→…→12 容易误触，建议优先做响应式截断（如只显示前后各 2 页 + 当前页），再配合“更多页”下拉菜单
为什么 <a href="?page=3"></a> 比 <button onclick="goPage(3)"></button> 更可靠
JavaScript 分页看似灵活，但绕不开三个硬伤：无历史记录、刷新即丢失状态、SEO 零收录。服务端渲染或静态页尤其不能妥协。
使用场景差异：
- SPA 应用（React/Vue）可结合
pushState，但必须同步更新<link rel="canonical">和<meta name="robots">，否则 Google 可能只收录第一页 - 传统 PHP/Node.js 后端分页，
?page=3是唯一推荐方式；参数名尽量用page而非p或offset，利于缓存识别和日志分析 - 如果必须用 JS 跳转（比如无限滚动 fallback），至少保留一个隐藏的语义化链接：
<a href="/list?page=3" aria-hidden="true" tabindex="-1"></a>，供爬虫发现
真正难的不是写出页码，而是让每一页都独立可访问、可索引、可回退 —— 这些细节藏在 aria-current、rel、<nav></nav> 的组合里，少一个，链路就断一环。
