![55e142f7b7a06364e8b69e6ca9d16994.png](https://i-blog.csdnimg.cn/blog_migrate/6244fbec189e30205c10c801c3536e40.png)
重要头部更新:可以直接在html上面自动显示汉字拼音了,这活要靠后端来干。
今天上网溜达的时候,在微博看到的,原来html上面可以用<ruby>标签显示拼音,我这暴脾气,马上试一下
<html>
<head>
<title>拼音</title>
</head>
<body>
<ruby>拼音</ruby>
</body>
</html>
在chrome看下结果:
![aee7cfbd174bc5ffa9ba7d305ffdeef4.png](https://i-blog.csdnimg.cn/blog_migrate/60c2c1829fc7bac6ed12c736617723bb.jpeg)
好尴尬啊,没有啥变化啊,我还以为能够神奇的自动显示拼音呢。再仔细看了下,原来拼音要自己写,好吧,我改改:
<html>
<head>
<title>拼音</title>
</head>
<body>
<ruby>拼音<rt>pinyin</rt></ruby>
</body>
</html>
我再看下结果:
![d873dce0214142e1fb184789653c9071.png](https://i-blog.csdnimg.cn/blog_migrate/2b90f88e5894357d9ddccb0680ff36b7.jpeg)
真的可以哦。但是,我不是一个容易满足的人,为啥不能用带声调的拼音呢,毕竟我又不是歪果仁,声调错了也是一种耻辱,不过输入音标字符和html没啥关系,是输入法的功能,我用的是搜狗输入法,它输入带声调的字母的做法是这样的:
![c9d5ba09baebe064686ca6f135fec740.png](https://i-blog.csdnimg.cn/blog_migrate/0d6c2e1472fbaa7791be0194beb1f7fb.jpeg)
打开搜狗输入法的软键盘
![7ca0c74b84ad1bef0e13e023984da141.png](https://i-blog.csdnimg.cn/blog_migrate/38091ed7413325a339d844a360c8e7cb.jpeg)
选择拼音字母,看到这个软键盘就能输入带声调的字母啦,最后的代码是这样的:
<html>
<head>
<title>拼音</title>
</head>
<body>
<ruby>我厉害吧<rt>diāochóngxiǎojì</rt></ruby>
</body>
</html>
显示的最终结果是这样的
![157fdc7efa2466ef790e5021ab0095cb.png](https://i-blog.csdnimg.cn/blog_migrate/07f21015fa3f84b89e4e742a2e077ccf.jpeg)
最后再说明一点,<ruby>支持几乎所有的新版浏览器,这是它具体支持的浏览器列表
![bf2a4d1e0593dd08be9365e8567704c5.png](https://i-blog.csdnimg.cn/blog_migrate/1af6c2c0ec0186a254096f9f55a20f18.jpeg)
基本的主流的都有了,大家如果需要更详细的信息,去官网看下吧。
更新:有评论说拼音和字没对齐,这个真不怪我,拼音的长度是不固定的,要想和汉字一一对应,只能使用终极大法,一字一拼法:
<html>
<head>
<title>拼音</title>
</head>
<body>
<ruby>我<rt>diāo</rt></ruby>
<ruby>厉<rt>chóng</rt></ruby>
<ruby>害<rt>xiǎo</rt></ruby>
<ruby>吧<rt>jì</rt></ruby>
</body>
</html>
效果如下:
![389a472ae95be6031834e886779fb7e5.png](https://i-blog.csdnimg.cn/blog_migrate/0bc51b5c67dfe40970e4a0ebd136f047.jpeg)
这下大家满足了吧。