分页按钮禁用必须用disabled属性并拦截逻辑，而非仅CSS；a标签需带有效href和rel="prev/next"以支持SEO和可访问性；URL变化用a，不变用button；须校验currentPage和totalPages边界并隔离状态。
上一页/下一页按钮何时该禁用
按钮禁用不是靠视觉隐藏或加 opacity，而是靠 disabled 属性 + 逻辑拦截。否则键盘用户仍可聚焦、回车触发，屏幕阅读器也会误读为“可操作”。
常见错误是只改 class（比如加 disabled 类），却不设 disabled 属性，也不阻止 click 事件。
- 当前页为第 1 页时，
prev按钮必须设disabled="true"，且绑定的 click 回调里不做任何处理 - 当前页为最后一页时，
next按钮同理 - 禁用状态要同步更新 DOM 属性和事件行为，不能只靠 CSS 判断
rel="prev"/rel="next" 必须写在 a 标签上，且 href 有效
如果用 <a> 实现分页跳转，rel="prev" 和 rel="next" 是 SEO 和浏览器前进/后退栈的关键信号——但它们只在 <a> 上生效，<button> 写了也没用。
更重要的是：href 值不能是 # 或 javascript:void(0)，否则搜索引擎认为无真实导航目标，rel 属性会被忽略。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<a href="/list?page=3" rel="prev">上一页</a> - 若用前端路由（如 History API），
href应指向语义化 URL，而非空值 - 服务端渲染场景下，
rel必须随当前页动态生成，不能静态写死
用 button 还是 a？取决于是否改变 URL
分页本质是「导航」还是「交互动作」，决定了标签选型。这不是样式问题，是语义与可访问性问题。
- URL 变化（如跳转到
/list?page=2）→ 必须用<a>，配合rel和有效href - URL 不变（纯前端数据切换，AJAX 加载）→ 用
<button>，并确保aria-current和aria-disabled正确设置 - 混用风险：用
<a href="#">+ JS 阻止默认行为，既破坏语义，又让右键“在新标签打开”失效
currentPage 和 totalPages 的边界校验不能省略
很多分页组件崩溃，不是因为逻辑错，而是因为没做输入校验。比如后端返回 totalPages: 0 或 currentPage: -1，前端直接渲染就会出错。
- 初始化时检查：
currentPage = Math.max(1, Math.min(currentPage, totalPages)) - 接收新数据后重新计算边界，尤其注意
totalPages可能变为 0（空列表） - 当
totalPages <= 1时，应整体隐藏分页栏，而不是只禁用按钮
最易被忽略的点：分页组件常被复用在多个列表区域，但 currentPage 状态没隔离，导致一个列表翻页影响另一个——别共用同一个变量。
