html无内置页码功能，所有页码均为js分页+css渲染的假分页；window.print()不显示自定义页码因浏览器页码属ui层，非dom部分；真分页需后端或pdf导出。
HTML 本身没有内置页码功能，所有“页码”都是靠 JavaScript 控制内容分页 + CSS 渲染出来的假分页，真分页得后端配合或 PDF 导出。
为什么 window.print() 打印时页码不显示？
浏览器打印预览里能看到页码（如“第 1 页 / 共 3 页”），但那是浏览器 UI 自带的，不是网页 DOM 的一部分。你写的 <div>第2页</div> 不会自动出现在每一页右下角。
- 纯 CSS 的
@page规则只支持:first、:left、:right伪类，且仅能用在margin区域插入内容，不支持动态数字（counter()在部分浏览器中不可靠） - Chrome 和 Edge 对
@page :nth()完全不支持；Firefox 支持有限，且不能绑定 JS 变量 - 想在每页底部显示“第 X 页”，必须用 JS 把长内容切块、生成多个
<section class="page"></section>，再靠 CSS 强制分页
用 CSS break-before + JS 分页实现“可打印页码”
这是目前最可控、兼容性最好的方案：把内容按高度切分成“页”，每页一个容器，再用 CSS 告诉浏览器“这里必须分页”。
- 先用
getBoundingClientRect()或固定高度（如960px对应 A4 高度）估算每页容纳多少 DOM 节点 - 遍历内容节点，累计高度，超限时插入新的
<div class="page">，并写入页码文本（如 <code><div class="page-number">第 3 页</div>） - 关键 CSS：
.page { break-before: always; height: 960px; position: relative; }，.page-number { position: absolute; bottom: 20px; right: 20px; } - 注意：字体渲染差异会导致实际高度浮动，建议加 2% 余量，或用
document.fonts.load()等字体加载完成后再计算 - 必须写在
@page规则里：@page { @top-center { content: "第 " counter(page) " 页"; } } -
counter(page)是浏览器内置计数器，不能重置或跳变，起始值由文档结构决定（通常从 1 开始） - Firefox 支持最好；Chrome 115+ 开始支持
@top-center，但不支持自定义起始页码（比如想从第 5 页开始标号，做不到） - 别试图在页面 DOM 里用
counter()显示当前页——它和打印分页不是同一套机制，数值对不上
用 counter-reset 和 counter-increment 做纯 CSS 页码（仅限打印）
如果你只要打印时有页码、不关心屏幕显示，可以试试 CSS 计数器，但它只对 @page margin 区生效，且行为不稳定。
立即学习“前端免费学习笔记（深入）”；
真正难的不是生成页码，而是让“第 N 页”和实际物理打印页一一对应。内容字体、行高、图片尺寸稍有变化，整页布局就偏移，页码就错位。所以生产环境建议：要么交给后端生成 PDF（用 Puppeteer / WeasyPrint），要么接受 JS 分页的“近似准确”。
