在网页中显示汉语拼音

要在网页中显示汉字拼音，需要用到三个HTML标签：

1. <ruby>标签：用来展示文字注音或则字符注释

2. <rp>标签：用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器，提供随后的圆括号。

3. <rt>标签：Ruby Text标签用于包含字符的发音注释

实例演示

<!-- 这是一种设置拼音的方法 -->
<ruby>
显示带拼音的中文字<rp>(</rp><rt>xiǎn shì dài pīn yīn de zhōng wén zì</rt><rp>)</rp>
</ruby>

下面就是显示效果 (简书不支持嵌入的<ruby>标签，只能用图片)

带拼音的汉字

<!-- 这是另外一种设置拼音的方法-->
<ruby>
  中 <rp>(</rp><rt>zhōng </rt><rp>)</rp>
  国 <rp>(</rp><rt>guó</rt><rp>)</rp>
</ruby>

显示效果：

带拼音的汉字

参考：

1. MDN <ruby> 标签
2. MDN <rp> 标签
3. MDN <rt> 标签