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

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

       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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章