HTML5技术

HTML5 ruby注释标签 - kumayato

字号+ 作者:H5之家 来源:H5之家 2017-02-23 15:02 我要评论( )

今天学了HTML5的ruby标签,觉得挺有趣的,来记录一下。 ruby可以作注释标签,内部有rp和rt标签。 ruby 标记定义注释或音标。 rp 告诉那些不支持ruby元素的浏览器该如何显示。 rt 标记定义对ruby注释的内容文本。 学完这个标签的第一反应就是,我有方法给那些

今天学了HTML5的ruby标签,觉得挺有趣的,来记录一下。

ruby可以作注释标签,内部有rp和rt标签。

<ruby>  标记定义注释或音标。

<rp>    告诉那些不支持ruby元素的浏览器该如何显示。

<rt>      标记定义对ruby注释的内容文本。

学完这个标签的第一反应就是,我有方法给那些不会读的日语单词做假名注释啦!!!

代码如下,来给一句日语做个小注释:

ruby注释标签 p { text-align月明(つきあ)かり昇る頃灯る 赤提灯 (あかちょうちん)

效果如下:

火狐谷歌:

还有一些浏览器不能支持<ruby>标签,这个时候<rp>标签就显得尤其重要,<rp>我理解为“人品”的意思。人品好的浏览器就以在上面注释的形式显示出来,就如上图,而人品不好的就需要<rp>标签来补充注释。

<rp>里面的文本会在浏览器兼容的时候不显示出来,只有<rt>里面的文本以在上面注释的方式出现。而不兼容的情况,<rt>里面注释的文本会在后面显示,就如下图,这个时候<rp>里面包裹的内容就可以显示出来。

 

以上。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    2017-02-23 14:05

  • html4与html5的区别 - Aqiaoba

    html4与html5的区别 - Aqiaoba

    2017-02-23 13:00

  • HTML5自定义播放器(简式) - Ace呼噜鳄

    HTML5自定义播放器(简式) - Ace呼噜鳄

    2017-02-23 12:02

  • HTML5 虚拟键盘出现挡住输入框的解决办法 - fiona118

    HTML5 虚拟键盘出现挡住输入框的解决办法 - fiona118

    2017-02-13 14:00

网友点评
e