纯HTML可实现基础标签导航，但高亮当前标签、热度排序、关联文章列表等功能必须引入JavaScript；最简无JS方案是为每个标签创建独立路径的<a>链接，如/tags/javascript，由静态站点生成器构建对应页面。
直接用 HTML + 静态数据就能做出可用的话题标签页面，但真要支持点击跳转、高亮当前标签、按热度排序或关联文章列表，必须引入少量 JavaScript 控制状态，纯 HTML 无法维持“当前选中”这类交互状态。
如何用 <a> 实现基础标签导航（无 JS）
最简方案就是把每个话题做成普通链接，指向类似 /tags/javascript 这样的独立页面。HTML 本身不处理“聚合”，它只负责呈现和跳转：
<div class="tag-list"> <a href="/tags/html" class="tag">#html</a> <a href="/tags/css" class="tag">#css</a> <a href="/tags/javascript" class="tag">#javascript</a> </div>
这种写法适合静态站点生成器（如 Jekyll、Hugo），每个 /tags/xxx 路径由构建时生成。注意：href 值必须真实存在，否则 404；不要用 #html 这种 hash 链接假装是标签页——它不会触发页面重载，也不被搜索引擎识别为独立话题页。
为什么不能只靠 data-* 属性 + CSS 实现“选中态”
有人试图这样写：<a href="#" data-tag="react" class="tag">#react</a>，再用 CSS 写 [data-tag="react"]:active 或 .tag.active。这行不通，因为：
立即学习“前端免费学习笔记（深入）”；
-
:active只在鼠标按下瞬间生效，松开就消失 - CSS 无法读取 URL 中的标签名（比如
/tags/react里的react），所以没法自动加active类 - 没有 JS，浏览器不知道“当前页面对应哪个标签”，也就无法高亮
用几行 JavaScript 绑定当前标签（推荐最小实现）
在话题聚合页（如 /tags/react）里，加一段脚本提取路径中的标签名，并高亮对应链接：
<script>
const path = window.location.pathname;
const tag = path.split('/').filter(Boolean).pop(); // 得到 'react'
if (tag) {
document.querySelectorAll('.tag-list a').forEach(el => {
if (el.href.includes(`/tags/${tag}`)) {
el.classList.add('active');
}
});
}
</script>关键点：
- 别用
window.location.hash，它不可靠，且不利于 SEO 和分享 - 确保所有标签链接的
href格式统一，例如全用/tags/xxx，不要混用/topic/xxx - 如果服务端渲染（如 Next.js、Nuxt），优先在服务端注入
active类，避免水合后闪烁
聚合内容列表怎么组织才不卡顿
标签页的核心是展示“打过这个标签的文章”。如果硬塞几十篇进一个 HTML 文件，首屏加载慢、维护困难。更合理的做法是：
- 服务端：用数据库查出该标签下最多 10–20 篇文章，生成静态 HTML 片段（推荐）
- 客户端：用
fetch加载 JSON，再用 JS 拼 HTML —— 仅当页面已存在大量其他 JS 且你控制得了缓存时才考虑 - 绝对不要在 HTML 里手写
<article>...</article>列表，每次增删文章都要改 HTML
真正容易被忽略的是分页逻辑：纯静态页做不到“加载更多”，如果文章数超 20 篇，/tags/react?page=2 必须由服务端或构建工具生成对应 HTML，否则用户点不了下一页。
