HTML分页导航必须用，禁用或；当前页用aria-current="page"标记且无href，其他页用带href的，禁用状态需移除href并加aria-disabled="true"。
HTML分页导航必须用 <nav><ol></ol></nav>，不能用 <ul></ul> 或 <div><p>语义错误会直接导致键盘 Tab 顺序错乱、屏幕阅读器读成“一堆数字”、SEO 无法识别页码序列。<br><code><ol></ol> 表明页码有明确顺序（1→2→3…），<ul></ul> 是无序的，<div> 则完全无语义。<br><code><nav></nav> 必须带 aria-label="页码导航"，否则辅助技术无法跳过整组页码。
常见错误写法：
<div class="pagination"><span>1</span><span>2</span></div>正确结构骨架：
<nav aria-label="页码导航">
<ol>
<li><a href="/list?page=1">1</a></li>
<li><a href="/list?page=2">2</a></li>
<li aria-current="page">3</li>
</ol>
</nav>当前页怎么标记？只加 class="active" 不够
aria-current="page" 是强制要求，不是可选项。仅靠 CSS 类名，屏幕阅读器不会播报“这是第 3 页”，只会读“3”。
必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 当前页的
<li>内不包含<a></a>标签 - 当前页的
<li>直接写数字文本，并设aria-current="page" - 其他页码一律用带
href的<a></a>，不能是<button></button>或<span></span>
禁用状态（如首页时的“上一页”）要移除 href，并加 aria-disabled="true"，不能只靠 CSS 灰色处理——键盘用户仍能聚焦并按空格触发。
页码太多怎么截断？别硬循环渲染全部数字
总页数超 50 时，全量渲染 <li> 会导致 DOM 膨胀、卡顿、可访问性崩溃。
真实场景要用函数动态生成可见页码段，例如：
function getPageNumbers(currentPage, totalPages, maxVisible = 5) {
if (totalPages === 0) totalPages = 1;
const pages = [];
const half = Math.floor(maxVisible / 2);
<p>let start = Math.max(1, currentPage - half);
let end = Math.min(totalPages, currentPage + half);</p><p>if (start === 1) {
end = Math.min(totalPages, maxVisible);
} else if (end === totalPages) {
start = Math.max(1, totalPages - maxVisible + 1);
}</p><p>for (let i = start; i <= end; i++) pages.push(i);
if (start > 1) pages.unshift('');
if (end < totalPages) pages.push('');</p><p>return pages;
}返回数组类似 [1, '', 3, 4, 5, '', 100]，渲染时判断：
-
typeof item === 'number'→ 渲染<a href="..."></a> -
item === ''→ 渲染<li class="ellipsis">…</li>
URL 怎么拼？别手动拼 "?page=" + p
硬拼字符串会出三类问题：中文参数未编码、已有查询参数时多出第二个 ?、特殊字符（如 #）截断 URL。
必须用 URL 和 URLSearchParams：
function buildPageUrl(targetPage, config = {}) {
const { pageKey = 'page', sizeKey = 'size', pageSize = 10 } = config;
const url = new URL(window.location.href);
url.searchParams.set(pageKey, targetPage);
url.searchParams.set(sizeKey, pageSize);
return url.toString();
}调用 buildPageUrl(7, { pageKey: 'pageNum' }) 会自动保留原路径和所有已有参数，生成类似 /list?category=tech&pageNum=7&size=10。
最易被忽略的是：输入框回车跳转时，必须 event.preventDefault()，否则某些浏览器会把表单提交当整页刷新，报 404 或白屏。
