首頁 > web前端 > H5教程 > 主體

html5 progress標籤怎麼用? progress標籤的屬性介紹

寻∝梦
發布: 2018-09-04 11:08:41
原創
8265 人瀏覽過

本篇文章主要的介紹了關於html5 progress標籤的用法介紹,還有關於html5 progress標籤的屬性用法的介紹。接下來就讓我們一起來看看這篇文章吧

首先我們先介紹html5 progress標籤的用法:

標籤定義運行中的進度(進程)。

可以使用標籤來顯示javascript中耗費時間的函數的進度。

表示任務的進度,背景為灰色,完成的部分填入脈動式綠色條(但不同的瀏覽器下,樣式還是不同的)。

提示:請使用 標籤來顯示下載的進度。

再來讓我們來看一個html5 progress標籤的使用實例:

#標記「下載進度」:

对象的下载进度:
<progress value=&#39;70&#39; max=&#39;100&#39;></progress>
登入後複製

效果如圖:

html5 progress標籤怎麼用? progress標籤的屬性介紹

圖很明顯,就不多說了。

現在來說說html5 progress標籤的屬性介紹:

#1.可以透過value屬性來設定百分比(0~1的小數)

通常我們也可以在元素內部再放置進度值,這樣當瀏覽器不(www.php.cn)支援的時候就可以顯示出文字作為後備方案。

<progress value="0.25">25%</progress>
登入後複製

2,可以利用max屬性設定最大值,這時value的範圍便是0~最大值

<progress value="25" max="100">25%</progress>
登入後複製

3,value屬性表示進度條完成的進度之,value值的範圍為0~max之間。如果沒有設定max屬性,那麼value屬性值的範圍要在0~1之間。

如果沒有value值,那麼完成進度是不確定的。這時候表示任務正在進行中,但不知道多久可以完成。這時候的progress在webkit瀏覽器中我們可以用作loading來使用,表示正在頁面載入中,或是ajax要求後台資料中。

不設定value值的話,則表示不確定的進度條(進度會不斷循環的滑動)

<progress></progress>
登入後複製

這個動態圖放不出來,大家可以自己動手看看,這樣的樣式還挺有趣的。

每日小結之html5 progress標籤:

progress標籤:從名字上來看,估計大家也能猜到這個標籤是什麼標籤了,沒錯,他是一個進度條。在HTML5中我們終於可以不用模擬了。

<progress id="PHP中文网" max="100"></progress>
登入後複製

progress屬性:value:表示當前進度max:表示總進度註:value和max屬性的值必須大於0,value的值小於或等於max屬性的值。案例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP中文网之progress标签的应用</title>
</head>
<body>
<h1>PHP中文网之progress标签的应用</h1>
<p>完成百分比:<progress max="100"></progress></p>
</body>
</html>
登入後複製

這個也是設定了一個動態效果,效果如圖:

html5 progress標籤怎麼用? progress標籤的屬性介紹

#這個圖是動態的,因為截圖截不了動態的,所以只能是這樣看了,大家可以自己上手試試,

本篇關於html5 progress進度條標籤的應用到這就結束,有問題的可以在下方提問。

【小編推薦】

html5 header標籤怎麼用? html5 header標籤的作用介紹

html超連結的底線怎麼去掉? a標籤去底線的方法都在這裡

以上是html5 progress標籤怎麼用? progress標籤的屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!