HTML怎么把汉语拼音给注释在汉字上面_汉字头上

当你用HTML添加文章的时候有没有遇到这样一个问题，文章中有很多生僻字，需要给文字加上注释拼音？

在之前我们想到最好的办法可能是如下：

“能打出饕（tao）餮（tie）的我就叫他爹”

这样将拼音追加在文字后面，这样看起来非常的长但是又没办法。可能有想过将拼音放在汉字头上，但是又不想写更多的代码来实现。现在好了，有了HTML5我们可以轻易的实现这个小需求了

<ruby></ruby>,<rt></rt>,<rp></rp>

现在我们来实现一下想要的功能

<ruby>饕<rp>(<rp><rt>tao</rt><rp>)</rp>&nbsp;餮<rp>(</rp><rt>&nbsp;tie</rt><rp>)</rp></ruby>

很好的实现了汉语拼音标注的功能，方便快捷。但是细心的朋友可能发现了，代码很长一串，而且中间还有（）并没有出现，这是怎么回事呢？

首先<ruby>标签是将所有需要注释的字包裹起来，然后实现上标的标签其实是<rt>标签，由于这个标签属于HTML5标签，很多老版本浏览器会不支持，那么当浏览器不支持的时候它就会像>>“饕tao餮tie”这样显示，非常不美观。加上<rp>当浏览器不支持时就可以显示成>>饕（tao）餮（tie） 这样的效果了

以上代码还加了实体符号 &nbsp; 如果有占位符标注也需要加上，但不建议使用，这里仅为了快速演示。