Crushon.AI 角色简介 HTML 格式化：支持的标签与写法

为什么要用 HTML 格式化

Crushon 的角色简介区域原本是纯文本，后来加入了 HTML 支持。格式化的好处：

• 让角色卡详情页看起来更专业
• 可以嵌入多张角色立绘
• 用标题、列表、引用块把设定组织得更清晰
• 注意：HTML 只影响角色卡展示，不影响角色行为（角色行为由性格描述、开场白、模型决定）

完整支持的 HTML 标签

以下每个标签后面附作用说明和示例用法。标签名用方括号标注，用法示例写在代码块里。

文本格式化

• 加粗（b / strong） — 让文字变粗显示
• 斜体（i / em） — 让文字倾斜显示
• 下划线（u） — 给文字加下划线
• 删除线（s） — 给文字加删除线
• 换行（br） — 强制换行

结构元素

• 段落（p） — 自动加段落间距
• 引用块（blockquote） — 缩进 + 左边框
• 无序列表（ul / li）— 圆点列表
• 有序列表（ol / li）— 数字列表
• 小节标题（h3 / h4）— 只有三级和四级标题可用，不要用一级或二级
• 水平分隔线（hr）— 画一条分隔线
• 预格式化（pre）— 保留空白和换行

图片和链接

• 嵌入图片（img）— 显示图片
• 超链接（a）— 可点击的链接
• 带图注图片（figure + figcaption）— 图片加说明文字

容器元素

• 块级容器（div）— 可以加 style 属性
• 行内容器（span）— 可以加 style 属性

表格

• table 表格容器 / tr 表格行 / td 数据单元格 / th 表头单元格

支持内联 CSS

可以在标签里用 style 属性添加样式，常用属性：

• color — 文字颜色
• font-size — 字号
• background-color — 背景色
• margin / padding — 外边距 / 内边距
• border — 边框
• text-align — 对齐方式
• display: flex — Flexbox 布局

不支持的功能

绝对不要用：

• JavaScript 代码（script 标签）— 完全禁用
• 外部样式表（style 标签）— 禁用（内联 style 可以）
• 内嵌框架（iframe）— 禁用
• 表单元素（input、button 等）— 安全原因禁用
• 视频和音频（video / audio）— 目前不支持

完整示例

以下是一段可以直接粘贴到角色简介区的 HTML 代码：

<img src="https://你的图床/character-portrait.png" alt="Aeloria 立绘" width="200">

<p><em>"宇宙是一张无尽的织锦，由所有生命的选择共同编织。"</em></p>

<h3>🛡️ 背景</h3>
<p>Aeloria 是从宇宙能量中诞生的守护者，负责守护维度之间的边界。</p>

<h3>⚡ 能力</h3>
<ul>
  <li><strong>星域之眼</strong>：能看穿时间与空间</li>
  <li><strong>星界护盾</strong>：抵御暗能量的保护结界</li>
  <li><strong>星际飞行</strong>：在维度之间自由穿行</li>
</ul>

<h3>✨ 性格</h3>
<p>Aeloria <em>沉稳、睿智、富有同理心</em>。说话语调平和，给人可靠的安全感。</p>

<p style="margin-top: 20px; color: #888;">Are you ready to embark on a journey with Aeloria?</p>

快速排版检查

写完 HTML 后不要直接发布，先在预览区看一遍：

• 图片地址是否正确、能正常加载
• 列表、表格的格式是否整齐
• 没有未闭合的标签（会导致后续内容被吃掉）
• 内联 CSS 没有写出太夸张的效果（可能在移动端看不太好）