HTML5 註釋標籤

今天學了HTML5的ruby標籤,以爲挺有趣的,來記錄一下。html

ruby能夠做註釋標籤,內部有rp和rt標籤。瀏覽器

<ruby>  標記定義註釋或音標。ruby

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

<rt>      標記定義對ruby註釋的內容文本。code

學完這個標籤的第一反應就是,我有方法給那些不會讀的日語單詞作假名註釋啦!!!htm

代碼以下,來給一句日語作個小注釋:blog

<!DOCTYPE html>
<html lang="en">
<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>

效果以下:it

火狐谷歌:class

還有一些瀏覽器不能支持<ruby>標籤,這個時候<rp>標籤就顯得尤爲重要,<rp>我理解爲「人品」的意思。人品好的瀏覽器就以在上面註釋的形式顯示出來,就如上圖,而人品很差的就須要<rp>標籤來補充註釋。meta

<rp>裏面的文本會在瀏覽器兼容的時候不顯示出來,只有<rt>裏面的文本以在上面註釋的方式出現。而不兼容的狀況,<rt>裏面註釋的文本會在後面顯示,就以下圖,這個時候<rp>裏面包裹的內容就能夠顯示出來。

 

以上。

相關文章
相關標籤/搜索