有的时候,我们要给汉字标记拼音,让拼音显示要汉字的上面

<ruby>中国人<rp>(</rp><rt>zhong guo ren</rt><rp>)</rp></ruby>

效果如图:

<ruby> …… ルビをふる
  

<ruby><rt><rp>は ルビをふる際に使用します。

<rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。 <rt>と<rp>は、<ruby>~</ruby>の中で子要素として使用します。

<rp>~</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。 <ruby>タグに対応していないブラウザでは、 漢(かん)字(じ) のように表示されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

<ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。 ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。 HTML5では、<rb>タグは省略して<ruby>~</ruby>内に直接ルビベースを記述します。

※それぞれの旧ページ: <RUBY>・ <RB>・ <RT>・ <RP>

■使用例

HTMLソース

<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby><br>

<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

ruby(html)的更多相关文章

  1. 安装cocoapods遇到两大坑-Ruby版本升级和Podfile的配置

    今天安装cocoapods #移除原有ruby源 $ gem sources --remove https://rubygems.org/ #使用可用的淘宝网 $ gem sources -a htt ...

  2. Unable to download data from http://ruby.taobao.org/ & don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

    安装cocoapods,记录两个问题! 1.镜像已经替换成了 http://ruby.taobao.org/, 还是不能不能安装cocoapods, 报错:Unable to download dat ...

  3. 安装了ruby后怎么安装sass

    在命令行中输入 ruby -v 查看版本号 先移除默认的https://rubygems.org源,命令为gem sources --remove https://rubygems.org/,按回车 ...

  4. ruby 基础知识(一)

    突然今天发现一大神的博客:http://www.cnblogs.com/jackluo/archive/2013/01/22/2871655.html    相信初学者会受益颇多 ruby  参考文档 ...

  5. ruby 基础知识(二)

    ruby  中的动态方法 http://singleant.iteye.com/blog/1680382 Rails 大量使用了符号(symbol).符号看上去很像变量名,不过以冒号作为前缀.符号的例 ...

  6. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

  7. fzf by ruby

    fzf by ruby */--> fzf by ruby 1 github地址 https://github.com/junegunn/fzf 2 简介 软件通过匿名管道和grep扩展了bas ...

  8. The Safe Navigation Operator (&.) in Ruby

    The most interesting addition to Ruby 2.3.0 is the Safe Navigation Operator(&.). A similar opera ...

  9. Ruby on Rails 创建https应用

    1. 创建证书请求文件条件:私钥+证书签名请求+opensslyum install -y opensslmkdir /root/ssl/ && cd /root/ssl/openss ...

  10. Ruby数组

    Ruby数组是有序的,任何对象的整数索引的集合.每个数组中的元素相关联,并提取到的一个索引.下标与C或Java相似,从0开始.负数索引假设数组末尾,也就是说-1表示最后一个元素的数组索引,-2是数组中 ...

随机推荐

  1. 计算Excel中的Sheet个数

    $strpath="d:\ee.xlsx"$excel=new-object -comobject excel.application$WorkBook = $excel.Work ...

  2. Owin管道与asp.net管道模型

    ------2016.3.6 更新 文中提到没有Microsoft.Owin.Host.SystemWeb 这个dll 便不会加载Startup.Configuration,因为这个dll 其中有个O ...

  3. codeforces Gym 100187F F - Doomsday 区间覆盖贪心

    F. Doomsday Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/problem/F ...

  4. NAVICATE 修改存储过程提示PROCEDURE _Navicat_Temp_Stored_Proc already exists 解决方法

    推测是navicate修改存储过程会自动名为_Navicat_Temp_Stored_Proc的存储过程 创建完毕后自动drop 由于某些原因或bug导致最终没有drop,于是修改存储过程失败. 所以 ...

  5. C# OpenFileDialog和PictrueBox

     string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog(); openFile ...

  6. wordpress文章ID不连续显示问题的完美解决

    在最新版的 wordpress 系统中,依然存在着文章ID不连续显示的问题,也就是我们还没有上传多少文章,在数据库里的ID号已经很大了,也就是说如果我们的博客使用的是固定链接,那么在前台显示的ID相差 ...

  7. JS的setTimeout函数第一个参数问题

    setTimeout的第一个参数只能放一个无参的函数,更像放了一个函数指针在那里,如果要放带参数的话,就要拿个匿名函数包裹一下

  8. 架构设计:负载均衡层设计方案(4)——LVS原理

    之前我们花了两篇文章的篇幅,详细讲解了Nginx的原理.安装和特性组件.请参看<负载均衡层设计方案(2)——Nginx安装>(http://blog.csdn.net/yinwenjie/ ...

  9. Java再学习——线程之创建

    Java创建线程有两种方法,一种是继承Thread,另一种实现Runnable或Callable接口. 一,继承Thread public class APP { public static void ...

  10. 小白日记52:kali渗透测试之Web渗透-HTTPS攻击(Openssl、sslscan、sslyze、检查SSL的网站)

    HTTPS攻击 全站HTTPS正策划稿那位潮流趋势 如:百度.阿里 HTTPS的作用 CIA 解决的是信息传输过程中数据被篡改.窃取 [从中注入恶意代码,多为链路劫持] 加密:对称.非对称.单向 HT ...