之前是直接将拼音放在文字上。
可以看到,拼音和汉字没对齐,因为拼音的长度是不固定的。
使用ruby标签一字一拼。
<html>
<head>
<title>拼音</title>
</head>
<body>
<ruby>汉<rt>Hàn</rt></ruby>
<ruby>字<rt>zì</rt></ruby>
<ruby>拼<rt> pīn</rt></ruby>
<ruby>音<rt>yīn</rt></ruby>
</body>
</html>
效果如下:
tips:
拼音声调可以用输入法的软件盘进行输入
不过google翻译等翻译软件也可以直接翻译