LunaTalk HTML 手动版零基础入门——从标签到完整角色卡
LunaTalk HTML 的定位
LunaTalk 支持在角色卡回复里用 HTML 标签让渲染器显示游戏化界面。和普通网页 HTML 相比,LunaTalk 的 HTML 有几个特殊约束:
| 特性 | LunaTalk 的情况 |
|---|---|
<style> 标签 | ❌ 不支持 |
独立 <script> 块 | ❌ 不支持 |
内联 onclick="" 事件 | ✅ 支持 |
<font> 标签 | ✅ 支持(传统标签,LunaTalk 渲染器兼容) |
<button> 标签 | ✅ 支持(带内联 onclick) |
<table> 标签 | ✅ 支持 |
<b>/<i>/<u>/<s> 标签 | ✅ 支持 |
<h1>~<h6> 标签 | ✅ 支持 |
核心标签速查表
文字样式类
| 效果 | HTML 写法 |
|---|---|
| 加粗 | <b>文字</b> 或 <strong>文字</strong> |
| 斜体 | <i>文字</i> 或 <em>文字</em> |
| 下划线 | <u>文字</u> |
| 删除线 | <s>文字</s> |
| 颜色(色名) | <font color="red">红色文字</font> |
| 颜色(色码) | <font color="#FF00FF">玫红色</font> |
| 大小(1~7) | <font size="5">大字</font> |
| 内联样式 | <span style="color: blue; font-size: 20px;">蓝色 20px</span> |
标题层级
<h1>一级标题(最大)</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h6>六级标题(最小)</h6>
换行和空白
<br> ← 换行(单标签,无闭合)
← 空格(实体)
<hr> ← 水平线分隔
表格
<table style="border-collapse: collapse; width: 100%;">
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>数据格</td><td>数据格</td></tr>
</table>
按钮(带交互)
<button onclick="这里写内联JavaScript代码">按钮显示文字</button>
按钮的 onclick 里最常用的操作是把文字填入输入框(见内联脚本页面的完整模板)。
颜色代码速查
帮助文档提供了一张颜色代码大全图(本文配套图片 html-color-codes.png)。常用色名参考:
| 色名 | 色码 | 适合什么 |
|---|---|---|
| red | #FF0000 | 红色系,强调、警告 |
| blue | #0000FF | 蓝色系,对话文字、状态栏 |
| pink | #FFC0CB | 粉色系,内心独白、恋爱向 |
| darkblue | #00008B | 深蓝色,表格文字 |
| lightblue | #ADD8E6 | 浅蓝色,表格/按钮背景 |
| black | #000000 | 黑色,正文 |
| gray | #808080 | 灰色,次要信息 |
| white | #FFFFFF | 白色,背景对比 |
LunaTalk HTML 的实战三步走
第一步:在角色卡格式要求里声明 HTML
(必写)全部回复以 HTML 格式输出。
(必写)不要生成 <style> 标签。
(必写)所有脚本必须内联在 HTML 元素事件中(如 onclick="...")。
第二步:在角色卡格式要求里贴 HTML 模板
对话格式参考:
<font color="blue"><b>"对话内容"</b></font>
内心独白格式参考:
<font color="pink"><i>(内心活动)</i></font>
状态栏表格格式参考:
<table style="background-color: lightblue; color: darkblue;">
<tr><td>项目</td><td>内容</td></tr>
</table>
第三步:测试渲染效果
发布角色卡前一定要在 LunaTalk 里测实际渲染——不要只看 AI 输出的 HTML 代码。常见问题:
<font>没闭合 → 后面全部变色- 内联脚本写错 → 按钮点击没反应
- 颜色写了色码但 LunaTalk 不识别 → 换色名试试
- 表格边框没设 → 表格各列之间没分隔
完整 HTML 角色卡片段示例
这是一个修仙模拟器角色卡的格式要求区块完整示例:
格式要求:
全部回复以 HTML 格式输出。不要 <style> 标签。所有脚本内联。
1. 场景描写:正常文字,不加特殊格式
2. NPC 对话:<font color="blue"><b>"对话"</b></font>
3. 玩家内心活动:<font color="pink"><i>(内心)</i></font>
4. 回复末尾必须输出状态栏表格:
<table style="background-color: lightblue; color: darkblue; border-collapse: collapse;">
<tr><td>姓名</td><td>林风</td><td>灵根</td><td>五灵根</td></tr>
<tr><td>修为</td><td>炼气一层</td><td>灵力</td><td>7/100</td></tr>
<tr><td>好感度</td><td>XX</td><td>位置</td><td>外门住所</td></tr>
</table>
5. 回复末尾提供 3 个行动选项按钮(见按钮模板)
更多资源
帮助文档(help.lunaailab.com/guide/advanced-features.html)的「HTML 基础语法教学」章节有更详细的教程和示例代码,可以在 HTML 手动版里复制粘贴直接用。本文的速查表是从帮助文档浓缩而来。

