必须用 <ul class="tag-cloud"> 而非 <div>，因其语义明确表达无序关键词集合，保障SEO、屏幕阅读器识别与键盘导航；需归一化 data-weight 为1–4整数，CSS用 clamp() 或 em 保证可访问性，Flex布局须设 gap、flex-shrink: 0 和 white-space: nowrap 防错位。
直接用 <ul class="tag-cloud">，别写 <div> 堆标签 —— 语义错、SEO弱、屏幕阅读器读不出层级，后期加 JS 也得重写结构。
为什么必须用 <ul> 而不是 <div> 或 <span>
标签云本质是一组有逻辑关系的关键词集合，<ul> 明确表达“无序集合”语义，浏览器和辅助技术能识别出这是可遍历的列表项。用 <div> 模拟，等于主动丢掉结构信号：搜索引擎可能忽略关键词权重，屏幕阅读器读出来就是一串平铺文字，没有“第1个标签、共12个”这类上下文。
常见错误现象：
- Chrome DevTools 的 Accessibility 标签页里看不到列表角色（
role="list"） - 用键盘 Tab 导航时，焦点跳过整个云，或只停在容器上不进单个标签
- 后端返回 JSON 后 JS 动态渲染，但没补
role="listitem"，导致无障碍支持断裂
data-weight 归一化必须卡死在 1–4 整数档
原始频次直接映射字号会崩：比如最大频次是 1，最小是 0，Math.log(freq + 1) 对 freq=1 和 freq=3 输出几乎一样（都是 ~0.69），视觉毫无区分度；而除零（maxFreq === 0）会导致所有字号变成 NaNem。
立即学习“前端免费学习笔记（深入）”；
正确做法（JS 端示例）：
const weights = tags.map(t => t.freq);
const maxFreq = Math.max(...weights);
const normalized = tags.map(t => {
const w = Math.round((t.freq / (maxFreq || 1)) * 4);
return Math.min(Math.max(w, 1), 4); // 强制锁在 1–4
});关键点：
- 分母用
maxFreq || 1防除零，不是maxFreq + 1 - 用
Math.round()而非Math.floor()，避免小频次全挤在 1 档 - 输出必须是整数，CSS 才能稳定匹配
a[data-weight="3"]
CSS 字号必须用 em 或 clamp()，禁用 px
px 是绝对单位，用户缩放页面、系统启用大字体模式时，标签字号不会跟着变，直接损害可访问性。而且响应式断点里改 px 值要写一堆媒体查询，维护成本高。
推荐写法（兼顾小屏可读与大屏张力）：
.tag-cloud a[data-weight="1"] { font-size: clamp(0.7rem, 0.8em, 0.9rem); }
.tag-cloud a[data-weight="4"] { font-size: clamp(1.1rem, 1.4em, 1.6rem); }注意：
- 别只写
em忽略小屏下限，clamp()第一个参数要设够小（如0.7rem），否则手机上看不清 - 如果父容器用了
font-size: 0.875rem，那1em就是 0.875rem，实际效果受继承链影响，建议外层统一设基准 -
flex-wrap: wrap和justify-content: center必须同时加，否则换行后标签会左对齐溢出容器
Flex 布局中 gap 和 flex-shrink 的坑
很多人只写 display: flex; flex-wrap: wrap;，结果标签在窄屏下被压缩变形，或因内容过长换行错位。
必须加的防护项：
-
gap: 0.5em替代margin控制间距，避免 margin 折叠问题 -
flex-shrink: 0给每个<a>，防止 Flex 自动压缩标签宽度导致文字折行或省略 -
white-space: nowrap配合flex-shrink: 0，确保单个标签内文字不换行 - 外层加
max-width: 100%，避免超长标签撑破父容器
最容易被忽略的是：当标签含中文+英文混合（如 “React.js”），flex-shrink: 0 不加，Chrome 会把点号后面内容截断，Firefox 则可能把整个标签压成一行超长文本——这不是 bug，是 Flex 默认行为。
