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

<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. 【转】工科男IT职场求生法则

    转自:http://www.36dsj.com/archives/3459 我在IT职场打滚超过10年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说 ...

  2. socket 怎么设置心跳判断连接

    server的代码public abstract class Server { static readonly ILog logger = LogManager.GetLogger(typeof(Se ...

  3. CSS样式如何解决IE浏览器不同版本的兼容问题

    如果你想让浏览器是固定的IE6版本,那么你做网页的时候在<head>后面加上一句话: <meta http-equiv="X-UA-Compatible" con ...

  4. iOS开发——动画编程Swift篇&(五)CAKeyframeAnimation

    CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...

  5. Busybox支持中文的解决办法

    转载:http://blog.csdn.net/wavemcu/article/details/7202908 ******************************************** ...

  6. JSON使用——获取网页返回结果是Json的代码

    public String getWebData(String strUrl){ String json = null; try { URL url = new URL(strUrl); HttpUR ...

  7. Data Structure 之 二叉树

          在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用于实现二叉查找树和二叉堆 ...

  8. Spring MVC学习笔记02

    1.常用注解 1.@Autowired,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. <!-- 该 BeanPostProcessor 将自动起作用,对标注 @Autowir ...

  9. Windows OpenVPN Client and tls-auth

    The official Windows OpenVPN client does not seem to work properly with the tls-auth option if a key ...

  10. 结合源码看nginx-1.4.0之nginx多进程机制详解

    目录 0. 摘要 1. nginx多进程设计思想 2. nginx多进程设计数据结构 3. nginx进程间通信机制 4. 一个简单的多进程例子 5. 小结 6. 参考源码