单开一帖整理下，免得我又找不到了！
部分基于引用css类。

具体修改记录请看自定义博客的ㄧˋ点点记录。
本篇只写使用时的代码。

HTML

注音

<ruby>拼<rp>(</rp><rt>pīn</rt><rp>)</rp>音<rp>(</rp><rt>yīn</rt><rp>)</rp></ruby>

分割线

<hr>

删除线

<s>删除文字</s>

标签

标签样式1

<div class="note info">这里是 info 标签样式</div>
<div class="note info no-icon">这里是不带符号的 info 标签样式</div>
<div class="note primary">这里是 primary 标签样式</div>
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>
<div class="note warning">这里是 warning 标签样式</div>
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>
<div class="note danger">这里是 danger 标签样式</div>
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

标签样式2

<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

标签样式3

<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

豆瓣样式

<https://book.douban.com/subject/26637688/>

文字样式

<span class="half_background" style="--top: transparent; --bot: yellow;">高亮</span>
<span class="blur">高斯模糊，悬停显示</span>
<span class="sphl">特殊高亮，悬停拉满背景色</span>
<span class="shady">黑幕</span>
<span class="mark">强调</span>
<span class="mark_green">虚线样式强调</span>
<span class="mark_yellow">虚线样式强调</span>
<span class="mark_orange">虚线样式强调</span>
<span class="mark_blue">虚线样式强调</span>

改变文字方向

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  

上标下标

<p>这个文本包含 <sub>下标</sub>文本。</p>
<p>这个文本包含 <sup>上标</sup> 文本。</p>

空格

  

镜像翻转

<span class="mirrorRotateVertical">垂直镜像翻转</span>

动画效果

颤抖/摇晃

<div class="shake"></div>

<div class="shake-hard"></div>

<div class="shake-slow"></div>

<div class="shake-little"></div>

<div class="shake-horizontal"></div>

<div class="shake-vertical"></div>

<div class="shake-rotate"></div>

<div class="shake-opacity"></div>

<div class="shake-crazy"></div>

<div class="shake-chunk"></div>

<!-- Freeze animation at that point when :hover -->
<div class="shake-crazy shake-freeze">Hello</div>

<!-- To shake constant -->
<div class="shake-slow shake-constant"></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover"></div>

图片

表情

/*blob*/ 
<span class="blob"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/blob/ablobcheer.gif"></span>

/*ac*/ 
<span class="emoji"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/acfun_emoji/ac_01.png"></span>

/*咪子鱼*/ 
<span class="emoji"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/%E5%92%AA%E5%AD%90%E9%B1%BC/%E5%92%AA%E5%AD%90%E9%B1%BC_rwkk.gif"></span>

灯箱效果

<a data-fancybox="gallery-a" href="原图1的地址">
  <img class="rounded" src="缩略图1的地址" width="85%"/>
</a>
<div style="display:none">
  <a data-fancybox="gallery-a" href="原图2的地址">
    <img class="rounded" src="原图2的地址" />
  </a>

  <a data-fancybox="gallery-a" href="原图3的地址">
    <img class="rounded" src="原图3的地址" />
  </a>
</div>

Markdown

脚注

正文文本[^右上角标注释]

[^右上角标注释]: 注释文本。

博客内效果参考：兴趣使然的「原稿用紙」条目翻译整理及笔记

删除线

~~删除文字~~

分割线

---