用语义化HTML列表（如）包裹带data-weight属性的标签，CSS用clamp()和em/rem控制响应式字号，URL参数需encodeURIComponent()编码，权重归一化为1–4整数。
怎么用纯HTML+CSS实现基础标签云
标签云本质是带权重的关键词列表，HTML本身不提供<tagcloud></tagcloud>这种原生标签，得靠语义化组合+CSS控制字号/颜色。核心思路是：用<ul></ul>或<div>包裹<code><a></a>或<span></span>，再用class或data属性标记权重。
常见错误是直接写一堆<span></span>堆在一起，没考虑可访问性（屏幕阅读器读不出顺序）和SEO（关键词权重无法被解析）。正确做法是保留列表结构，哪怕视觉上打散排布。
- 用
<ul class="tag-cloud"></ul>包裹，每个标签用<li><a href="#" data-weight="3">JavaScript</a></li> - 权重映射到字体大小时，别用固定
px，优先用em或rem，比如.tag-cloud a[data-weight="1"] { font-size: 0.8em; } - 避免用
float布局——容易塌陷、响应式难调；改用display: inline-block或flex（注意IE11兼容性）
JavaScript动态生成标签云时权重怎么算才合理
权重不是简单按出现次数排序。原始数据里“JavaScript”出现12次、“CSS”出现10次，但直接设为12和10会导致字号跨度失控，小词几乎看不见。
真正有效的做法是做归一化处理：取所有词频的最大值，把每个词频除以它，再乘以一个缩放系数（比如4），最后四舍五入到整数作为data-weight值。
立即学习“前端免费学习笔记（深入）”；
- 公式：
weight = Math.round((freq / maxFreq) * 4)，结果范围是1–4，足够CSS分档 - 别用
Math.log(freq + 1)之类——对小频次区分度太低，调试时很难看出差异 - 如果后端已返回归一化后的权重（如0.23、0.87），前端就别再二次计算，直接转成
data-weight并用CSS变量接收：style="--weight: 0.87;"
点击标签跳转时URL参数怎么设计不踩坑
用户点“React”标签，页面跳转到/search?tag=React没问题；但如果标签名含空格或斜杠（比如“C++”“Node.js”），直接拼接会破坏URL结构。
必须编码，但不是所有地方都该用encodeURIComponent()——比如<a href="/search?tag=React"></a>里的值要编，而fetch('/api/tags?limit=10')这种不含用户输入的不用。
-
<a href="/search?tag=<code>encodeURIComponent(tagName)"> —— 服务端收到的是React%2B%2B，需解码 - 避免用
encodeURI()：它不编码/和?，在路径段中可能误伤路由 - 如果用History API（
pushState），同样要编码，否则location.href可能解析失败
CSS实现响应式标签云的关键断点在哪
标签云在小屏上最常出问题：文字挤成一团、换行错乱、字号过大撑破容器。这不是靠媒体查询“多加几个@media”能解决的，关键在基础样式是否弹性。
核心是放弃固定font-size，改用clamp()或视口单位，同时限制单行最大宽度，让长标签自动折行而非溢出。
- 推荐写法：
font-size: clamp(0.75rem, 2.5vw, 1.25rem);——小屏保可读，大屏不夸张 - 给
<a></a>加max-width: 12ch; white-space: normal;，强制英文长词（如“TypeScript”）也能折行 - 别依赖
word-break: break-all——它会在任意字母处截断，损害可读性
权重可视化和响应式之间有隐性冲突：字号缩小时，权重差异变得难以感知。这时候宁可简化档位（从4级降到3级），也不要硬撑视觉对比。
