masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > html5中关于<ruby>标签的详解

html5中关于<ruby>标签的详解

黄舟
Lepaskan： 2017-07-17 13:32:48
asal
2902 orang telah melayarinya

今天学了HTML5的ruby标签，觉得挺有趣的，来记录一下。

ruby可以作注释标签，内部有rp和rt标签。

  标记定义注释或音标。

　   告诉那些不支持ruby元素的浏览器该如何显示。

      标记定义对ruby注释的内容文本。

学完这个标签的第一反应就是，我有方法给那些不会读的日语单词做假名注释啦！！！

代码如下，来给一句日语做个小注释：

<!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>
Salin selepas log masuk

效果如下：

火狐谷歌：

还有一些浏览器不能支持标签，这个时候标签就显得尤其重要，我理解为“人品”的意思。人品好的浏览器就以在上面注释的形式显示出来，就如上图，而人品不好的就需要标签来补充注释。

里面的文本会在浏览器兼容的时候不显示出来，只有里面的文本以在上面注释的方式出现。而不兼容的情况，里面注释的文本会在后面显示，就如下图，这个时候里面包裹的内容就可以显示出来。

 

 

Atas ialah kandungan terperinci html5中关于<ruby>标签的详解 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
h5 html5 ruby
sumber：php.cn
Artikel sebelumnya：html中<q>标签与<blockquote>标签的区别 Artikel seterusnya：html注释标记<ruby>标签以及和它的子元素<rt>、<rp>
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan