分页通过JavaScript或后端语言实现，前端分页适用于小数据量，使用JS动态控制内容显示；后端分页通过数据库查询（如LIMIT和OFFSET）返回指定页数据，适合大数据集，提升性能与用户体验。
在HTML中实现内容分页，通常不是由HTML本身直接完成的，而是通过前端JavaScript或后端语言（如PHP、Python、Node.js等）结合数据库与逻辑控制来实现。分页的核心目标是将大量内容拆分成多个页面展示，提升加载速度和用户体验。
前端实现分页
适用于数据量较小、已全部加载到页面的情况，比如静态文章、搜索结果预加载等。
使用JavaScript可以对内容进行动态分割和显示。
- 将内容按页大小（如每页5条）切分，存储在数组中
- 通过点击“上一页”、“下一页”或页码按钮切换显示
- 隐藏当前页外的内容，只展示当前页数据
<div id="content">
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
<p>第6段</p>
</div>
<button onclick="prevPage()">上一页</button>
<span id="pageInfo"></span>
<button onclick="nextPage()">下一页</button>
<p><script>
const items = document.querySelectorAll('#content p');
const pageSize = 3;
let currentPage = 1;
const totalPages = Math.ceil(items.length / pageSize);</p><p>function showPage(page) {
items.forEach((item, index) => {
const start = (page - 1) * pageSize;
const end = start + pageSize;
item.style.display = (index >= start && index < end) ? 'block' : 'none';
});
document.getElementById('pageInfo').textContent = <code>第 ${page} 页，共 ${totalPages} 页</code>;
}</p><p>function nextPage() {
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage);
}
}</p><p>function prevPage() {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
}</p><p>showPage(currentPage); // 初始化显示第一页
</script></p>后端实现分页
适用于数据量大、从数据库动态获取内容的场景，如新闻列表、商品信息等。由服务器决定返回哪一页的数据，减少前端压力。
立即学习“前端免费学习笔记（深入）”；
- 前端发送请求时携带页码（page）和每页数量（size）
- 后端根据参数查询数据库（如使用LIMIT和OFFSET）
- 返回当前页的数据片段，前端渲染
SELECT * FROM articles LIMIT 10 OFFSET 20; -- 第3页，每页10条
对应URL可能为：/articles?page=3&size=10
后端接收到参数后计算OFFSET = (page - 1) * size，并执行查询。
分页控制建议
- 前端分页适合小数据量，响应快但不利于SEO
- 后端分页更高效，支持大数据集，推荐用于生产环境
- 可结合前后端：首次加载前几页，后续按需请求
- 添加页码跳转、首页/尾页按钮提升体验
- 注意边界处理：页码超出范围时禁用按钮或自动调整
基本上就这些。分页的关键在于合理拆分数据并控制显示逻辑，根据实际需求选择合适的方式。
