使用html5怎么給漢字加拼音

發(fā)布時(shí)間：2021-04-16 16:13:36 來源：億速云閱讀：397 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)使用html5怎么給漢字加拼音，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一、給漢字加拼音 <ruby><rt>

demo一眼便知：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我們都是優(yōu)秀的人
          <rt>wo men dou shi you xiu de ren</rt>
        </ruby>
    </body>
</html>

使用html5怎么給漢字加拼音

拼音自動(dòng)的居中，站漢字的平分位置。

假如我們刪掉其中幾個(gè)拼音，會(huì)是怎么樣呢，請(qǐng)看效果：

使用html5怎么給漢字加拼音

是不是很智能、很方便呢?。?！

二、進(jìn)度條

progress進(jìn)度條:

使用html5怎么給漢字加拼音

話不多說，直接上代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我們都是優(yōu)秀的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙進(jìn)度：<progress value="36" max="100"></progress>
    </body>
</html>

是不是很簡單很方便呢！

但是呢注意一點(diǎn)：
progress不適合用來表示度量衡，如果想表示度量衡，我們應(yīng)該使用meter標(biāo)簽代替。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我們都是優(yōu)秀的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙進(jìn)度：<progress value="36" max="100"></progress>
        <br>
        <br>
        <meter value="80" min="0" max="100"></meter> 百分之八十
        <br>
        <br>
        <br>
        <meter value="0.1"></meter> 10%
    </body>
</html>

看完上述內(nèi)容，你們對(duì)使用html5怎么給漢字加拼音有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

使用html5怎么給漢字加拼音

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽