HTML中Progress標籤的定義及用法總結!

千鋒武漢 發表於 2021-10-22

       Progress標籤可以幫助我們輕鬆建立一個進度條,對於Web前端開發人員來說是非常有用處的,所以掌握好Progress標籤的用法對於前端開發人員很重要。下面,千鋒武漢Web前端老師就為大家分享在HTML中Progress標籤的詳細用法。

       “Progress”作為英文單詞有“程式、前進”的意思,那它作為HTML中的標籤又充當什麼樣的角色呢?我們跟著 千鋒武漢Web前端 老師來看看HTML中Progress標籤的定義及用法!

51

       一、Progress標籤定義及用法

       HTML中,Progress標籤是HTML5中新增的標籤,是使用來定義執行中的任務進度/程式,通常和JavaScript一起使用來實現進度條。

       Progress標籤不使用來表示度量衡(如:磁碟空間使用情況或相關的查詢結果)。如果需要表示度量衡,我們通常會使用meter標籤。

       二、Progress標籤定義及用法

       <Progress value="當前值" max="需要完成的值"></Progress>

       說明:

       Progress標籤雖然是雙標籤,但是標籤中的內容不顯示。Progress標籤如果不設定任何屬性,不同的瀏覽器執行有不同的效果,大家可以試試。

       三、Progress標籤屬性

       max:規定需要完成的值;value:規定程式的當前值;

       四、例項

       <!DOCTYPE HTML><HTML><head>

       <meta charset="utf-8" />

       <title>HTML5中Progress標籤(進度條)的詳細介紹</title>

       </head>

       <body style="background-color: bisque;">

       <h3>Progress標籤演示</h3>

       <Progress value="50" max="100"></Progress><br>

       <Progress value="100" max="100"></Progress><br>

       <Progress value="10" max="200"></Progress><br>

       <Progress value="150" max="200"></Progress><br>

       </body></HTML>

       執行結果:

圖片1

       結合JavaScript來動態改變Progress標籤的value屬性值,就可以實現進度條了。所以想要成為一名合格的web前端工程師,需要不斷的學習。希望以上的分享能幫到大家!

       本文來自千鋒教育,轉載請註明出處。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2838704/,如需轉載,請註明出處,否則將追究法律責任。