纯 HTML + CSS 能实现静态翻页导航，需严格遵循语义化结构（nav+ul+li）、路径规范（根路径或base标签）、当前页双标记（class="active"+aria-current="page"）及响应式布局。
纯 HTML + CSS 能否实现翻页导航
能，但仅限静态场景——比如文档页、单页多区块切换、预渲染的博客归档页。它不依赖 JS，加载快、无执行风险，适合对 SEO 和可访问性有要求的内容页。关键不是“能不能写”，而是“写完能不能被正确识别和使用”。
-
nav必须包裹整个分页区域，配合aria-label="分页导航"，否则屏幕阅读器会把它当成普通文字流 - 页码必须用
ul+li列表结构，不能用一堆span或div拼凑——否则键盘 Tab 焦点顺序错乱，且无法语义化表达“这是页码序列” - 当前页必须用
class="active"+aria-current="page"双标记，只加一个 CSS 类，辅助工具就感知不到“这是当前页” - 上一页/下一页链接要带
rel="prev"/rel="next"，搜索引擎靠这个理解内容顺序，影响收录权重
静态模板里怎么处理“当前页高亮”
纯 HTML 模板没有运行时环境，window.location.pathname 判断完全无效。硬编码 class="active" 到所有页面的同一个链接上，结果就是每页都高亮首页。
- 每个 HTML 文件里，只给指向自身的那个
a标签加class="active"和aria-current="page" - 例如在
/blog/page/2.html中，<a href="/blog/page/2.html" class="active" aria-current="page">2</a> - 如果用 Hugo/Jekyll 等静态生成器，用模板变量动态注入，比如
{{ if eq .Page.Number 2 }}class="active" aria-current="page"{{ end }} - 千万别在 CSS 里写
nav a:hover { color: red; }冒充当前页——悬停不是状态，用户根本不知道自己在哪一页
为什么不能用 ../ 或相对路径写分页链接
分页链接一旦写成 href="page/3.html" 或 href="../page/3.html"，在子目录页面（如 /blog/post/a.html）里点击就会跳到错误路径，404 是常态。这不是 bug，是浏览器路径解析规则严格执行的结果。
- 所有站内分页链接必须用根路径：
href="/blog/page/3.html"，确保无论从哪一页出发，目标地址都一致 - 若站点部署在子路径（如
https://example.com/docs/），必须在<head>中加<base href="/docs/">，否则根路径会指向域名根 - 不要用 JS 拼接路径，比如
"/blog/page/" + (currentPage + 1) + ".html"——模板阶段就该确定好，JS 运行时再算容易出错且不可缓存
移动端折叠分页栏要不要加 JS
不需要。分页导航项通常不超过 10 个，横向排列在小屏上溢出，直接用 CSS 媒体查询收为垂直列表即可，无需 JS 控制显隐或添加 hamburger 按钮。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
nav ul { display: flex; gap: 0.75rem; } - 移动端：
@media (max-width: 480px) { nav ul { flex-direction: column; gap: 0.5rem; } } - 禁用
white-space: nowrap在nav上，否则小屏会强制横向滚动，破坏浏览体验 - 如果真要支持“更多页码”省略号逻辑（如 1 2 … 8 9 10），那才需要 JS 动态裁剪；纯静态模板建议固定显示前后各两页 + 当前页，比如 1 2 3 4 5 —— 更可控、更易测试
最容易被忽略的是路径一致性与当前页标记的耦合关系：它不报错、不警告，只在你改了文件结构或换了部署路径后，某天发现第 3 页的“上一页”链向了 404 页面，而你得逐个检查每个 HTML 文件里的 href 和 class="active" 是否匹配。
