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

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

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

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

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

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