如何使用HTML和CSS实现标签云效果
小编给大家分享一下如何使用HTML和CSS实现标签云效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
HTML基础结构
前面说了，标签云就是一个连接列表。所以从语义化的视角，使用无序列表来表达每个标签是合理的，不用考虑按欢迎程度去排列，否则就毫无意义了。
在每个列表项里包含一个超链接标签，所以大体结构就是下面的样子：
每个标签的权重要提前算好，然后把它加到 上或者 上，我们就暂且把它加到链接上。
权重大的标签对应显示的文字也大，代表了它的受欢迎程度大。
注意：这里的data-weight是通过data-count和data-total计算而来的，这里没办法直接通过两个属性计算表示，所以我们把目标聚焦在data-weight这样一个属性上。
这样基础的HTML结构代码就写好了，只要稍加一些属性就完美了。
class：有助于在添加样式的时候确定是哪个标签云
role：这个是一个导航组件，在屏幕阅读器上标识和辅助作用
aria-label：给辅助功能添加标题和描述
注意：如果列表位于 标签内，就不需要添加 role="navigation" ，可以使用aria-labelledby代替导航标签来指向导航标题。
让我们来完善一下列表数据，添加一些和开发相关的名词作为标签，这样看起来更贴近实际一点。
下面是标签云现在看起来的效果：
这是还没有添加任何样式的结果，然后给它添加一些样式
给标签云添加样式
以下是我们要通过添加样式解决的：
让标签以行内元素显示
让每个标签的font-size属性根据
data-weight大小显示在标签的右边加上权重
让标签的颜色随机显示
给标签添加:hover和:focus动态样式
给ul添加样式
首先移除列表前面的小圆点和缩进：
list-style: none;padding-left: 0;然后设置 ul 以Flexbox显示，并且水平垂直居中保证所有的标签元素在一行或者多行内显示：
display: flex;flex-wrap: wrap;align-items: center;justify-content: center;添加上行高相互之间保持一定的垂直距离，最终的ul元素的样式如下：
ul.cloud { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 2.5rem;}然而这个时候标签云看起来还差很多
根据权重调整标签的大小
让我们开始给标签一些小的变化：
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
attr([attribute-name] [attribute-unit]? [, default-value]?)不幸的是，目前任何浏览器均不支持该表示法和功能。相反，attr（）将仅返回一个字符串，并且只能在content属性中使用。
如果web标准支持这种做法，那好办，我们可以直接读取属性权重的数据，将它们保存到CSS变量中，并直接对其进行操作，如下所示：
ul.cloud a { --size: attr(data-weight number, 2); font-size: calc(var(--size) * 1rem);}但是这样不行，我们只能通过CSS规则，属性选择器：data-attribute
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); /* ... */}为了避免将字体大小直接设置成权重导致太大，因此通过一定的方法计算，结果显示如下：
现在看来已经小有成就。
为标签添加权重显示
我们常见的标签云效果在标签的旁边都有权重显示，权重已经有了，我们要将它展示在伪元素 ::after 的content中
ul.cloud[data-show-value] a::after { content: " (" attr(data-weight) ")"; font-size: 1rem;}然后还需要给 ul 元素增加 [data-show-value] 属性选择器，将它的值设为true或者false来控制标签后面的数字权重是否显示
注意： data-show-value 属性选择器的值为布尔值，即使你设置为false，它也会显示，如果不让它显示，就移除该属性
这是显示数字权重的效果
下面的案例中将不显示标签旁边的数字
为标签云添加颜色
所有的标签一个颜色看起来很沉闷，我们将尝试用两种不同的方法来为它添加不同的颜色。
使用随机生成的颜色
在CSS中没有随机数这么一说（虽然可以模拟出来）。我们将要做的是根据标签的序列号来给它定义不同的颜色，方法如下：
ul.cloud li:nth-child(2n+1) a { --color: #181; }ul.cloud li:nth-child(3n+1) a { --color: #33a; }ul.cloud li:nth-child(4n+1) a { --color: #c38; }通过这种方式我们给它添加了绿色，蓝色和紫色代替了之前的淡红色，虽然也不是完全随机（有一定的规律在），但是用户很难发现。
使用同一种颜色的不同透明度值
我们通过增加标签对比度来达到强调受欢迎程度的效果，在浅色背景下，使用深色更加明显。
HSL格式的颜色值可以实现，但是我们采用最快的方式，直接对标签设置透明度，透明度的值根据权重值计算而来：
看下变化后的效果
定义它的轮廓
当我们触摸标签的时候 outline 样式会比较重要，尤其对于残障人士在可访问性方面。
我们将给 outline 添加和标签字体颜色一致的边框
ul.cloud a:focus { outline: 1px dashed;}在这里我们是通过鼠标点击事件去模拟的
添加动态效果
为了增加交互性，我们为它添加一个简单的动画：当用户将鼠标移动或者悬停在一个标签上时，标签的背景色变换并且有一个水平展开的效果。
因为它是取决于状态的动画，所以我们将使用transition而不是animation动画。
实现方式是通过 a 标签的伪元素::before的宽度值变化，在focus和hover状态下从0变为100%来达到这样一个微交互。
CSS代码和伪元素的状态行为：
ul.cloud a::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background: var(--color); transform: translate(-50%, 0); opacity: 0.15; transition: width 0.25s;}ul.cloud a:focus::before,ul.cloud a:hover::before { width: 100%;}对于动画效果：用户不能根据自己的喜好来开启或者关闭。如果真是一个需求的话，我们还是要尊重用户的喜好移除动画的。
可以通过媒体查询特性 prefers-reduced-motion 来达到https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion) { ul.cloud * { transition: none !important; }}以上是"如何使用HTML和CSS实现标签云效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
