Semantic-UI 标头划分变体

在 Semantic-UI 中，标头是一个通用的 UI 元素，可以用于页面标题、副标、小标题等等。除了基本的标头等级，Semantic-UI 还提供了许多标头变体，可以帮助你更好地组织页面内容。

基本标头等级

在 Semantic-UI 中，标头分为六个等级，分别用 h1 到 h6 元素来表示，用法与 HTML 原生标头相同。它们可以用来表示页面的级别，例如 h1 可以用作页面主标题，而 h2 到 h6 可以用作次级标题或小标题等。

# 语法
<h1>大标题</h1>
<h2>小标题</h2>
<h3>副标</h3>
<h4>副副标</h4>
<h5>小标题</h5>
<h6>最小的标题</h6>

变体标头

Semantic-UI 还提供了一些标头变体，用于更好地组织页面内容。以下是其中的一些：

页面标题

页面标题通常放置在页面的顶部，是最为重要的标题。Semantic-UI 提供了 .page.header 类来实现此效果。

<div class="ui page header">
  <h1 class="ui center aligned header">页面标题</h1>
</div>

页面小标题

在页面标题下方，可以添加一个小标题来进一步说明页面内容。Semantic-UI 提供了 .page.subheader 类来实现此效果。

<div class="ui page header">
  <h1 class="ui center aligned header">页面标题</h1>
  <div class="ui page subheader">页面副标题</div>
</div>

特殊标题

有时，在页面中需要使用一些特殊的标题，例如提醒用户注意某些内容或强调某些内容。Semantic-UI 提供了 .ui.special 类来实现此效果。

<div class="ui special header">特殊标题</div>

带副标题的段落标题

有时候，需要在一个段落中加入一个标题和一个副标题，以更清晰地表明段落的主旨。Semantic-UI 提供了 .ui.block.header 类来实现此效果。

<div class="ui block header">
  <h4 class="ui header">段落标题</h4>
  <div class="sub header">段落副标题</div>
</div>

段落标题分隔符

当一个段落的标题之后需要一个分隔符时，可以使用 .ui.dividing.header 类来实现。

<h2 class="ui dividing header">段落标题</h2>

以上就是 Semantic-UI 标头划分的一些变体，它们可以帮助你更好地组织页面内容，展示出更好的视觉效果。