HTML5使用<ruby>和<rt>来实现拼音标注效果

来源:互联网 发布:ipad下载软件付费 编辑:程序博客网 时间:2024/05/02 08:42

<!doctype html>

<html>
<head>
<style type="text/css">
ruby{
font-size:40px;

}
rt{
font-size:10px;

}
</style>
<meta charset="UTF-8">
</head>
<body>
   <p>
    <ruby>
海<rt>hai</rt>
水<rt>shui</rt>
朝<rt>chao</rt>
朝<rt>zhao</rt>
        朝<rt>zhao</rt>
        朝<rt>chao</rt>
朝<rt>zhao</rt>
        朝<rt>chao</rt>
        朝<rt>zhao</rt>
落<rt>luo</rt>
  </ruby>
  </p>
<p>
<ruby>
   浮<rt>fu</rt>
云<rt>yun</rt>
长<rt>zhang</rt>
长<rt>chang</rt>
        长<rt>chang</rt>
        长<rt>zhang</rt>
长<rt>chang</rt>
        长<rt>zhang</rt>
        长<rt>chang</rt>
消<rt>xiao</rt>
</ruby>
</p>
</body>
</html>
阅读全文
0 0
原创粉丝点击