在html5中制作带页码的文档，核心思路是利用CSS计数器记录章节或页面顺序，再通过伪元素将页码渲染到页面上。这种方式不依赖后端，纯前端就能完成页码显示与样式调整。
一、html5文档结构准备
先写一个简单的html5文档容器，每一块内容用section包裹，后面我们会用CSS给这些块自动编页码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带页码文档</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="doc">
<section class="page">第一页内容</section>
<section class="page">第二页内容</section>
<section class="page">第三页内容</section>
</div>
</body>
</html>
二、用CSS计数器插入页码
通过counter-reset初始化计数器，用counter-increment在每块递增，然后用content输出页码。
/* style.css */
.doc {
counter-reset: pageNum; /* 初始化页码计数器 */
}
.page {
counter-increment: pageNum; /* 每页加1 */
position: relative;
padding-bottom: 40px;
}
.page::after {
content: "第 " counter(pageNum) " 页"; /* 显示页码 */
position: absolute;
bottom: 10px;
right: 20px;
font-size: 14px;
color: #666;
}
三、页码样式自定义
你可以改颜色、字体、位置，甚至把页码放中间或加总页数。下面例子把页码放到底部居中并标成蓝色。
.page::after {
content: counter(pageNum);
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
font-family: "Microsoft YaHei", sans-serif;
font-size: 12px;
color: #1a73e8;
letter-spacing: 1px;
}
常见自定义需求
- 改字号：调整font-size即可
- 改位置：用left、right、bottom控制
- 加总页数：用css不能算总页数，可借助js获取section数量补上
四、打印时显示页码
如果要在打印件上带页码，用@media print包住样式，保证屏幕预览和纸面一致。
@media print {
.page::after {
position: fixed;
bottom: 10mm;
right: 10mm;
}
}
五、用js补总页数
纯CSS无法得知一共几页，可用js在页码后加总页数。注意函数调用写成totalPages()而不是标签。
// script.js
function totalPages() {
return document.querySelectorAll('.page').length;
}
document.querySelectorAll('.page').forEach(function(el, i) {
el.setAttribute('data-total', totalPages());
});
配合CSS用attr()取出总数：
.page::after {
content: counter(pageNum) " / " attr(data-total);
}
小结：html5插入带页码文档并不复杂，掌握CSS计数器与伪元素就能完成显示和样式自定义，打印需求再加media query即可。