分页链接的 HTML 结构必须包含语义化 <nav></nav> 和 aria-label
浏览器和读屏软件靠结构识别“这是分页”，不是靠样式或文字。光写几个 <a></a> 标签，对无障碍和 SEO 都是无效的。
常见错误现象：用 <div> 包一堆数字链接，或者只加 <code>class="pagination" 就以为完事了。
- 必须用
<nav aria-label="页码导航"></nav>包裹整个分页区域 - 当前页用
<span aria-current="page">2</span>，不能用<a></a>（否则会误导用户可点击） - 上一页/下一页链接要带
rel="prev"/rel="next"，利于爬虫理解顺序 - 禁用状态不用移除链接，而是加
aria-disabled="true"+tabindex="-1"，保持键盘可访问性
用 <ul></ul> 实现分页布局？别在 HTML 里硬写
HTML 是内容层，不是样式层。很多教程教你在 HTML 里写 <ul><li><a>1</a></li></ul>，这看似“结构清晰”，实则埋雷。
问题在于：<ul></ul> 暗示项目间有并列、无序关系，但分页是有严格线性顺序的（第1页 → 第2页 → …），且实际 DOM 中可能动态插入省略号 <span>…</span> 或跳转框，<li> 会破坏语义一致性。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
<nav></nav>直接包裹<a></a>、<span></span>、<button></button>等，按需组合 - 如果真要用列表语义，应选
<ol></ol>（有序列表），但多数场景没必要 - CSS 用
display: flex或inline-flex排布即可，无需依赖<li>的默认 margin
href 值写绝对路径还是相对路径？关键看是否支持 JS 无刷新
后端渲染页面时，分页链接的 href 必须指向真实 URL；前端用 JS 做无刷新分页时，href 仍要写对——不是摆设，而是为未启用 JS 的用户、爬虫、以及前进/后退行为兜底。
- 服务端分页：
href="/search?q=foo&page=3"（含完整查询参数，避免丢失条件） - 前端接管分页：仍保留正确
href，JS 拦截点击后调用event.preventDefault()，再发 API - 禁止写
href="#"或href="javascript:void(0)"—— 这会让键盘用户无法触发，且破坏 history - 注意 URL 编码：如果搜索词含中文或特殊符号，
href中必须已编码（如%E4%BD%A0%E5%A5%BD），否则点击会 400
移动端分页按钮太小？不是加 font-size 就能解决
触摸目标尺寸不够，iOS 和 Android 都会自动放大或误触。单纯调大文字，按钮物理尺寸未必达标。
- 最小触摸目标建议 ≥ 44×44px，用
min-width+min-height保证，别只靠 padding - 避免相邻分页项间距过小，
gap: 8px或margin-inline: 4px更可靠 - 用
@media (hover: hover)区分悬停态和触摸态，别让桌面用户看到奇怪的“激活阴影”残留在手机上 - 如果页码太多，必须做折叠（如显示 1 … 5 6 7 8 9 … 20），否则横向滚动或换行都会破坏操作流
最常被忽略的一点：分页组件没考虑焦点管理。JS 切换页码后，焦点没移到新内容区，键盘用户得手动 tab 十几次才能继续操作。
