标签云的效果在博客和网站上不难见到，它其实就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大，相反的就显示的小。

来源于TagCrowd.com

我们就不去深入研究标签云带来的效率上的提升和可用性的细节，仅仅在外观上带来的美感和对全站或一整篇文章所起到的高度概括的作用就不容忽视了。

接下来，我们将讨论如何用HTML和CSS来创建标签云效果。注意，我们仅仅讨论如何实现这种UI效果而不去深究标签的权重或受欢迎程度是怎么算出来的。

HTML基础结构
前面说了，标签云就是一个连接列表。所以从语义化的视角，使用无序列表来表达每个标签是合理的，不用考虑按欢迎程度去排列，否则就毫无意义了。

在每个列表项里包含一个超链接标签，所以大体结构就是下面的样子：

1
2
3
4
5
6
<ul>
  <li><a href="/tag/word1">Word1</a></li>
  <li><a href="/tag/word2">Word2</a></li>
  <li><a href="/tag/word3">Word3</a></li>
  <!-- ... -->
</ul>
每个标签的权重要提前算好，然后把它加到 <a> 上或者 <li> 上，我们就暂且把它加到链接上。

权重大的标签对应显示的文字也大，代表了它的受欢迎程度大。

1
2
3
4
5
6
<ul>
  <li><a href="/tag/word1" data-weight="3">Word1</a></li>
  <li><a href="/tag/word2" data-weight="7">Word2</a></li>
  <li><a href="/tag/word3" data-weight="4">Word3</a></li>
  <!-- ... -->
</ul>
注意：这里的data-weight是通过data-count和data-total计算而来的，这里没办法直接通过两个属性计算表示，所以我们把目标聚焦在data-weight这样一个属性上。

这样基础的HTML结构代码就写好了，只要稍加一些属性就完美了。

class：有助于在添加样式的时候确定是哪个标签云
role：这个是一个导航组件，在屏幕阅读器上标识和辅助作用
aria-label：给辅助功能添加标题和描述
注意：如果列表位于 <nav> 标签内，就不需要添加 role="navigation" ，可以使用aria-labelledby代替导航标签来指向导航标题。

让我们来完善一下列表数据，添加一些和开发相关的名词作为标签，这样看起来更贴近实际一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="cloud" role="navigation" aria-label="Webdev tag cloud">
  <li><a data-weight="4" href="/tag/http">HTTP</a></li>
  <li><a data-weight="2" href="/tag/ember">Ember</a></li>
  <li><a data-weight="5" href="/tag/sass">Sass</a></li>
  <li><a data-weight="8" href="/tag/html">HTML</a></li>
  <li><a data-weight="6" href="/tag/flexbox">FlexBox</a></li>
  <li><a data-weight="4" href="/tag/api">API</a></li>
  <li><a data-weight="5" href="/tag/vuejs">VueJS</a></li>
  <li><a data-weight="6" href="/tag/grid">Grid</a></li>
  <li><a data-weight="3" href="/tag/rest">Rest</a></li>
  <li><a data-weight="9" href="/tag/javascript">JavaScript</a></li>
  <li><a data-weight="3" href="/tag/animation">Animation</a></li>
  <li><a data-weight="7" href="/tag/react">React</a></li>
  <li><a data-weight="8" href="/tag/css">CSS</a></li>
  <li><a data-weight="1" href="/tag/cache">Cache</a></li>
  <li><a data-weight="3" href="/tag/less">Less</a></li>
</ul>
下面是标签云现在看起来的效果：

这是还没有添加任何样式的结果，然后给它添加一些样式

给标签云添加样式
以下是我们要通过添加样式解决的：

让标签以行内元素显示
让每个标签的font-size属性根据 data-weight 大小显示
在标签的右边加上权重
让标签的颜色随机显示
给标签添加:hover和:focus动态样式
给ul添加样式
首先移除列表前面的小圆点和缩进

1
2
list-style: none;
padding-left: 0;
然后设置 ul 以Flexbox显示，并且水平垂直居中保证所有的标签元素在一行或者多行内显示

1
2
3
4
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
添加上行高相互之间保持一定的垂直距离，最终的ul元素的样式如下：

1
2
3
4
5
6
7
8
9
ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
}
然而这个时候标签云看起来还差很多

根据权重调整标签的大小
让我们开始给标签一些小的变化

1
2
3
4
5
6
7
8
ul.cloud a {
  color: #a33;
  display: block;
  font-size: 1.5rem;
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  position: relative;
}
通过上面的样式，所有的标签变成淡红色并且设置1.5rem大小

然而我们的要求是字体大小根据 data-weight 而来的，怎么实现呢？

web标准有一种方式是CSS可以通过 attr() 方法读取HTML的data属性值，所以我们可以通过以下方式读取 data-weight

1
attr([attribute-name] [attribute-unit]? [, default-value]?)
不幸的是，目前任何浏览器均不支持该表示法和功能。相反，attr（）将仅返回一个字符串，并且只能在content属性中使用。

如果web标准支持这种做法，那好办，我们可以直接读取属性权重的数据，将它们保存到CSS变量中，并直接对其进行操作，如下所示：

1
2
3
4
ul.cloud a {
  --size: attr(data-weight number, 2); 
  font-size: calc(var(--size) * 1rem);
}
但是这样不行，我们只能通过CSS规则，属性选择器：data-attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 5; }
ul.cloud a[data-weight="6"] { --size: 6; }
ul.cloud a[data-weight="7"] { --size: 7; }
ul.cloud a[data-weight="8"] { --size: 8; }
ul.cloud a[data-weight="9"] { --size: 9; }
 
ul.cloud a {
  --size: 4;
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  /* ... */
}
为了避免将字体大小直接设置成权重导致太大，因此通过一定的方法计算，结果显示如下：

现在看来已经小有成就。