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> p { 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標籤的效果如下：
還有一些瀏覽器不能支援<ruby>標籤，這個時候<rp>標籤就顯得尤其重要，<rp>我理解為“人品”的意思。人品好的瀏覽器就以在上面注釋的形式顯示出來，就如，而人品不好的就需要<rp>標籤來補充注釋。
<rp>裡面的文本會在瀏覽器安全色的時候不顯示出來，只有<rt>裡面的文本以在上面注釋的方式出現。而不相容的情況，<rt>裡面注釋的文本會在後面顯示，就如，這個時候<rp>裡麵包裹的內容就可以顯示出來。
html5 ruby標籤的效果如下：
提示：支援 "ruby" 元素的瀏覽器不會顯示 "rp" 元素的內容。
HTML 4.01 與 HTML 5 之間的差異
<ruby> 標籤是 HTML 5 的新標籤。
瀏覽器支援
IE 9+、Firefox、Opera、Chrome 和 Safari 支援 <ruby> 標籤。
注釋：IE 8 或更早版本的 IE 瀏覽器不支援 <ruby> 標籤。
【小編的相關文章】
html noscript標籤是什麼意思？關於<noscript>標籤的用法你瞭解多少？
html的var標籤是什嗎？關於var標籤的定義和用法詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
