页码导航需JavaScript控制数据切片与DOM更新，配合语义化HTML（如<nav aria-label="Pagination"><ol>）和CSS，确保无障碍、可打印及URL同步。
HTML 模板里加页码导航，不是加个标签就能用——必须靠 JavaScript 控制数据切片 + DOM 更新，再配语义化 HTML 结构和基础 CSS 样式。纯静态 HTML 无法自动翻页、无法响应点击、也无法同步 URL。
页码导航的 HTML 结构必须语义正确
别用 <div class="pagination"> 包一堆数字。浏览器和读屏软件认的是语义，不是样式。
-
<nav aria-label="Pagination">是必需外层容器，否则键盘用户无法跳过整组页码 - 内部必须用
<ol>（不是<ul>），因为页码是有序序列，<ol>天然支持计数器且语义准确 - 当前页项必须带
aria-current="page"，不能只靠class="active"—— 否则屏幕阅读器读不出“这是第 3 页” - 省略号
…必须是真实文本节点，写成<li>…</li>，不能用伪元素或 SVG 替代 - 上一页/下一页按钮得是
<a>或带role="link"的<button>，禁用时要移除href并设aria-disabled="true"
JavaScript 分页逻辑怎么写才不重复请求
常见错误是每次点页码都重新 fetch 全量数据，或没防抖导致连点触发多次请求。核心是把「页码变更」和「数据加载」解耦。
- 用
URLSearchParams读写查询参数：const page = parseInt(new URLSearchParams(location.search).get('page')) || 1，别手动解析location.search字符串 - 页码点击事件必须委托到父容器：
document.querySelector('.pagination').addEventListener('click', e => { if (e.target.matches('a[data-page]')) { ... } })，避免为每个<a>单独绑事件 - 跳转前调用
e.preventDefault()，否则页面会滚到顶部；更新 URL 用history.pushState()+location.replace()组合，保证后退可用 - 服务端分页时，只传
page和size参数；前端分页则用Array.prototype.slice()截取，注意边界检查：data.slice((page - 1) * size, page * size) - 禁用无效按钮：第一页时上一页
aria-disabled="true"，最后一页时下一页同理；DOM 上同时移除href，仅靠 CSS 灰色不可靠
为什么 window.print() 不显示你写的页码
你在页面里写的 <div class="page-number">第 2 页</div>，打印预览里根本不会出现在每张物理页右下角——因为浏览器打印页码是 UI 层功能，和 DOM 完全隔离。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 想实现可打印页码，唯一可靠方式是 JS 预先把长内容按高度切块：
document.querySelectorAll('p, h2, table')累计getBoundingClientRect().height，超限时插入<section class="print-page"> - 对应 CSS 必须用
break-before: always强制分页，再用position: absolute把页码文本钉在每块底部 -
@page { @bottom-center { content: "第 " counter(page) " 页"; } }在 Chrome 中基本不可用，Firefox 支持有限且无法控制起始值，别押注它 - 字体加载未完成就计算高度，会导致页码错位。要用
document.fonts.load()等字体就绪后再执行切页逻辑
前端分页性能卡顿怎么破
当列表项超过 500 条，直接 innerHTML = '' 拼接再赋值，会触发多次重排，滚动和点击明显延迟。
- 别用
innerHTML +=循环拼接页码按钮，每次赋值都重解析 DOM - 用
document.createDocumentFragment()离屏构建完整页码<ol>，最后一次性appendChild() - 页码项缩进靠 CSS 变量控制：
margin-left: calc(var(--level) * 1.5em)，别用 JS 动态设style.marginLeft - 监听点击用事件委托，别给每个页码
<li>单独绑addEventListener，内存占用低且移除方便 - 移动端 Safari 对
scrollIntoView({ behavior: 'smooth' })支持不稳定，降级方案是behavior: 'auto'或用window.scrollTo()手动算位置
真正难的不是生成“1 2 3 … 下一页”，而是让页码状态、URL、DOM 渲染、无障碍属性、打印行为全部对齐。任何一个环节断开，用户就会卡在某一页回不去，或者屏幕阅读器念不出当前页，又或者打印出来全是空白页。
