HTML分页导航栏如何布局？数字翻页列表制作-html教程-PHP中文网

HTML分页导航必须用，禁用或；当前页用aria-current="page"标记且无href，其他页用带href的，禁用状态需移除href并加aria-disabled="true"。

html分页导航栏如何布局？数字翻页列表制作

HTML分页导航必须用，不能用或

语义错误会直接导致键盘 Tab 顺序错乱、屏幕阅读器读成“一堆数字”、SEO 无法识别页码序列。
 表明页码有明确顺序（1→2→3…）， 是无序的， 则完全无语义。
 必须带 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”。
必须同时满足：

当前页的 
 内不包含 @#@#@#@#@#@#@#@#@#@0


item === '' → 渲染 
…


URL 怎么拼？别手动拼 "?page=" + p

硬拼字符串会出三类问题：中文参数未编码、已有查询参数时多出第二个 ?、特殊字符（如 #）截断 URL。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										
必须用 URL 和 URLSearchParams：
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  1) pages.unshift('');
if (end </p><p>return pages;
}</p>
调用 buildPageUrl(7, { pageKey: 'pageNum' }) 会自动保留原路径和所有已有参数，生成类似 /list?category=tech&pageNum=7&size=10。
最易被忽略的是：输入框回车跳转时，必须 event.preventDefault()，否则某些浏览器会把表单提交当整页刷新，报 404 或白屏。
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();
}