标签云必须用语义正确、可访问、响应式的无序列表实现，即包裹带data-weight属性的，字号由权重动态计算，布局用flex-wrap，严禁干扰空白节点，并保障无障碍与seo。
标签云本质是带权重的关键词集合，必须用语义正确、可访问、响应式的无序列表实现，不能只靠视觉效果堆砌。
必须用 结构并设 data-weight 属性
标签云不是普通词列表，每个标签需体现重要性差异。关键做法：
- 用
- 包裹所有
- ，保证语义为“无序关键词集合”
- 每个
- 内嵌 或纯文本，并添加 data-weight="1" 到 data-weight="4" 的整数属性（归一化后）
- 不设 data-weight → 所有标签字号相同 → 失去“云”的核心特征
字号要用相对单位动态映射权重
字体大小不能写死 px，要让 weight 值驱动缩放：
- 推荐用 clamp(0.8rem, 1.2vw + 0.6rem, 1.8rem) 实现响应式字号
- 或用 CSS 自定义属性配合 calc：比如 font-size: calc(0.9rem + var(--weight, 1) * 0.3rem)
- 避免用固定 em 值（如 1em/1.2em/1.4em），否则在小屏下易溢出或过小
布局必须用 flex-wrap 且清除干扰节点
传统 inline-block 容易因换行、空格、注释导致错位：
- 给
- 加 display: flex; flex-wrap: wrap; gap: 0.5rem;
- 设 display: inline-flex; 或 display: inline-block;（但前者更稳）
- 严禁在
- 和
- 之间写 HTML 注释、换行符或空格——会生成空白文本节点，破坏布局
无障碍与 SEO 不能妥协
标签云常被当成装饰元素忽略可访问性，但实际它是内容的一部分：
- 保留
- 结构，屏幕阅读器能自然读出“列表，共 X 项”
- 每个 标签要有明确 href（哪怕跳转到锚点或带 query），不可仅靠 JS 绑定 click
- 若作为导航用途，
- 外层加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
