之前是直接将拼音放在文字上。
可以看到，拼音和汉字没对齐，因为拼音的长度是不固定的。
使用ruby标签一字一拼。
效果如下：
tips：
拼音声调可以用输入法的软件盘进行输入
不过google翻译等翻译软件也可以直接翻译
定义和用法
<rp>标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
ruby 注释是中文注音或字符。
在东亚使用，显示的是东亚字符的发音。
与 <ruby>以及 <rt>标签一同使用：
ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
HTML 4.01 与 HTML 5 之间的差异
<rp>标签是 HTML 5 的新标签。
提示和注释
提示：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。
全局属性
<rp>标签支持 HTML 中的全局属性。
事件属性
<rp>标签支持 HTML 中的事件属性。
