HTML分页代码怎么写 使用技巧与常见问题解析

做网页的时候，经常遇到数据太多一页放不下，这时候就得用分页。比如你打开一个商品列表页，几十上百个商品不可能全挤在一页，翻都翻不过来。分页就是把内容拆成好几页，用户点“下一页”或者直接选第几页，看起来清爽也方便。

分页的本质是链接跳转

很多人以为分页要靠JavaScript才能实现，其实最基础的HTML分页，压根不用JS。它本质就是一堆链接，每个链接指向不同的页面编号。比如当前是第1页，下一页就链接到page=2，就这么简单。

举个实际例子：你查搜索结果，网址可能是 example.com/list?page=2，后端接收到这个参数，就返回第二页的数据。前端只需要把这几个页码做成链接就行。

简单的HTML分页结构

下面是一个静态的分页栏示例，适合固定页数的情况：

<div class="pagination">
  <a href="?page=1" class="active">1</a>
  <a href="?page=2">2</a>
  <a href="?page=3">3</a>
  <a href="?page=4">4</a>
  <a href="?page=5">5</a>
  <a href="?page=2" class="next">下一页 &raquo;</a>
</div>

配合一点CSS，就能让页码排成一行，当前页高亮显示。class="active" 可以用来标出当前所在页，提升用户体验。

带首页、末页和省略号的进阶写法

当总页数很多时，全列出来会太长。常见做法是只显示当前页前后几页，中间断开的地方用省略号代替。

比如你现在在第5页，总共10页，可以这样展示：

<div class="pagination">
  <a href="?page=1">首页</a>
  <a href="?page=4">上一页</a>
  <a href="?page=3">3</a>
  <a href="?page=4">4</a>
  <a href="?page=5" class="active">5</a>
  <a href="?page=6">6</a>
  <a href="?page=7">7</a>
  <span>...</span>
  <a href="?page=10">末页</a>
</div>

这种结构虽然还是纯HTML，但更贴近真实项目中的用法。实际开发中，这些链接通常由后端模板动态生成，比如PHP、JSP或Node.js输出对应的HTML片段。

样式别忘了加

光有结构不行，还得好看。简单加点CSS就能让分页栏像模像样：

.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination a {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 4px;
  border: 1px solid #ddd;
  color: #007cba;
  text-decoration: none;
  border-radius: 4px;
}

.pagination a.active {
  background-color: #007cba;
  color: white;
  border: 1px solid #007cba;
}

.pagination a.next, .pagination a.prev {
  color: #666;
}

这样一套下来，分页功能就有了，用户点着也顺手。

说到底，HTML分页代码并不复杂，核心就是标签拼接不同的页码参数。真正的难点在后端如何按页取数据，前端只要把链接写对就行。新手先从静态分页做起，搞明白逻辑再上手动态加载也不迟。