📚 UBB 标签完全教程

选项卡式浏览，点击切换示例 · 图片已更换为免费商用图库

📝 文本样式 9 个示例

加粗
[b]这是加粗文字[/b]
这是加粗文字
斜体
[i]这是斜体文字[/i]
这是斜体文字
下划线
[u]这是下划线文字[/u]
这是下划线文字
颜色
[color=#e74c3c]红色文字[/color]
红色文字
字号
[size=20]20px 大小的文字[/size]
20px 大小的文字
行高
[hanggao=2.5]行高为 2.5 的文字[/hanggao]
行高为 2.5 的文字
内边距
[nbj=20px]内边距 20px 的文字[/nbj]
内边距 20px 的文字
外边距
[wbj=20px]外边距 20px 的文字[/wbj]
外边距 20px 的文字
背景色
[bgcolor=#fef3c7]带背景色的文字[/bgcolor]
带背景色的文字

📐 标题与段落 6 个示例

h1
[h1]一级标题[/h1]

一级标题

h2
[h2]二级标题[/h2]

二级标题

h3
[h3]三级标题[/h3]

三级标题

h4
[h4]四级标题[/h4]

四级标题

段落
[p]这是一个段落文字，自动换行。[/p]

这是一个段落文字，自动换行。

对齐
[align=center]居中对齐[/align]
居中对齐

🔗 链接与图片 4 个示例

📋 列表 4 个示例

无序列表
[list][*]项目一[*]项目二[*]项目三[/list]
  • 项目一
  • 项目二
  • 项目三
有序数字
[list=1][*]第一项[*]第二项[*]第三项[/list]
  1. 第一项
  2. 第二项
  3. 第三项
有序罗马
[list=i][*]项目A[*]项目B[/list]
  1. 项目A
  2. 项目B
有序字母
[list=a][*]选项一[*]选项二[/list]
  1. 选项一
  2. 选项二

📊 表格 2 个示例

基本表格
| 商品 | 单价 | 数量 | |------|------|------| | 苹果 | 5 元 | 3 个 | | 香蕉 | 2 元 | 5 个 |
商品单价数量
苹果5 元3 个
香蕉2 元5 个
对齐方式
| 左对齐 | 居中 | 右对齐 | |:------|:----:|------:| | 内容A | 内容B | 100 | | 长内容 | 短 | 999 |
左对齐居中右对齐
内容A内容B100
长内容短999

💬 引用 2 个示例

普通引用
[quote]这是引用的内容。[/quote]
这是引用的内容。
带作者引用
[quote=鲁迅]世上本没有路，走的人多了便成了路。[/quote]
鲁迅世上本没有路，走的人多了便成了路。

🎬 视频与框架 4 个示例

本地视频
[shipin]http://120.48.12.186/uploads/video/202607/31/202607311050494944.mp4[/shipin]
iframe
[iframe]http://120.48.12.186/uploads/video/202607/31/202607311050494944.mp4[/iframe]
embed
[embed]https://www.youtube.com/embed/dQw4w9WgXcQ[/embed]
高级视频
[video=http://120.48.12.186/uploads/video/202607/31/202607311050494944.mp4]640-mp4-autoplay-poster.jpg[/video]

🌊 浮动与清除 3 个示例

左浮动
[float=left]浮动内容（左）[/float]后面的文字会环绕。
浮动内容（左）
后面的文字会环绕。
右浮动
[float=right]浮动内容（右）[/float]后面的文字会环绕。
浮动内容（右）
后面的文字会环绕。
清除浮动
[clear]
（清除浮动）

🖼️ 图片网格 5 个示例

2列方形·无间距
[grid=cols=2-1|shape=square|gap=0] [item]https://picsum.photos/seed/1139/600/400[/item] [item]https://picsum.photos/seed/1146/600/400[/item] [item]https://picsum.photos/seed/1155/600/400[/item] [item]https://picsum.photos/seed/1212/600/400[/item] [/grid]
3列圆形·间距20
[grid=cols=3-1|shape=circle|gap=20] [item]https://picsum.photos/seed/1223/600/400[/item] [item]https://picsum.photos/seed/1239/600/400[/item] [item]https://picsum.photos/seed/1249/600/400[/item] [/grid]
4列横版·圆角
[grid=cols=4-2|shape=landscape|gap=15] [item]https://picsum.photos/seed/1139/600/400[/item] [item]https://picsum.photos/seed/1146/600/400[/item] [item]https://picsum.photos/seed/1155/600/400[/item] [item]https://picsum.photos/seed/1212/600/400[/item] [/grid]
瀑布流·3列
[grid=layout=masonry|masonry-cols=3|gap=10] [item]https://picsum.photos/seed/1223/600/400[/item] [item]https://picsum.photos/seed/1239/600/400[/item] [item]https://picsum.photos/seed/1249/600/400[/item] [/grid]
Banner 轮播 (1列)
[grid=cols=1-1|shape=landscape|gap=0] [item=第一张]https://picsum.photos/seed/1258/600/400[/item] [item=第二张]https://picsum.photos/seed/1223/600/400[/item] [/grid]
第一张

📰 图文混排 10 个示例

左图右文 (media)
[media align=left] [image]https://picsum.photos/seed/1139/600/400[/image] [title]左图右文标题[/title] [content]这是描述文字，支持换行和样式。[/content] [settings]bgcolor=#f9f6f0|title-font=Inter|title-size=22[/settings] [/media]

左图右文标题

这是描述文字，支持换行和样式。
右图左文 (media)
[media align=right] [image]https://picsum.photos/seed/1146/600/400[/image] [title]右图左文标题[/title] [content]文字在左侧，图片在右侧。[/content] [/media]

右图左文标题

文字在左侧，图片在右侧。
3列网格·左图右文
[mediagrid=cols=3-1|gap=20|title-font=Inter|title-size=18] [item][image]https://picsum.photos/seed/1155/600/400[/image][title]卡片1[/title][content]描述内容一[/content][/item] [item][image]https://picsum.photos/seed/1212/600/400[/image][title]卡片2[/title][content]描述内容二[/content][/item] [item][image]https://picsum.photos/seed/1223/600/400[/image][title]卡片3[/title][content]描述内容三[/content][/item] [/mediagrid]

卡片1

描述内容一

卡片2

描述内容二

卡片3

描述内容三
2列交替左右
[mediagrid=cols=2-1|gap=15] [item align=left][image]https://picsum.photos/seed/1239/600/400[/image][title]左图右文[/title][content]图片在左[/content][/item] [item align=right][image]https://picsum.photos/seed/1249/600/400[/image][title]右图左文[/title][content]图片在右[/content][/item] [/mediagrid]

左图右文

图片在左

右图左文

图片在右
3列网格·背景色
[mediagrid=cols=3-1|gap=20|bgcolor=#f9f6f0|title-size=20] [item][image]https://picsum.photos/seed/1139/600/400[/image][title]创新设计[/title][content]融合现代美学[/content][/item] [item][image]https://picsum.photos/seed/1146/600/400[/image][title]精湛工艺[/title][content]精益求精[/content][/item] [item][image]https://picsum.photos/seed/1155/600/400[/image][title]客户至上[/title][content]全程无忧[/content][/item] [/mediagrid]

创新设计

融合现代美学

精湛工艺

精益求精

客户至上

全程无忧
2列大标题
[mediagrid=cols=2-1|gap=20|align=right|title-font=Playfair Display|title-size=26|title-color=#2c3e50] [item][image]https://picsum.photos/seed/1212/600/400[/image][title]我们的团队[/title][content]资深专家[/content][/item] [item][image]https://picsum.photos/seed/1223/600/400[/image][title]技术实力[/title][content]核心专利[/content][/item] [/mediagrid]

我们的团队

资深专家

技术实力

核心专利
4列混合对齐
[mediagrid=cols=4-2|gap=20|bgcolor=#f0f4f8] [item][image]https://picsum.photos/seed/1239/600/400[/image][title]左图卡片[/title][content]标准[/content][/item] [item align=right][image]https://picsum.photos/seed/1249/600/400[/image][title]右图特殊[/title][content]单独右图[/content][/item] [item][image]https://picsum.photos/seed/1139/600/400[/image][title]左图卡片[/title][content]标准[/content][/item] [item align=right][image]https://picsum.photos/seed/1146/600/400[/image][title]右图特殊[/title][content]单独右图[/content][/item] [/mediagrid]

左图卡片

标准

右图特殊

单独右图

左图卡片

标准

右图特殊

单独右图
6列紧凑
[mediagrid=cols=6-1|gap=5|title-size=14|content-size=13] [item][image]https://picsum.photos/seed/1155/600/400[/image][title]卡片A[/title][content]紧凑[/content][/item] [item][image]https://picsum.photos/seed/1212/600/400[/image][title]卡片B[/title][content]无背景[/content][/item] [item][image]https://picsum.photos/seed/1223/600/400[/image][title]卡片C[/title][content]小间距[/content][/item] [item][image]https://picsum.photos/seed/1239/600/400[/image][title]卡片D[/title][content]多列[/content][/item] [item][image]https://picsum.photos/seed/1249/600/400[/image][title]卡片E[/title][content]桌面6列[/content][/item] [item][image]https://picsum.photos/seed/1139/600/400[/image][title]卡片F[/title][content]响应式[/content][/item] [/mediagrid]

卡片A

紧凑

卡片B

无背景

卡片C

小间距

卡片D

多列

卡片E

桌面6列

卡片F

响应式
纯文字卡片
[mediagrid=cols=3-1|gap=20] [item][title]纯文字[/title][content]只有文字内容。[/content][/item] [item][title]背景色[/title][content]可设置不同背景。[/content][/item] [item][title]整齐网格[/title][content]无图片依然整齐。[/content][/item] [/mediagrid]

纯文字

只有文字内容。

背景色

可设置不同背景。

整齐网格

无图片依然整齐。
带链接卡片
[mediagrid=cols=2-1|gap=20] [item link=https://example.com][image]https://picsum.photos/seed/1146/600/400[/image][title]可点击卡片[/title][content]整张都是链接[/content][/item] [item link=https://example.org][image]https://picsum.photos/seed/1155/600/400[/image][title]另一个链接[/title][content]点击跳转[/content][/item] [/mediagrid]

可点击卡片

整张都是链接

另一个链接

点击跳转

✏️ 在线 UBB 预览器

点击「预览」或按 Ctrl+Enter 查看渲染效果