AO3 HTML / Work Skin 预览器

最常用的 HTML

这些标签适合正文、notes 和普通排版。复杂效果先不用急。

• <p> 段落
• <br> 换行
• <strong> 加粗
• <em> 斜体
• <blockquote> 引用
• <hr> 分隔线
• <ul> / <ol> 列表
• <a href=""> 链接
• <img src=""> 图片
• <ruby> / <rt> / <rp> 注音或 ruby 标注
• <table> / <tr> / <td> / <th> 表格

图片

图片要写清楚 src 和 alt。外链图片最好选择稳定地址。

<figure>
  <img src="https://example.com/image.jpg" alt="窗边的一只红色杯子">
  <figcaption>图注可以补充上下文。</figcaption>
</figure>

注音 / ruby 标注

ruby 适合标注读音、假名、术语发音。rp 是给不支持 ruby 的环境准备的括号。

<ruby>風<rp>（</rp><rt>かぜ</rt><rp>）</rp></ruby>

表格

表格适合真正的结构化信息，比如时间表、对照表。不要拿复杂表格硬做手机界面。

<table>
  <tr>
    <th>时间</th>
    <th>事件</th>
  </tr>
  <tr>
    <td>08:00</td>
    <td>列车到站</td>
  </tr>
</table>

聊天体的安全写法

先在正文里写清楚角色名，再用 Work Skin 做气泡。

<p class="msg left"><strong>林：</strong>你到了吗？</p>
<p class="msg right"><strong>周：</strong>还在路上。</p>

Work Skin 常用 CSS

AO3 更适合简单、局部、可降级的样式。别把关键信息只放在颜色或位置里。

• max-width 控制宽度
• margin 控制外边距
• padding 控制内边距
• border 做边框
• background 做浅色底
• border-radius 做圆角

发布前检查

一个简单规则：关掉 Work Skin 后，作品仍然应该能读懂。

• 角色名不要只靠颜色区分。
• 复杂表格先在手机尺寸下看一眼。
• 复制到 AO3 后一定用 Preview 页面复查。
• 不要在正文里写 <script>、<iframe>、<style>。