html中如何分页_HTML内容分页（前端/后端）实现与控制方法

<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>

SELECT * FROM articles 
LIMIT 10 OFFSET 20; -- 第3页，每页10条