需借助CSS分页媒体查询与伪元素或JavaScript模拟分页：一、@page规则适用于打印场景；二、CSS counter()适合静态文档；三、JavaScript实现动态分页；四、Grid/Flexbox模拟翻页视图。
如果您希望在HTML5页面中插入带有页码的文档内容，并实现页码的动态显示与样式自定义，则需借助CSS分页媒体查询与伪元素配合，或通过JavaScript模拟分页逻辑。以下是实现该效果的多种方法：
一、使用CSS @page 规则与 :first、:left、:right 伪类
CSS3引入了@page规则，专用于打印样式中的分页控制，可在打印输出时自动添加页码。该方法适用于导出PDF或浏览器打印场景，不适用于屏幕实时显示，但语义规范且无需脚本干预。
1、在
2、为body或容器元素设置page-break-before: always或page-break-after: always以强制分页。
立即学习“前端免费学习笔记（深入）”；
3、使用@page :first { @top-center { content: "第 " counter(page) " 页"; } }指定首页页眉页码位置。
4、通过@page :left与@page :right分别定义左右页的页码对齐方式，例如左页右对齐、右页左对齐。
5、为页眉/页脚区域添加margin-top或margin-bottom确保不被内容遮挡，注意：此方法仅在打印预览或调用window.print()时生效。
二、利用CSS counter()函数结合section元素手动分页
通过为每个逻辑“页”包裹
1、在外部
2、为每个
3、在section.page::before中写入content: "第 " counter(page) " 页"，并设置display: block与text-align控制位置。
4、为页码文本添加font-size、color、margin等样式，确保section之间无浮动或inline布局干扰计数器递增顺序。
5、若需页码居中于底部，可将页码置于section内部
三、JavaScript动态分页并注入页码DOM节点
当文档内容为长文本或富媒体流，需按高度或字符数自动切分为“页”，并实时渲染带页码的容器时，必须使用JavaScript计算分页点并插入编号节点。该方法灵活可控，支持响应式重排页码。
1、获取原始内容容器（如
2、创建空容器（如
3、设定每页最大高度（如600px）或字数阈值，循环截取内容并封装进
4、为每个page-wrapper内部插入
5、绑定resize事件监听，在窗口尺寸变化时重新执行分页逻辑，务必使用requestAnimationFrame避免高频重排导致卡顿。
四、使用CSS grid或flexbox模拟分页视图并叠加页码层
针对单页应用中需滑动翻页的交互场景，可将整篇文档划分为多个grid区域或flex项目，每个项目代表一页，页码作为绝对定位层覆盖在右下角。该方法视觉表现强，适合演示型文档。
1、将文档内容拆分为多个
2、父容器设为display: grid，grid-template-columns: repeat(auto-fit, minmax(800px, 1fr))；启用响应式列数。
3、为每个article设置position: relative，并在其内部添加。
4、.overlay-page-num设为position: absolute、right: 20px、bottom: 20px、font-weight: bold。
5、通过CSS选择器article:nth-child(1) .overlay-page-num::before { content: "第 1 页"; }逐个定义页码文本，注意：此方式页码为静态值，需配合JS才能动态更新。
