必须用 <ul class="tag-cloud">，语义正确且利于SEO与无障碍；权重归一化为1–4整数档，避免除零；CSS用em或clamp()响应式控制字号；布局弃用float，改用flex并设flex-wrap: wrap。
用还是写标签云结构？必须用 <ul class="tag-cloud">，别用 <div> 堆砌。语义上标签云是“一组关键词”，<ul> 表达集合关系，对屏幕阅读器、SEO 和 CSS 选择器都更友好。用 <div> 模拟列表，等于主动丢掉结构信号——JavaScript 动态渲染时，搜索引擎可能延迟识别或完全忽略关键词层级。
data-weight 怎么算才不崩字号？
权重不是原始频次，直接套用 freq 会导致小词字体缩到看不见、大词撑爆容器。正确做法是归一化后映射为 1–4 整数档：
- 取所有词频最大值
maxFreq
- 每个词计算
Math.round((freq / maxFreq) * 4)
- 结果强制限制在
1–4 范围内（避免 0 或 5+）
别用 Math.log(freq + 1)：对 freq=1 和 freq=3 输出几乎一样，调试时根本看不出视觉差异。
CSS 控制字号该用 px、em 还是 clamp()？
禁用 px —— 它无法响应缩放和系统字体设置，无障碍体验直接打折。优先用 em 或 clamp()：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
.tag-cloud a[data-weight="1"] { font-size: 0.8em; }.tag-cloud a[data-weight="4"] { font-size: 1.4em; }- 更现代的写法：
font-size: clamp(0.7em, 0.2vw + 0.6em, 1.4em);（兼顾小屏可读与大屏张力）
注意：如果用了 flex 布局，记得加 flex-wrap: wrap 和 justify-content: center，否则一行溢出就全乱了。
为什么 float 布局现在必须淘汰？
float 会触发父容器塌陷、换行错位、响应式断点失效——尤其在移动端横竖屏切换时，标签可能突然堆成一列或消失。真实项目里，90% 的“标签云错位”问题都源于还在用 float: left。
改用 display: inline-block 或 display: flex：
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; }-
.tag-cloud a { display: inline-block; }（兼容 IE11）
- 务必加
max-width: 100% 和 user-select: none，防止长标签撑破容器或误选文字
动态生成时最容易被忽略的是权重归一化的边界处理——比如所有词频都是 1，maxFreq 为 1，(1/1)*4 得 4，没问题；但若数据为空，maxFreq 为 0，除零就会让整个映射逻辑崩掉。上线前得兜底。
必须用 <ul class="tag-cloud">，别用 <div> 堆砌。语义上标签云是“一组关键词”，<ul> 表达集合关系，对屏幕阅读器、SEO 和 CSS 选择器都更友好。用 <div> 模拟列表，等于主动丢掉结构信号——JavaScript 动态渲染时，搜索引擎可能延迟识别或完全忽略关键词层级。
data-weight 怎么算才不崩字号？
权重不是原始频次，直接套用 freq 会导致小词字体缩到看不见、大词撑爆容器。正确做法是归一化后映射为 1–4 整数档：
- 取所有词频最大值
maxFreq - 每个词计算
Math.round((freq / maxFreq) * 4) - 结果强制限制在
1–4范围内（避免0或5+）
别用 Math.log(freq + 1)：对 freq=1 和 freq=3 输出几乎一样，调试时根本看不出视觉差异。
CSS 控制字号该用 px、em 还是 clamp()？
禁用 px —— 它无法响应缩放和系统字体设置，无障碍体验直接打折。优先用 em 或 clamp()：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.tag-cloud a[data-weight="1"] { font-size: 0.8em; }.tag-cloud a[data-weight="4"] { font-size: 1.4em; }- 更现代的写法：
font-size: clamp(0.7em, 0.2vw + 0.6em, 1.4em);（兼顾小屏可读与大屏张力）
注意：如果用了 flex 布局，记得加 flex-wrap: wrap 和 justify-content: center，否则一行溢出就全乱了。
为什么 float 布局现在必须淘汰？
float 会触发父容器塌陷、换行错位、响应式断点失效——尤其在移动端横竖屏切换时，标签可能突然堆成一列或消失。真实项目里，90% 的“标签云错位”问题都源于还在用 float: left。
改用 display: inline-block 或 display: flex：
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; }-
.tag-cloud a { display: inline-block; }（兼容 IE11） - 务必加
max-width: 100%和user-select: none，防止长标签撑破容器或误选文字
动态生成时最容易被忽略的是权重归一化的边界处理——比如所有词频都是 1，maxFreq 为 1，(1/1)*4 得 4，没问题；但若数据为空，maxFreq 为 0，除零就会让整个映射逻辑崩掉。上线前得兜底。
