分页器必须用a标签而非button，当前页加aria-current="page"，URL构造用URLSearchParams，输入框需防默认提交并校验数值，页码范围须动态生成，整体包裹在带aria-label的nav中。
分页器 HTML 结构必须用 a 标签，别用 button
用户点页码就该跳转到新 URL，这是语义和可访问性的底线。用 button 搭分页器，哪怕绑了 onclick，也等于主动放弃键盘导航、屏幕阅读器识别和浏览器原生前进/后退记忆。常见错误是写成：
<button onclick="location.href='/list?page=2'">2</button>
正确做法是直接用带 href 的 a 标签，当前页也别禁用——而是移除 href 属性或设为 # 并加 aria-current="page"：
<a href="/list?page=1" aria-current="page">1</a><a href="/list?page=2">2</a>
- 所有页码链接必须指向完整、合法的 URL，比如
/list?page=3或?page=3&size=20 - 如果当前页是第 1 页，
/list?page=1这个链接依然要保留，不要删掉或写成javascript:void(0) - 上一页/下一页按钮也必须是
a，不是button；若不可用（如首页点“上一页”），可移除href并加aria-disabled="true"
URL 参数拼接必须用 URL 和 URLSearchParams
硬拼字符串如 "?page=" + p + "&size=" + s 极易出错：参数已存在时重复加 ?、中文没编码、特殊字符破坏 URL、旧参数被覆盖。浏览器原生 API 能自动处理这些：
function buildPageUrl(targetPage, config = {}) {<br> const { pageKey = 'page', sizeKey = 'size', pageSize = 10 } = config;<br> const url = new URL(window.location.href);<br> url.searchParams.set(pageKey, targetPage);<br> url.searchParams.set(sizeKey, pageSize);<br> return url.toString();<br>}
- 调用
buildPageUrl(5, { pageKey: 'pageNum' })会自动适配后端接口，生成类似/list?pageNum=5&size=10的 URL - 如果当前 URL 是
/list?category=tech，结果会是/list?category=tech&pageNum=5&size=10，不用手动判断?还是& - 避免直接操作
window.location.search字符串——它不处理编码，也不去重，容易埋下 400 或 404 隐患
输入框跳转必须校验并阻止默认提交
带跳转输入框的分页器，回车后页面白屏或跳 ?page=NaN 是典型症状。根源在于没拦截表单行为、没过滤非法输入。
立即学习“前端免费学习笔记（深入）”；
- 给
input绑定keydown事件，检测Enter键（event.key === 'Enter'） - 必须调用
event.preventDefault()，否则某些浏览器会把input当作表单控件提交，导致整页刷新失败 - 取值后立刻用
parseInt(input.value, 10)转数字，并检查是否有效：const p = Math.max(1, parseInt(input.value, 10) || 1) - 建议加最大页数限制，比如已知总页数是 100，就别让输 999999 —— 后端可能拒绝或超时，前端也应提前拦截
省略号和页码范围得靠 JS 动态生成，不能写死 HTML
静态写 <a>1</a><a>2</a><a>...</a><a>99</a><a>100</a> 看似省事，实际一换数据就失效。真实场景中页码范围随总条数、每页大小、当前页动态变化。
- 计算逻辑示例：当前页
currentPage = 5，总页数totalPages = 100，显示 5 个页码，则应渲染 [3, 4, 5, 6, 7]，前后补省略号 - 生成页码数组后，再遍历拼
a标签，不要手写一堆固定a标签再用 CSS 显隐控制 - 当前页链接需加
aria-current="page"，便于无障碍工具识别，CSS 也可据此高亮：a[aria-current="page"] { font-weight: bold; } - 注意：页码容器本身用
nav包裹，并加aria-label="分页导航"，这是可访问性基本要求
a 标签，而是让页码生成逻辑和 URL 构造逻辑在各种参数组合（已有查询参数、不同后端字段名、输入框边界值）下都稳定输出合法 URL —— 这里漏一个 encodeURIComponent 或少一次 searchParams.delete，线上就可能静默失败。 
