HTML5 <ruby> 标签定义和用法详解

作者:前端大神~ | 时间:2019-05-09

<ruby> 标签是 HTML5 中的新标签,对于这个标签很多人比较陌生,也不太清楚它可以用来做什么,下面我就对这个标签做一个详细的讲解。

定义和说明

HTML5 <ruby> 标签用来定义 ruby 注释(中文注音或字符)。


通常我们会将 <rp> 标签与 <ruby> 和 <rt> 标签一起使用

<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成

<rp> 元素用来定义当浏览器不支持 "ruby" 元素时显示的内容。

实例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

</body>
</html>

显示效果:

HTML5<ruby>标签定义和用法详解

浏览器支持

除了IE 8 或更早版本的 IE 浏览器不支持 <ruby> 标签,其它大多数浏览器都已经可以很好的支持ruby标签了。比如:IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <ruby> 标签。


已上就是HTML5 <ruby> 标签定义和用法的一些说明讲解,希望通过这些讲解,大家能够掌握HTML5 <ruby> 标签怎么使用。