Fe-interview: [html] 第86天 举例说明你对HTML5的ruby标签的理解,都有哪些应用场景?

Created on 10 Jul 2019  ·  4Comments  ·  Source: haizlin/fe-interview

第86天 举例说明你对HTML5的ruby标签的理解,都有哪些应用场景?

html

Most helpful comment

<section>
  <ruby class="spz">
    <rb>茕</rb>
    <rt>qióng</rt>
    <rb>茕</rb>
    <rt>qióng</rt>
    <rb>孑</rb>
    <rt>jié</rt>
    <rb>立</rb>
    <rt>lì</rt>
    <rb>沆</rb>
    <rt>hàng</rt>
    <rb>瀣</rb>
    <rt>xiè</rt>
    <rb>一</rb>
    <rt>yī</rt>
    <rb>气</rb>
    <rt>qì</rt>
  </ruby>
  <ruby class="spz">
    <rb>踽</rb>
    <rt>jǔ</rt>
    <rb>踽</rb>
    <rt>jǔ</rt>
    <rb>独</rb>
    <rt>dú</rt>
    <rb>行</rb>
    <rt>xíng</rt>
    <rb>醍</rb>
    <rt>tí</rt>
    <rb>醐</rb>
    <rt>hú</rt>
    <rb>灌</rb>
    <rt>guàn</rt>
    <rb>顶</rb>
    <rt>dǐng</rt>
  </ruby>
  <ruby class="spz">
    <rb>绵</rb>
    <rt>mián</rt>
    <rb>绵</rb>
    <rt>mián</rt>
    <rb>瓜</rb>
    <rt>guā</rt>
    <rb>瓞</rb>
    <rt>dié</rt>
    <rb>奉</rb>
    <rt>fèng</rt>
    <rb>为</rb>
    <rt>wéi</rt>
    <rb>圭</rb>
    <rt>guī</rt>
    <rb>臬</rb>
    <rt>niè</rt>
  </ruby>
  <ruby class="spz">
    <rb>龙</rb>
    <rt>lóng</rt>
    <rb>行</rb>
    <rt>xíng</rt>
    <rb>龘</rb>
    <rt>dá</rt>
    <rb>龘</rb>
    <rt>dá</rt>
    <rb>犄</rb>
    <rt>jī</rt>
    <rb>角</rb>
    <rt>jiǎo</rt>
    <rb>旮</rb>
    <rt>gā</rt>
    <rb>旯</rb>
    <rt>lá</rt>
  </ruby>
</section>

image

All 4 comments

标签定义 ruby 注释(中文注音或字符)。

在东亚使用,显示的是东亚字符的发音。

以及 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。 (摘自博客)

<section>
  <ruby class="spz">
    <rb>茕</rb>
    <rt>qióng</rt>
    <rb>茕</rb>
    <rt>qióng</rt>
    <rb>孑</rb>
    <rt>jié</rt>
    <rb>立</rb>
    <rt>lì</rt>
    <rb>沆</rb>
    <rt>hàng</rt>
    <rb>瀣</rb>
    <rt>xiè</rt>
    <rb>一</rb>
    <rt>yī</rt>
    <rb>气</rb>
    <rt>qì</rt>
  </ruby>
  <ruby class="spz">
    <rb>踽</rb>
    <rt>jǔ</rt>
    <rb>踽</rb>
    <rt>jǔ</rt>
    <rb>独</rb>
    <rt>dú</rt>
    <rb>行</rb>
    <rt>xíng</rt>
    <rb>醍</rb>
    <rt>tí</rt>
    <rb>醐</rb>
    <rt>hú</rt>
    <rb>灌</rb>
    <rt>guàn</rt>
    <rb>顶</rb>
    <rt>dǐng</rt>
  </ruby>
  <ruby class="spz">
    <rb>绵</rb>
    <rt>mián</rt>
    <rb>绵</rb>
    <rt>mián</rt>
    <rb>瓜</rb>
    <rt>guā</rt>
    <rb>瓞</rb>
    <rt>dié</rt>
    <rb>奉</rb>
    <rt>fèng</rt>
    <rb>为</rb>
    <rt>wéi</rt>
    <rb>圭</rb>
    <rt>guī</rt>
    <rb>臬</rb>
    <rt>niè</rt>
  </ruby>
  <ruby class="spz">
    <rb>龙</rb>
    <rt>lóng</rt>
    <rb>行</rb>
    <rt>xíng</rt>
    <rb>龘</rb>
    <rt>dá</rt>
    <rb>龘</rb>
    <rt>dá</rt>
    <rb>犄</rb>
    <rt>jī</rt>
    <rb>角</rb>
    <rt>jiǎo</rt>
    <rb>旮</rb>
    <rt>gā</rt>
    <rb>旯</rb>
    <rt>lá</rt>
  </ruby>
</section>

image

ruby 包含多个rt,rp标签构成,用以表示注释



sha

bi

image

Was this page helpful?
0 / 5 - 0 ratings