必须用 而非 ，因其语义明确表达无序关键词集合，保障seo、屏幕阅读器识别与键盘导航；需归一化 data-weight 为1–4整数，css用 clamp() 或 em 保证可访问性，flex布局须设 gap、flex-shrink: 0 和 white-space: nowrap 防错位。
直接用 标签云本质是一组有逻辑关系的关键词集合， 原始频次直接映射字号会崩：比如最大频次是 1，最小是 0， 正确做法（JS 端示例）： 关键点： 推荐写法（兼顾小屏可读与大屏张力）： 注意： 很多人只写 必须加的防护项： 最容易被忽略的是：当标签含中文+英文混合（如 “React.js”），<ul class="tag-cloud"></ul>，别写 <div> 堆标签 —— 语义错、SEO弱、屏幕阅读器读不出层级，后期加 JS 也得重写结构。<h3>为什么必须用 <code><ul></ul> 而不是 <div> 或 <code><span></span><ul></ul> 明确表达“无序集合”语义，浏览器和辅助技术能识别出这是可遍历的列表项。用 <div> 模拟，等于主动丢掉结构信号：搜索引擎可能忽略关键词权重，屏幕阅读器读出来就是一串平铺文字，没有“第1个标签、共12个”这类上下文。<p>常见错误现象：</p>
<ul>
<li>Chrome DevTools 的 Accessibility 标签页里看不到列表角色（<code>role="list"）
role="listitem"，导致无障碍支持断裂
data-weight 归一化必须卡死在 1–4 整数档Math.log(freq + 1) 对 freq=1 和 freq=3 输出几乎一样（都是 ~0.69），视觉毫无区分度；而除零（maxFreq === 0）会导致所有字号变成 NaNem。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 档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></a>，防止 Flex 自动压缩标签宽度导致文字折行或省略white-space: nowrap 配合 flex-shrink: 0，确保单个标签内文字不换行max-width: 100%，避免超长标签撑破父容器flex-shrink: 0 不加，Chrome 会把点号后面内容截断，Firefox 则可能把整个标签压成一行超长文本——这不是 bug，是 Flex 默认行为。
