美文网首页
在网页中显示汉语拼音

在网页中显示汉语拼音

作者: Q幽兰Q | 来源:发表于2019-08-04 17:44 被阅读0次

要在网页中显示汉字拼音,需要用到三个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> 标签

相关文章

  • 在网页中显示汉语拼音

    要在网页中显示汉字拼音,需要用到三个HTML标签: 标签:用来展示文字注音或则字符注释 标签:用于为那些不能使用 ...

  • UIWebView的使用

    实现5个功能1 在屏幕中显示指定的网页2 控制屏幕中的网页3 在网页中加载显示PDF,Word,和JPEG图片4 ...

  • fish shell mac history历史路径

    或者在terminal中输入命令 在打开的网页中 会显示

  • 网页加载进度条

    在iOS中大量的app中都会应用到网页加载,在网页加载显示的过程中显示网页是否加载完成.当然,我们平时都是利用使用...

  • App内嵌网页图片不显示

    1. 网页浏览器中图片可以显示,但是在app内嵌网页中不显示一般是图片的地址不安全,app出于安全不给其显示而出现...

  • bootstrap中标记代码内容的标签

    1、在网页中显示

    标签 在网页中显示“<”、“>”等特殊字符应当进行适当转换才能正常显示。以标题为例,代码如...

  • Flutter js 相互(调用)通信

    应用场景: 在Flutter 中显示一个网页(H5之类),然后在Flutter中可以调用网页js里的方法; js里...

  • HTML 图像

    通过使用 HTML,可以在文档中显示图像。 实例 插入图像 本例演示如何在网页中显示图像。 从不同的位置插入图片 ...

  • 前端结构与标签

    格式: ---根标签 ---里面的内容会显示在 窗口上面 ---body里面的内容都会显示在网页中 1、 加粗,用...

  • WKWebView的坑之图片显示不完全

    最近在做iPad Pro适配时遇到了WKWebView图片显示不完全的坑 在显示网页中的大尺寸图片时,图片显示不完...

网友评论

      本文标题:在网页中显示汉语拼音

      本文链接:https://www.haomeiwen.com/subject/aayydctx.html