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

<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. KVO机制

    KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用来监测对象的某些属性的实时变化情况并作出响应 首先,假设我们的目标是在一个UITableViewController内 ...

  2. UVALive 4221 Walk in the Park 扫描线

    Walk in the Park 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemi ...

  3. HDU 4287 Intelligent IME hash

    Intelligent IME Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  4. defer属性---->执行外部脚本

    HTML4---->只有IE支持 不需要是外部脚本. HTML5---->主流都支持 defer 属性仅适用于外部脚本(只有在使用 src 属性时) 值 描述 defer 规定当页面已完成 ...

  5. 虚拟机VMware 9安装苹果MAC OSX 10.8图文教程

    前些天虚拟机VMware Workstation 9出来,相信大家都已经熟悉VM9了,至于MAC OSX 10.8系统,那也是出来一段时间了,本篇文章就是来讲解VMware Workstation 9 ...

  6. acdreamoj1108(The kth number)

    题目链接:http://acdream.info/problem? pid=1108 题意:n个数的数列,m次查询某个区间出现次数第k多的数出现的次数.n,m<=100000 解法:这个由于是离 ...

  7. android Unable to instantiate application

    最近一段时间在做项目时候遇到一个错误老是解决不了,log如下: FATAL EXCEPTION: main12-11 09:08:53.922 E/AndroidRuntime( 1227): jav ...

  8. oracle视图总结

    视图简介: 视图是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改.视图基于的表称为基表.视图是存储在数据字典里的一条select语句. 通过创建视图可以提取数 ...

  9. 标准库 - fmt/scan.go 解读

    // Copyright 2010 The Go Authors. All rights reserved. // Use of this source code is governed by a B ...

  10. 重置kafka的offset

    如果你在使用Kafka来分发消息,在数据处理的过程中可能会出现处理程序出异常或者是其它的错误,会造成数据丢失或不一致.这个时候你也许会想要通过kafka把数据从新处理一遍,我们知道kafka默认会在磁 ...