当前位置：首页 > 文章列表 > 文章 > 前端 > HTML显示1-10/100项文本标注教程

HTML显示1-10/100项文本标注教程

2026-04-07 09:33:24 0浏览收藏

本文深入解析了如何用HTML、CSS和JavaScript精准实现“显示1-10/100项”这类分页范围文本的开发实践，强调其表面简单实则需兼顾动态计算逻辑（如起始/结束项的边界处理）、DOM高效更新（优先使用textContent而非innerHTML）、可访问性设计（避免滥用ARIA干扰屏幕阅读器，仅在总数首次加载时谨慎使用aria-live）以及响应式排版（通过white-space:nowrap、ASCII斜杠、Flex布局控制等解决断行与对齐难题），帮助开发者避开常见陷阱，确保显示、数据、体验三者严丝合缝。

HTML怎么标注分页控件当前范围_HTML“显示1-10/100项”文本【教程】

怎么用 HTML + CSS 实现“显示1-10/100项”这类分页范围文本

直接用普通或

包裹文字即可，不需要特殊语义标签或 ARIA 属性——浏览器不识别“分页范围”这个概念，它只是纯展示文本。

关键在于：动态内容得靠 JS 更新，HTML 本身只负责结构占位。常见错误是试图用

或

正确写法：显示1-10/100项
拆开写多个是为了方便单独样式控制（比如高亮当前范围、加粗总数）
避免把整个字符串塞进一个，否则后续 JS 更新某一段（如只改“1-10”）就得反复解析字符串

JS 更新分页范围时容易错的三个地方

多数人卡在计算逻辑和 DOM 同步上，不是语法问题，而是边界没想清。

起始项 = (currentPage - 1) * pageSize + 1，但 currentPage 从 1 开始还是从 0 开始？必须和后端/分页组件对齐，否则显示 1-10 却实际取了第 2 页数据
结束项 = Math.min(currentPage * pageSize, total)，漏掉 Math.min 就会在最后一页显示 “91-100/100” 变成 “91-110/100”
更新 DOM 时别用 innerHTML 全量重写，优先用 textContent 改单个，避免事件监听器丢失或 XSS 风险