组件示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题
6 级标题

段落

这是一段排版示例文字，用于展示正文的字号、行距与阅读效果。你可以在这里写下自己的观点，并通过分段让内容更清晰。

这是一段排版示例文字，用于展示正文的字号、行距与阅读效果。你可以在这里写下自己的观点，并通过分段让内容更清晰。

文字强调

  1. 这是加粗文字的示例。
  2. 这是下划线文字的示例。
  3. 这是斜体文字。
  4. 可以用重点词语帮助读者理解。
  5. 句子简洁，段落清晰。
  6. 每段围绕一个主题展开。
  7. 完整网址可以转换为链接：示例网站。
  8. 链接的展示方式取决于当前使用的渲染器。

链接

行内链接

带标题的行内链接

仓库许可证

也可以使用描述性的文字，让链接用途更清楚。

引用式链接可以将链接地址集中放在正文之后。

有序列表

  1. 列表项
  2. 列表项
  3. 列表项
  4. 列表项
  5. 列表项

无序列表

  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 列表项

代码与语法高亮

HTML

<ul>
  <li class="nav-item">
    <a class="nav-link" href="/">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="about/">关于</a>
  </li>
</ul>

CSS

img {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto;
}

JavaScript

window.addEventListener("load", (e) => {
  document.querySelector(".preloader").style.display = "none";
});

按钮

实心按钮 描边按钮

引用

清晰的表达来自具体的问题、简洁的说明和恰当的示例。

提示框

提示

这是一条提示信息。

技巧

这是一条提示信息。

说明

这是一条提示信息。

注意

这是一条提示信息。

标签页

标签内容示例

这是一段排版示例文字，用于展示正文的字号、行距与阅读效果。你可以在这里写下自己的观点，并通过分段让内容更清晰。

表格

#第一列第二列第三列
1第1行第1列第1行第2列第1行第3列
2第2行第1列第2行第2列第2行第3列
3第3行第1列第3行第2列第3行第3列

折叠面板

  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。
  • 这是一项示例内容。

图片

示例图片

YouTube 视频

自定义视频