Semantic UI 中的元素代表用户界面最基本的构建块。它们是独立的 UI 组件，具有特定的功能，可以组合创建更复杂的 UI 模式。元素构成了 Semantic UI 组件层级的底层基础。
与用于组合相关 UI 元素的集合（将在“集合”中介绍）、具有交互式 JavaScript 行为的模块或显示内容项集合的视图不同，元素是更简单、独立的组件，代表基本的 UI 概念。
Semantic UI 中的元素包含几种核心组件类型，它们提供了界面的基本构建块。
来源： src/definitions/elements/segment.less src/definitions/elements/list.less src/definitions/elements/header.less src/definitions/elements/icon.less
上图显示了 Semantic UI 中提供的所有主要元素。本文档将重点详细介绍几个关键元素。
Semantic UI 中的元素共享共同的特征并遵循一致的模式。
来源： src/definitions/elements/segment.less793-827 src/definitions/elements/list.less893-950 src/definitions/elements/header.less700-706 src/definitions/elements/icon.less395-436
元素遵循一致的类命名约定，即 .ui.{element}，并提供各种修饰符进行自定义。
Segment 是容器，用于组织相关内容。它们提供了一种在 UI 中创建独立部分的方法。
来源： src/definitions/elements/segment.less113-227 src/definitions/elements/segment.less269-287 src/definitions/elements/segment.less293-306 src/definitions/elements/segment.less310-318 src/definitions/elements/segment.less323-327 src/definitions/elements/segment.less335-362
可以使用 .ui.segments 容器将 Segments 分组在一起，这允许使用统一的边框和样式实现一致的 segment 组。
| Segment 类型 | 类 | 描述 |
|---|---|---|
| 基础 | .ui.segment | 带有默认样式的标准 segment |
| Raised（抬高） | .ui.raised.segment | 带有阴影，看起来像是抬高的 segment |
| Stacked（堆叠） | .ui.stacked.segment | 在其下方带有“堆叠”页面的 segment |
| Piled（堆叠成堆） | .ui.piled.segment | 看起来像一堆纸张的 segment |
| 纵向 | .ui.vertical.segment | 只有底部边框，用于细分内容的 segment |
| 水平 | .ui.horizontal.segments | 将 segments 水平分组，而不是垂直分组 |
| Colored（彩色） | .ui.[color].segment | 带有颜色强调的 segment |
| Inverted（反色） | .ui.inverted.segment | 具有反色（深色背景）的 segment |
来源： src/definitions/elements/segment.less546-665 src/definitions/elements/segment.less700-708
Header 提供层级和结构给你的内容。它们可以包含图标、图片和子标题。
来源： src/definitions/elements/header.less144-177 src/definitions/elements/header.less184-216 src/definitions/elements/header.less222-241 src/definitions/elements/header.less249-293 src/definitions/elements/header.less607-620 src/definitions/elements/header.less626-649 src/definitions/elements/header.less654-697
可以使用 HTML 标题标签（h1-h5）或大小类来调整 Headers 的大小。它们也可以包含图标、图片和子标题。
| Header 类型 | 类 | 描述 |
|---|---|---|
| 标准 | .ui.header | 具有默认样式的基本 header |
| 页面 Headers | h1.ui.header 至 h5.ui.header | 传统的标题层级 |
| 内容 Headers | .ui.huge.header，.ui.large.header 等。 | 没有语义意义的大小变化 |
| Subheader（子标题） | .ui.header .sub.header | Header 中的二级文本 |
| Icon Header（图标 Header） | .ui.icon.header | 图标位于文本上方的居中 Header |
| Dividing（分隔） | .ui.dividing.header | 下方带有分隔线的 Header |
| 模块 | .ui.block.header | 带有彩色背景的 Header |
来源： src/definitions/elements/header.less145-241 src/themes/default/elements/header.variables71-89
列表以一致的格式显示相关内容的组。Semantic UI 提供各种列表类型以适应不同的内容呈现。
来源： src/definitions/elements/list.less550-607 src/definitions/elements/list.less613-679 src/definitions/elements/list.less279-315 src/definitions/elements/list.less685-756 src/definitions/elements/list.less769-843 src/definitions/elements/list.less859-888 src/definitions/elements/list.less462-512 src/definitions/elements/list.less526-531 src/definitions/elements/list.less420-456
列表可以包含丰富的内容，如图标、图片、标题和描述。它们也可以嵌套以创建分层结构。
| 列表类型 | 类 | 描述 |
|---|---|---|
| 基础 | .ui.list | 具有最少样式的标准列表 |
| 项目符号列表 | .ui.bulleted.list | 带项目符号的列表 |
| 有序 | .ui.ordered.list | 编号列表 |
| 水平 | .ui.horizontal.list | 项目水平显示的列表 |
| 分隔列表 | .ui.divided.list | 项目之间带有分隔线的列表 |
| 单元格列表 | .ui.celled.list | 每个项目周围都有单元格边框的列表 |
| 选择列表 | .ui.selection.list | 可选择项目的列表 |
| 动画列表 | .ui.animated.list | 带有悬停动画的列表 |
| 链接 | .ui.link.list | 链接项目的列表 |
来源： src/definitions/elements/list.less550-950
Semantic UI 提供一个基于 Font Awesome 的广泛图标系统，支持各种自定义和样式。
来源： src/definitions/elements/icon.less69-106 src/definitions/elements/icon.less138-214 src/definitions/elements/icon.less220-387 src/definitions/elements/icon.less93-106 src/definitions/elements/icon.less443-503
Semantic UI 的图标系统包含数百个图标，可以通过简单的类名使用。图标可以通过大小、颜色和状态变化进行自定义。
| 图标变体 | 类 | 描述 |
|---|---|---|
| 基础 | i.icon | 标准图标 |
| 尺寸 | i.large.icon, i.small.icon, 等。 | 不同尺寸的图标 |
| Colored（彩色） | i.red.icon, i.blue.icon, 等。 | 特定颜色的图标 |
| 圆形 | i.circular.icon | 圆形容器中的图标 |
| 带边框 | i.bordered.icon | 带边框的图标 |
| Inverted（反色） | i.inverted.icon | 颜色反转的图标 |
| 加载 | i.loading.icon | 动画加载图标 |
| 分组任务 | i.icons | 将多个图标组合在一起 |
来源： src/definitions/elements/icon.less394-436 src/definitions/elements/icon.less138-214 src/definitions/elements/icon.less220-387
以下图表显示了元素在代码库中的结构
来源： src/definitions/elements/segment.less1-18 src/definitions/elements/list.less1-18 src/definitions/elements/header.less1-19 src/definitions/elements/icon.less1-19
每个元素包含
src/definitions/elements/ 中的 LESS 定义文件src/themes/default/elements/ 中的变量文件，用于主题化可以通过修改变量或创建主题覆盖文件来通过 Semantic UI 的主题系统自定义元素。
来源： src/themes/default/elements/segment.variables src/themes/default/elements/list.variables src/themes/default/elements/header.variables src/themes/default/elements/icon.variables src/themes/default/elements/icon.overrides
每个元素都有一组可自定义的变量，用于控制其外观。例如：
| 元素 | 变量示例 | 文件 |
|---|---|---|
| 区段 | @background、@border、@boxShadow | src/themes/default/elements/segment.variables |
| 标题 | @fontFamily, @fontWeight, @lineHeight | src/themes/default/elements/header.variables |
| 列表 | @itemLineHeight, @itemPadding, @childListPadding | src/themes/default/elements/list.variables |
| 图标 | @opacity, @width, @height | src/themes/default/elements/icon.variables |
元素可以组合起来创建更复杂的UI模式。以下是不同元素如何协同工作
来源: src/definitions/elements/segment.less63-66 src/definitions/elements/list.less107-115 src/definitions/elements/header.less63-76
该结构展示了一个片段（segment）如何包含一个标题（header）和一个列表（list），列表又包含具有自身标题、图标和描述的条目（items）。
元素是 Semantic UI 界面的基础构建块。它们提供了可以进行样式化、定制和组合的独立 UI 组件，用于创建更复杂的 UI 模式。它们一致的类命名约定和广泛的定制选项，使其成为创建语义化和可维护界面的强大工具。
有关更复杂的元素组合，请参阅 Collections，有关具有 JavaScript 行为的交互式组件，请参阅关于 Core UI Components 的文档。