html5中progress標(biāo)簽的使用方法

這篇文章主要介紹了html5中progress標(biāo)簽的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)提供高防服務(wù)器租用、云服務(wù)器、香港服務(wù)器、服務(wù)器托管等

首先我們先介紹html5 progress標(biāo)簽的用法：

<progress>標(biāo)簽定義運(yùn)行中的進(jìn)度（進(jìn)程）。

可以使用<progress>標(biāo)簽來顯示javascript中耗費(fèi)時(shí)間的函數(shù)的進(jìn)度。

<progress>表示任務(wù)的進(jìn)度，背景為灰色，完成的部分填充為脈動式綠色條（但不同的瀏覽器下，樣式還是不同的）。

提示：請使用 <progress> 標(biāo)簽來顯示下載的進(jìn)度。

再來讓我們看一個html5 progress標(biāo)簽的使用實(shí)例：

標(biāo)記“下載進(jìn)度”：

對象的下載進(jìn)度：
<progress value='70' max='100'></progress>

效果如圖：

html5中progress標(biāo)簽的使用方法

圖很明顯，就不多說了。

現(xiàn)在來說說html5 progress標(biāo)簽的屬性介紹：

1.可以通過value屬性來設(shè)置百分比（0~1的小數(shù)）

通常我們還可以在元素內(nèi)部再放置進(jìn)度值，這樣當(dāng)瀏覽器不(www.php.cn)支持的時(shí)候就可以顯示出文字作為后備方案。

<progress value="0.25">25%</progress>

2，可以利用max屬性設(shè)置最大值，這時(shí)value的范圍便是0~最大值

<progress value="25" max="100">25%</progress>

3，value屬性表示進(jìn)度條完成的進(jìn)度之，value值的范圍為0~max之間。如果沒有設(shè)置max屬性，那么value屬性值的范圍要在0~1之間。

如果沒有value值，那么完成進(jìn)度是不確定的。這時(shí)候表示任務(wù)正在進(jìn)行中，但不知道多長時(shí)間可以完成。這時(shí)候的progress在webkit瀏覽器中我們可以用作loading來使用，表示正在頁面加載中，或者ajax請求后臺數(shù)據(jù)中。

不設(shè)置value值的話，則表示不確定的進(jìn)度條（進(jìn)度會不斷循環(huán)的滑動）

<progress></progress>

這個動態(tài)圖放不出來，大家可以自己動手看看，這樣的樣式還挺有趣的。

每日小結(jié)之html5 progress標(biāo)簽：

progress標(biāo)簽：從名字上來看，估計(jì)大家也能猜到這個標(biāo)簽是什么標(biāo)簽了，沒錯，他是一個進(jìn)度條。在HTML5中我們終于可以不用模擬了。

<progress id="創(chuàng)新互聯(lián)" max="100"></progress>

progress屬性：value：表示當(dāng)前進(jìn)度max：表示總進(jìn)度注：value和max屬性的值必須大于0，value的值小于或等于max屬性的值。案例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>創(chuàng)新互聯(lián)之progress標(biāo)簽的應(yīng)用</title>
</head>
<body>
<h2>創(chuàng)新互聯(lián)之progress標(biāo)簽的應(yīng)用</h2>
<p>完成百分比：<progress max="100"></progress></p>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5中progress標(biāo)簽的使用方法內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)站欄目：html5中progress標(biāo)簽的使用方法
網(wǎng)頁路徑：http://chinadenli.net/article10/gsghgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、云服務(wù)器、網(wǎng)站改版、網(wǎng)站維護(hù)、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

html5中progress標(biāo)簽的使用方法