标签云必须使用ul.tag-cloud结构并设data-weight属性，字号按归一化1–4整数档缩放，禁用px和log缩放，css优先用em映射权重，布局仅用flex且加gap与flex-shrink:0。
标签云不是“堆一堆带链接的文字”，而是语义清晰、可访问、响应式且权重可计算的关键词集合。核心判断就一条：ul.tag-cloud 是唯一合理结构，data-weight 是权重落点，所有字号缩放必须基于归一化后的 1–4 整数档，否则视觉失控、无障碍失效、SEO 漏抓。
为什么必须用 ul.tag-cloud 而不是 div 或一堆 a
屏幕阅读器把 ul 当作“一组关键词”来播报，搜索引擎能提取每个 li 下的文本和 data-weight 属性；换成 div 堆砌，这些信号全丢。DOM 中多一个空格或换行，就会生成空白文本节点，导致 display: inline-block 或 inline-flex 布局错位——而 ul 天然只包裹 li，结构干净。
-
ul内禁止写注释、禁止在li外加空格或换行，否则干扰 flex/inline 布局 - 每个标签必须是
li的直接子元素，内部用a（需跳转）或span（只展示） - 别给
ul设font-size: 0来清空白符——这是div方案的补丁，ul不需要
data-weight 怎么算才不崩字体大小
原始频次直接套用会出问题：频次为 1 和 1000，按比例缩放后，小词缩到 0.2em 看不见，大词撑到 3.8em 溢出容器。必须归一化为离散整数档。
- 取所有频次最大值
maxFreq，空数组时设maxFreq = 1 - 每个词计算
Math.round((freq / maxFreq) * 4) - 结果强制截断：
Math.min(4, Math.max(1, weight))，杜绝 0 或 5+ - 禁用
Math.log(freq + 1)：频次 1→0.69，频次 3→1.39，CSS 映射后视觉几乎无差别，调试时根本看不出权重差异
CSS 控制字号该用 em 还是 clamp()？
px 必须禁用——它绕过用户系统字体设置，高 DPI 屏幕下模糊，缩放页面时字号卡死。响应式与可访问性双失守。
- 优先用
em：父容器font-size变，所有标签同比例缩放，适合层级内相对控制 -
.tag-cloud a[data-weight="1"] { font-size: 0.8em; }到[data-weight="4"] { font-size: 1.4em; }是最稳方案 -
clamp()可用但别乱套：不能直接clamp(0.8em, 2vw, 1.4em)，这会覆盖权重意图；应先归一化为 1–4，再用离散em值映射 - 若用 CSS 变量传归一化值（如
--freq: 0.73），再写font-size: clamp(12px, calc(12px + var(--freq) * 16px), 28px)，注意 Safari 14.5 以下不支持clamp()，得降级 JS 内联
Flex 布局怎么写才不换行错乱
float: left 已淘汰：父容器易塌陷，断点下换行位置不可控，无障碍属性无法绑定。现代方案只选 flex，但细节决定成败。
-
.tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; }是基础 - 每个
li加flex-shrink: 0，防止小屏下被压缩变形 - 别漏
gap：比margin更可靠，不触发外边距合并，也不受空白符干扰 - Safari 14.1 之前有
flex-wrap: wrap错位 bug，若需兼容，改用inline-flex并加font-size: 0清空白符（仅此一种例外）
最容易被忽略的是归一化前的数据清洗：API 返回的频次字段可能是字符串、null 或负数，Math.max(...counts) 遇到非数字会返回 NaN，整个缩放逻辑就崩了。务必先 filter 再 map，别图省事直接扔进公式里算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
