html5 ruby標簽的定義及使用方法詳解（內有實例介紹）

2020-03-24 15:54:09

字體：大中小

來源：轉載

供稿：網友

本篇文章主要為大家講解了html5中一個新標簽，html5 ruby標簽，雖然不算是新的，但也是在html5里新的標簽，html5 ruby標簽的定義和具體的用法實例都在這篇文章中，希望大家認真閱讀

html5 ruby標簽的定義和用法：

ruby 標簽定義 ruby 注釋（中文注音或字符）。

在東亞使用，顯示的是東亞字符的發音。

與 ruby 以及 rt 標簽一同使用：

ruby 元素由一個或多個字符（需要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 ruby 元素時顯示的內容。

HTML5 ruby 標簽實例

一個 ruby 注釋：

 ruby 漢 rt rp ( /rp ㄏㄢˋ rp ) /rp /rt  /ruby

html5 ruby標簽的使用(不同瀏覽器下的兼容性)

由于需要在網頁中顯示日語的注音,所以使用了該標簽.

rp 標簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

HTML5: ruby 漢 rt rp ( /rp ㄏㄢˋ rp ) /rp /rt /ruby

HTML4: none

rt 標簽定義字符（中文注音或字符）的解釋或發音。

HTML5: ruby 漢 rt ㄏㄢˋ /rt /ruby

HTML4: none

ruby 標簽定義 ruby 注釋（中文注音或字符）。

HTML5: ruby 漢 rt rp ( /rp ㄏㄢˋ rp ) /rp /rt /ruby

HTML4: none

但是有的瀏覽器對該標簽的支持不夠,原以為低版本的IE下該標簽會失效,誰知道從IE6-9都支持該標簽,

另我意想不到的是firefox竟然不支持該標簽,chrome下雖然支持,但也有問題,就是得去掉rp標簽,如果

加上則注音不出現在文字的頭部.最后沒辦法,在頁面加載完后,再利用js去掉rp標簽.

判斷chrome瀏覽器,替換掉rp標簽,但是在chrome瀏覽器下,字體總有一個固定的最小字體大小,通過后兩句腳本可以解決這個問題

if (window.navigator.userAgent.indexOf( Chrome ) != -1) { $( ruby ).each( function (i, o) { $(o).html($(o).html().replace(/ rt //rt rp /( //rp (.*) rp /) //rp /gmi, rt $1 /rt )); $( html ).css( -webkit-text-size-adjust , none  $( ruby rt ).css( font-size , 9px

HTML5 ruby 注釋標簽:

今天的HTML5中的ruby標簽，覺得挺有趣的，來記錄一下。

ruby可以作注釋標簽，內部有rp和rt標簽。

ruby 標記定義注釋或音標。

rp 告訴那些不支持ruby元素的瀏覽器該如何顯示。

rt 標記定義對ruby注釋的內容文本。

學完這個標簽的第一反應就是，我有方法給那些不會讀的日語單詞做假名注釋啦！！！

代碼如下，來給一句日語做個小注釋：

 !DOCTYPE html  html  head  meta charset= UTF-8  title ruby注釋標簽 /title  style  text-align: center; /style  /head  body  p ruby 月明 rp ( /rp rt つきあ /rt rp ) /rp /ruby かり昇る頃 /p  p 燈る ruby 赤提燈 rp ( /rp rt あかちょうちん /rt rp ) /rp /ruby /p  /body  /html

html5 ruby標簽的效果如下：