HTML使用标签显示拼音
2019-06-09 本文已影响0人
南风逸梦
之前是直接将拼音放在文字上。
image.png
image.png
可以看到，拼音和汉字没对齐，因为拼音的长度是不固定的。
使用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>
效果如下：
image.png
tips：
拼音声调可以用输入法的软件盘进行输入
不过google翻译等翻译软件也可以直接翻译
image.png
