html5中关于<ruby>标签的详解

来源：动视网责编：小采时间：2020-11-27 15:29:04

html5中关于<ruby>标签的详解

html5中关于<ruby>标签的详解:今天学了HTML5的ruby标签，觉得挺有趣的，来记录一下。ruby可以作注释标签，内部有rp和rt标签。<ruby> 标记定义注释或音标。<rp> 告诉那些不支持ruby元素的浏览器该如何显示。<rt> 标记定义对ruby注释的内容文本。学完这个标签的第一

推荐度：

点击下载本文 文档为doc格式

导读html5中关于<ruby>标签的详解:今天学了HTML5的ruby标签，觉得挺有趣的，来记录一下。ruby可以作注释标签，内部有rp和rt标签。<ruby> 标记定义注释或音标。<rp> 告诉那些不支持ruby元素的浏览器该如何显示。<rt> 标记定义对ruby注释的内容文本。学完这个标签的第一

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

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

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

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

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

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

代码如下，来给一句日语做个小注释：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ruby注释标签</title>
 <style>
 p {
 text-align: center;
 }
 </style>
 </head>
 <body>
 <p>
 <ruby>月明<rp>(</rp><rt>つきあ</rt><rp>)</rp></ruby>かり昇る頃</p>
 <p>灯る <ruby>赤提灯 <rp>(</rp><rt>あかちょうちん</rt><rp>)</rp></ruby></p></body></html>

效果如下：

火狐谷歌：