HTML在文字上加上带声调拼音

使用音标符组合成拼英音标 例如

ā á ǎ à

代码：

<span>ā</span>
<span>á</span>
<span>ǎ</span>
<span>à</span>

那么同理的可以把a换成b换成c等等等等

b̄ ć ď è

那如果想实现一个完整的拼英音标该怎么实现呢? 例如下面这个

nī haǒ

你好

<span>nī</span>  //你
<span>haǒ</span>  //好

会发现有一个问题，hao的音标应该在a上而不是在o上，那么我们可以试试把音标符移动到a的后面再试试呢

nī hǎo

你好

<span>nī</span>  //你
<span>hǎo</span> //好

别着急，在拼音中还有个比较特殊的音标，那就是 ü 加上音标的模样是这样的

<span>ǖ</span>
<span>ǘ</span>
<span>ǚ</span>
<span>ǜ</span>

可以看到是用了两个拼音符拼接而成的

大功告成！只需要这五个音标符就可以组成任何你想要的拼英音标啦！

但是！但是！在HTML中有一个标签提供了非常强大的音标显示功能 ruby

<ruby>
  汉 <rp>(</rp><rt>Hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

甚至还可以这样玩

<ruby>
  我 <rp>(</rp><rt>我知道</rt><rp>)</rp>
  是 <rp>(</rp><rt>你是</rt><rp>)</rp>
  一 <rp>(</rp><rt>一串</rt><rp>)</rp>
  串 <rp>(</rp><rt>文字</rt><rp>)</rp>
  文 <rp>(</rp><rt>！！！</rt><rp>)</rp>
  字 <rp>(</rp><rt>！！！</rt><rp>)</rp>
</ruby>

那么用上面学到的知识来做几个成品来看看吧

<ruby>
貘<rt>mò</rt>
</ruby>
<ruby>
没<rt>méi</rt>
</ruby>
<ruby>
驴<rt>lǘ</rt>
</ruby>
<ruby>
香<rt>xiāng</rt>
</ruby>

<ruby>锄<rt>chú</rt></ruby>
·
<ruby>禾<rt>hé</rt></ruby>
·
<ruby>日<rt>rì</rt></ruby>
·
<ruby>当<rt>dāng</rt></ruby>
·
<ruby>午<rt>wǔ</rt></ruby>
<br/>
<ruby>汗<rt>haǹ</rt></ruby>
·
<ruby>滴<rt>dī</rt></ruby>
·
<ruby>禾<rt>hé</rt></ruby>
·
<ruby>下<rt>xià</rt></ruby>
·
<ruby>土<rt>tǔ</rt></ruby>