html 无内置分页功能，需html语义化结构（nav+ol+li）、css样式控制和javascript交互三者协同实现；页码必须语义正确、无障碍支持完备、url状态同步且移动端友好。
HTML 本身不提供页码导航功能
纯 HTML 没有内置的 pagination 标签或自动页码生成机制。所谓“HTML 分页”，实际是用 HTML 写出页码容器结构，再靠 CSS 控制样式、JavaScript 控制跳转和数据加载——三者缺一不可。
常见错误是只写一堆 <a href="#">1</a><a href="#">2</a> 就以为完成了，结果点击无响应、当前页无标识、屏幕阅读器无法识别、移动端点不中。
- 页码链接必须指向有效路径（服务端分页）或绑定事件（前端分页），不能全是
# - 当前页要用
aria-current="page"标明，否则无障碍支持失效 - 省略号
…必须是真实文本节点，不能用伪元素模拟，否则无法被读屏软件朗读
用语义化 HTML 写分页容器
别用 <div class="pagination"> 包一堆 <code><span></span>。正确做法是用 <nav></nav> 包裹带 aria-label="Pagination" 的 <ol></ol>，每页一个 <li>，当前页用 <li><span aria-current="page">3</span></li>。
这样做的原因：搜索引擎能识别导航意图；键盘用户 Tab 时可跳过整组页码；辅助技术知道这是页码而非普通列表。
立即学习“前端免费学习笔记（深入）”；
- 上一页/下一页按钮必须是
<a></a>或带role="link"的<button></button>，不能只用<span></span>+ JS click - 禁用状态（如第一页时“上一页”不可点）应设
aria-disabled="true"并移除href，而不是仅靠 CSS 灰掉 - 避免在
<ol></ol>里塞非<li>元素（比如直接放<span>…</span>），会破坏列表语义
JavaScript 控制页码跳转时的关键细节
前端分页（如 React/Vue 渲染列表后手动切页）最容易出问题的是状态同步和 URL 更新。用户点页码后，如果地址栏没变、浏览器前进后退失效、刷新丢失当前页，说明没处理好 history.pushState() 或路由参数。
常见错误现象：TypeError: Cannot read property 'addEventListener' of null（DOM 还没加载完就绑事件）、页码点击后重复请求、输入框焦点丢失。
- 监听页码点击时，确保事件委托到父容器（如
document.querySelector('.pagination').addEventListener('click', handler)），避免为每个<a></a>单独绑定 - 跳转前调用
event.preventDefault()，否则页面会跳到#锚点顶部 - 更新 URL 推荐用
URLSearchParams操作查询参数（如?page=5），别拼字符串，避免编码错误 - 服务端分页场景下，
<a href="/list?page=5"></a>是最简方案，无需 JS —— 别为了“动态”硬加 JS
CSS 对齐与可访问性陷阱
页码数字左右对齐看着整齐，但用 text-align: center 或 flex: 1 均匀分布，会导致小屏下文字挤成一团、省略号消失、当前页高亮区域错位。
更隐蔽的问题：用 font-size: 0 消除 <li> 间空格，结果所有页码贴在一起无法点击；用 pointer-events: none 禁用某页，却忘了同时加 tabindex="-1"，导致键盘用户卡住。
- 推荐用
display: flex+gap控制间距，兼容现代浏览器且语义清晰 - 当前页高亮不要只靠背景色，必须叠加
font-weight: bold或border，确保色盲用户可辨 - 移动端需保证最小点击区域 ≥ 44×44px，
<a></a>外层加padding，别只靠内边距撑开
页码不是装饰，它连着 URL、状态、键盘导航和屏幕阅读器。漏掉任一环，用户就可能卡在第一页翻不过去。
