Semantic UI通过ui labels容器创建标签列表，支持颜色类（如red、green）、尺寸类（如large、mini）及basic、ribbon等样式，实现语义化、响应式的标签展示，适用于分类、状态提示等场景。
在Semantic UI中，标签（Labels）是一种轻量级的界面元素，常用于显示分类、状态或计数信息。通过使用内置的labels类，你可以快速创建美观且响应式的标签列表，并通过附加类控制其颜色和大小。
基本标签列表结构
Semantic UI 使用 class="ui labels" 容器包裹多个 label 元素，形成一个水平排列的标签列表。
每个单独的标签使用 class="ui label" 创建。
<div class="ui labels"> <div class="ui label">前端</div> <div class="ui label">后端</div> <div class="ui label">设计</div> </div>
使用颜色类改变标签外观
Semantic UI 提供多种颜色类来调整标签视觉效果，适用于不同语义场景：
立即学习“前端免费学习笔记（深入）”；
-
红色：
red label— 表示错误或警告 -
绿色：
green label— 表示成功或在线状态 -
蓝色：
blue label— 表示主要信息 -
黄色：
yellow label— 表示提醒或待处理 -
灰色：
grey label或black label— 中性或禁用状态 -
橙色：
orange等颜色词也可直接使用
<Claim class="ui labels"> <div class="ui red label">错误</div> <div class="ui green label">已验证</div> <div class="ui blue label">新功能</div> <div class="ui yellow label">审核中</div> </div>
调整标签大小
通过添加尺寸类，可以统一控制标签列表中各标签的大小，提升可读性和布局适配性。
-
迷你尺寸：
tiny→ “mini” -
小尺寸：
small - 正常尺寸：默认不加类
-
大尺寸：
large -
超大尺寸：
huge
将尺寸类与颜色类结合使用，实现更丰富的视觉层级。
<div class="ui labels large"> <div class="ui mini red label">重要</div> <div class="ui small blue label">通知</div> <div class="ui orange label">活动</div> <div class="ui huge green label">发布！</div> </div>
其他实用样式扩展
Semantic UI 还支持更多增强型标签样式，可按需组合使用：
-
空心边框：
basic label显示为描边风格 -
带图标的标签：在 label 内嵌入
<i class="icon"></i> -
可移除标签：
label pointing配合关闭图标模拟可删除效果 -
圆形角标：
ribbon label用于侧边标题装饰
<div class="ui labels"> <div class="ui basic blue label"><i class="tag icon"></i> 标签</div> <div class="ui teal label"><i class="star icon"></i> 精选</div> </div>
基本上就这些。Semantic UI 的标签系统简洁灵活，配合颜色与尺寸类，能快速构建出语义清晰、视觉协调的标签列表，适合用于文章分类、用户标签、状态标识等场景。不需要额外写CSS，就能获得一致的设计语言。
