开篇

前不久在知乎(真的不是上班摸鱼)上看到了一篇很有意思的文章，里面介绍的就是在html上显示拼音，感觉很有意思，赶紧自己试了一下顺便记录下来了，毕竟要养成爱学习、爱记录的好习惯。

标签

HTML 元素 被用来展示东亚文字注音或字符注释。—–MDN地址

很简单的的一个元素，主要用来给文字增加注释或者注音，下面我们来具体看下实现的代码和效果吧。

Code && Effect

Code:

<div class="wrap">
  <ruby>
    我是神奇的带拼音中国字
    <rt>woshishenqidedaipinyinzhongguozi</rt>
  </ruby>
</div>

Effect

看到这里，效果还是阔以的哈，但是总感觉哪里怪怪的。仔细看一下，卧槽，拼音和汉字竟然没有对齐。作为一个合格(强迫症)的前端，这怎么能忍呢。要想实现对齐，只能放出大招了—–终极粗暴法，一字一拼。

<div class="wrap">
  <ruby>我<rt>wo</rt></ruby>
  <ruby>是<rt>shi</rt></ruby>
  <ruby>神<rt>shen</rt></ruby>
  <ruby>奇<rt>qi</rt></ruby>
  <ruby>的<rt>de</rt></ruby>
  <ruby>带<rt>dai</rt></ruby>
  <ruby>拼<rt>pin</rt></ruby>
  <ruby>音<rt>yin</rt></ruby>
  <ruby>中<rt>zhong</rt></ruby>
  <ruby>国<rt>guo</rt></ruby>
  <ruby>字<rt>zi</rt></ruby>
</div>

哈哈哈，这下就舒服多了吧。做到这里，博主兴冲冲的拿去给同是前端的朋友炫zhuang耀bi，结果惨遭鄙视了。

话已经放出去了，但是这个音标声调怎么搞呢。我又去仔细阅读了一下知乎上的文章，不得不佩服大佬就是大佬哈，还真的可以做到。不过这个音标声调就不是技术方面的了，而是输入法的功能，以下是搜狗输入法添加音标的过程。

打开搜狗输入法的软键盘

点击右上角键盘icon，然后选择拼音字母，就可以输入带声调的拼音啦:

<div class="wrap">
  <ruby>换<rt>huàn</rt></ruby>
  <ruby>个<rt>gè</rt></ruby>
  <ruby>短<rt>duǎn</rt></ruby>
  <ruby>点<rt>diǎn</rt></ruby>
  <ruby>的<rt>dē</rt></ruby>
  <ruby>文<rt>wén</rt></ruby>
  <ruby>案<rt>àn</rt></ruby>
</div>

效果如下：

到此，带拼音的汉字算是完美实现了，哈哈哈，大家快学习一下，拿去炫zhuāng耀bī吧。

结语

以上就是本人关于如何使用<ruby/>标签实现带拼音的汉字的一点理解了。我还试了下，不只是汉语，日语等其他也是可以加的，包括markdown语法也是支持<ruby/>标签的，就像本文里面的一样。到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

---