HTML中使用ruby标签添加音标或者注释

ruby语法说明:

  • ruby :用它将需要注释或注音标的文字内容包围住,一般与rp、rt标签一起使用。
  • rp :在 ruby 中使用,防备那些不支持ruby标记的浏览器,主要用来放置括弧。对于支持这个标记的浏览器,rp标记的CSS样式是{display:none;}。
  • rt :定义字符的解释或发音,这个标记要跟在需要注释的文本后边。
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby标签title>
head>

<body>
    <ruby><rp>rp>
        <rt>Irt>
        <rp>rp><rp>rp>
        <rt>Lovert>
        <rp>rp><rp>rp>
        <rt>Yourt>
        <rp>rp>
    ruby>

    <ruby>
        <rp>(rp>饕餮<rt>taotiert><rp>)rp>
    ruby>
    <ruby>汉字 <rt>han zirt>ruby>
body>

html>

页面效果:
HTML中使用ruby标签添加音标或者注释_第1张图片
rt里的文字,对于横向显示的文章,它会显示在上方。对于竖向显示的文字,它会显示到右边。如果你觉得音标的字体太大了,可以用css设置成小字体。

你可能感兴趣的:(HTML,ruby,前端)