在 HTML 中实现分页效果可以使用 CSS 分页媒体类型 @media print，该媒体类型可以在打印时将文档自动分成多个页面，并在每个页面底部添加页码。另外，如果需要在网页中实现分页效果，可以使用 JavaScript 实现，例如在一个固定高度的容器内显示一定数量的内容，并在容器底部添加分页导航，点击导航按钮可以切换显示内容。
以下是一个使用 CSS 分页媒体类型 @media print 实现分页效果的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页效果示例</title>
<style>
@media print {
.page {
page-break-after: always;
}
}
</style>
</head>
<body>
<div class="page">
<h1>第一页</h1>
<p>这是第一页的内容。</p>
</div>
<div class="page">
<h1>第二页</h1>
<p>这是第二页的内容。</p>
</div>
<div class="page">
<h1>第三页</h1>
<p>这是第三页的内容。</p>
</div>
</body>
</html>在上面的示例中，@media print 媒体类型中的 .page 样式设置了 page-break-after: always;，表示在该元素之后始终插入分页符。因此，当将该页面打印时，每个 .page 元素将被自动分成一页，并在底部添加页码。
如果需要在网页中实现分页效果，可以使用 JavaScript 实现，例如使用 overflow: auto 将内容限制在容器内，并在容器底部添加分页导航。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页效果示例</title>
<style>
.container {
height: 200px;
overflow: auto;
}
.page-nav {
margin-top: 10px;
text-align: center;
}
.page-nav button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>这是第一页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第三页的内容。</p>
<p>这是第四页的内容。</p>
<p>这是第五页的内容。</p>
</div>
<div class="page-nav">
<button>第一页</button>
<button>第二页</button>
<button>第三页</button>
<button>第四页</button>
<button>第五页</button>
</div>
</body>
</html>在上面的示例中，.container 样式设置了容器的高度为 200 像素，并使用 overflow: auto 将内容限制在容器内。.page-nav 样式设置了按钮样式
正文完