可用纯 HTML+CSS 实现静态标签页：用 <a href="#id"> 锚点链接跳转至对应 <section id="id">，配合 :target 伪类显示当前内容并高亮导航，无需 JS、SEO 友好、URL 可分享。
怎么用纯 HTML + CSS 实现静态标签页（无 JS）
纯 HTML 做不了“切换”效果，但能实现多个标签页的静态跳转结构——本质是用 <a> 链接 + id 锚点。适合内容固定、不频繁更新的博客归档页，加载快、零依赖。
关键不是“动态切换”，而是让每个标签对应一个可直达、可分享、SEO 友好的 URL 片段（如 #python、#webdev）。浏览器原生支持滚动到对应 id 元素，无需脚本。
- 所有标签链接写成：
<a href="#python">Python</a> - 对应内容区块必须有匹配的
id：<section id="python">...</section> - 页面首次打开时，若 URL 带
#python，浏览器自动滚动到该section - 不要给
section设display: none，否则锚点失效；隐藏需用 CSS 的visibility: hidden或定位偏移（但会影响语义和 SEO）
用 CSS :target 实现单页内“伪激活”状态
:target 是 CSS 伪类，当 URL 的 hash 匹配某个元素的 id 时，该元素即为 :target。它能帮你高亮当前选中的标签内容区，甚至联动更新导航栏样式。
- 默认隐藏所有标签内容：
section { display: none; } - 只显示当前目标：
section:target { display: block; } - 让导航中对应链接变色：
a[href="#python"]:target ~ nav a[href="#python"] { color: #007bff; }（注意：CSS 无法反向选择父/兄，所以推荐把导航放section前，并用相邻兄弟选择器+或通用兄弟~） - 兼容性好（IE9+），但不支持“默认展开第一个标签”——除非 URL 默认带
#all并设section#all { display: block; }
为什么别急着加 JavaScript 切换逻辑
加 JS 容易踩三个坑：URL 不同步、后退键失效、SEO 内容不可见。很多“标签页”插件渲染完就把非当前标签的 HTML 清空或设 display: none，导致搜索引擎抓不到完整分类内容。
立即学习“前端免费学习笔记（深入）”；
- 如果只是想让用户点标签看对应文章列表，静态锚点 +
:target已足够，且更可靠 - 真要 JS 动态加载（比如按需拉取 JSON），必须手动维护
history.pushState()和监听popstate，否则前进/后退会跳转到上一页 - 移动端 Safari 对
:target滚动有延迟，可加scroll-behavior: smooth改善，但需注意旧版不支持 - 别用
onclick="return false"阻止默认行为却不补 URL 更新——用户复制链接就失效了
真实博客中标签页的常见结构陷阱
很多人直接把“标签页”当成 Tab 组件来套用，忽略了博客场景下标签的本质是「内容分组」而非「界面面板」。实际部署时最常出问题的是语义和路径。
- 标签名别用空格或中文做
id（如id="前端开发"），应转成短横线格式：id="frontend-dev" - 不要把所有文章硬塞进一个 HTML 文件——超过 20 篇后页面体积暴涨，首屏加载慢；建议按标签生成独立 HTML（如
/tag/python.html），用服务器路由或静态站点生成器管理 - 如果你用 Hugo/Jekyll，
:target方案反而多余——它们原生支持标签归档页，生成的是真实页面，不是单页应用 - RSS 订阅和分享按钮在
:target切换后不会重载，若依赖 JS 初始化，记得监听hashchange事件补逻辑
真正难的不是做出切换动画，而是让每个标签既是用户可点击的入口，又是搜索引擎可索引的独立主题页面。静态方案从第一天就对齐这个目标，而 JS 方案往往后期才补 SEO。
