之前是直接将拼音放在文字上。
    使用 <ruby> 标签显示拼音 - 图1

    使用 <ruby> 标签显示拼音 - 图2

    可以看到，拼音和汉字没对齐，因为拼音的长度是不固定的。
    使用ruby标签一字一拼。

    1. <html>
    2. <head>
    3. <title>拼音</title>
    4. </head>
    5. <body>
    6. <ruby>汉<rt>Hàn</rt></ruby>
    7. <ruby>字<rt>zì</rt></ruby>
    8. <ruby>拼<rt> pīn</rt></ruby>
    9. <ruby>音<rt>yīn</rt></ruby>
    10. </body>
    11. </html>

    效果如下：
    使用 <ruby> 标签显示拼音 - 图3

    tips：
    拼音声调可以用输入法的软件盘进行输入
    不过google翻译等翻译软件也可以直接翻译
    使用 <ruby> 标签显示拼音 - 图4