<progress>标签用法介绍

最新推荐文章于 2023-06-13 16:48:57 发布
最新推荐文章于 2023-06-13 16:48:57 发布
阅读量268 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/561629
版权

此标签是HTML5新增，用来表示进度条。

既然是HTML5新增，当然具有一定的兼容性问题，主要存在于低版本的IE浏览器，IE10+浏览器支持此标签。

代码实例如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 		 
        
 
         
 
          <!doctype html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          "utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          >   
         
 
         
 
          < 
          style 
          >      
         
 
         
 
          progress {    
         
 
         
 
             
          display:inline-block;    
         
 
         
 
             
          width: 160px;    
         
 
         
 
             
          height: 20px;    
         
 
         
 
             
          border: 1px solid #0064B4;      
         
 
         
 
             
          background-color:#e6e6e6;    
         
 
         
 
             
          color: #0064B4; /*IE10*/   
         
 
         
 
          }     
         
 
         
 
          progress::-moz-progress-bar { background: #0064B4; }    
         
 
         
 
          progress::-webkit-progress-bar { background: #e6e6e6; }    
         
 
         
 
          progress::-webkit-progress-value  { background: #0064B4; }      
         
 
         
 
          </ 
          style 
          >      
         
 
         
 
          </ 
          head 
          >      
         
 
         
 
          < 
          body 
          >      
         
 
         
 
          < 
          progress 
          max 
          = 
          "100" 
          value 
          = 
          "20" 
          ></ 
          progress 
          >   
         
 
         
 
          </ 
          body 
          >      
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
使用progress-bar属性可以设置进度条进度的样式。下面介绍一下此标签的相关属性:
 
 
（1）.max:表示进度的最大值。
 
 
（2）.value:表示进度的当前值。
 
 
在js操作中，position属性可以获取当前进度条的位置，也就是value/max，代码实例如下:
 
 
 
     

       01 
     
 
     

       02 
     
 
     

       03 
     
 
     

       04 
     
 
     

       05 
     
 
     

       06 
     
 
     

       07 
     
 
     

       08 
     
 
     

       09 
     
 
     

       10 
     
 
     

       11 
     
 
     

       12 
     
 
     

       13 
     
 
     

       14 
     
 
     

       15 
     
 
     

       16 
     
 
     

       17 
     
 
     

       18 
     
 
     

       19 
     
 
     

       20 
     
 
     

       21 
     
 
     

       22 
     
 
     

       23 
     
 
     

       24 
     
 
     

       25 
     
 
     

       26 
     
 
     

       27 
     
 
     

       28 
     
 
     

       29 
     
 
     

       30 
     
 
     

       31 
     
 
     

       32 
     
 		 
     
 
      
 
       <!doctype html> 
      
 
      
 
       < 
       html 
       > 
      
 
      
 
       < 
       head 
       > 
      
 
      
 
       < 
       meta 
       charset 
       = 
       "utf-8" 
       > 
      
 
      
 
       < 
       meta 
       name 
       = 
       "author" 
       content 
       = 
       "http://www.softwhy.com/" 
       /> 
      
 
      
 
       < 
       title 
       >蚂蚁部落</ 
       title 
       >   
      
 
      
 
       < 
       style 
       >      
      
 
      
 
       progress {    
      
 
      
 
          
       display:inline-block;    
      
 
      
 
          
       width: 160px;    
      
 
      
 
          
       height: 20px;    
      
 
      
 
          
       border: 1px solid #0064B4;      
      
 
      
 
          
       background-color:#e6e6e6;    
      
 
      
 
          
       color: #0064B4; /*IE10*/   
      
 
      
 
       }     
      
 
      
 
       progress::-moz-progress-bar { background: #0064B4; }    
      
 
      
 
       progress::-webkit-progress-bar { background: #e6e6e6; }    
      
 
      
 
       progress::-webkit-progress-value  { background: #0064B4; }      
      
 
      
 
       </ 
       style 
       >   
      
 
      
 
       < 
       script 
       > 
      
 
      
 
       window.onload=function(){ 
      
 
      
 
          
       var opr=document.getElementById("pr"); 
      
 
      
 
          
       var oshow=document.getElementById("show"); 
      
 
      
 
          
       oshow.innerHTML=opr.position; 
      
 
      
 
       } 
      
 
      
 
       </ 
       script 
       >    
      
 
      
 
       </ 
       head 
       >      
      
 
      
 
       < 
       body 
       >      
      
 
      
 
       < 
       progress 
       id 
       = 
       "pr" 
       max 
       = 
       "100" 
       value 
       = 
       "20" 
       ></ 
       progress 
       > 
      
 
      
 
       < 
       div 
       id 
       = 
       "show" 
       ></ 
       div 
       > 
      
 
      
 
       </ 
       body 
       >      
      
 
      
 
       </ 
       html 
       > 
      
 
     
 
 
 

 
 

 
 

 
 
原文发布时间为：2017-3-6
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：<progress>标签用法介绍
 


                

        

        




    

  


    

      

        

            

              
                
                  weixin_34270865
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
HTML ＜progress＞ 标签

				
			

			

				

					玄链教育
				

				

					07-29
					
					1466
					
				

			

		

		

			
				
progress> 标签标示任务的进度（进程）。

			
		

	



                

              
                



	

		

			

				
					
HTML5 新标签progress 的用法

				
			

			

				

					前端基础入门学习线路
				

				

					02-13
					
					1414
					
				

			

		

		

			
				
<progress> 标签

定义和用法

<progress> 标签定义运行中的进度（进程）。

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

实例

标记“下载进度”：

对象的下载进度：

<progress>

<span id="objprogress">85</span&g...

			
		

	



                


  
              

                


	

		

			

				
					
<base target="_self"/>标签的巧妙用法

				
			

			

				

					lcb530的专栏
				

				

					08-21
					
					163
					
				

			

		

		

			
				
       最近项目中一个小问题卡了我不少时间。我遇到的问题是：在项目的弹出式的模型窗口里，我需要将数据提交到服务器。然后从服务器再返回到本页面。结果：返回了本页面，窗口却是从新打开的。
　　 现在来谈一下解决方法：书上说在模型窗口中加入&lt;base target="_self"/&gt;标签即可。我把该标签放上去却没有任何反应，当时我不明白这为什么？后来经过查证原来这个属性有IE6与IE7...

			
		

	





	

		

			

				
					
Html5中progress标签用法

				
			

			

				

					实际工作与学习当中的随记
				

				

					01-17
					
					1045
					
				

			

		

		

			
				
progress 标签是 HTML 5 中的新标签。



定义


			1
			
			
			<progress>标签定义运行中的进度（进程）。
			
		
用法


			1
			
			
			可以使用<progress>标签来显示JavaScript中耗费时间的函数的进度。
			
		
实例：标记“下载进度”


			1

			2

			3
			
			
			<progress>

			<spanid="objpr...

			
		

	



		

			
		



	

		

			

				
					
01-HTML5新的语义标签比如 <header>, <footer>, <article>, <section>,<aside>等

				
			

			

				

					weixin_44077629的博客
				

				

					03-09
					
					409
					
				

			

		

		

			
				
HTML5新的语义标签：












header

footer



nav

main



section

aside



article

mark
定义有记号的文本


time

details
定义元素的细节。（详细信息）


summary
为  元素定义可见的标题。
figure
定义媒介内容的分组，以及它们的标题。


figcaption
定义 figure...

			
		

	





	

		

			

				
					
HTML5 progress和meter控件

					
最新发布

				
			

			

				

					lmrylll的博客
				

				

					06-13
					
					1684
					
				

			

		

		

			
				
在HTML5中，新增了progress和meter控件。progress控件为进度条控件，可表示任务的进度，如Windows系统中软件的安装、文件的复制等场景的进度。meter控件为计量条控件，表示某种计量，适用于温度、重量、金额等量化的表现。

			
		

	





	

		

			

				
					
HTML自学笔记

				
			

			

				

					Liudashuaia的博客
				

				

					02-21
					
					642
					
				

			

		

		

			
				
一、HTML简介
1、HTML是什么？
HTML：hyper text markup language 超文本标记(标签)语言
有各种标签组成，用来制作网页，告诉浏览器该如何显示页面
2、作用
制作网页，控制网页和内容的显示
插入图片、音乐、视频、动画等多媒体
通过连接来检索信息
使用表单获取用户的信息，实现交互
3,、版本
W3C:world wide web consortium万维网联盟，制...

			
		

	





	

		

			

				
					
HTML5标签使用方法详解

				
			

			

				

					09-28
				

			

		

		

			
				
它的核心目标是提高网页的可用性和互操作性，减少对插件依赖，如Adobe Flash、Microsoft Silverlight和Sun JavaFX。...通过学习和掌握这些新标签的使用方法，开发者能够创建出更加符合现代互联网标准的网站和应用程序。

			
		

	





	

		

			

				
					
常用标签的用法

				
			

			

				

					HIRAETHZY的博客
				

				

					03-30
					
					367
					
				

			

		

		

			
				
1.iframe标签的用法： 嵌套页面  可替换标签
默认是宽100 高50
<iframe src="https://test.com" name="xxx"></iframe>

可以通过css设置：
iframe{
width：100%；
height：400px；
}

宽度可以设置成100%，高度需要设置成实际的数值，iframe类似于一个新开的窗口，会很卡，可以...

			
		

	





	

		

			

				
					
<include><merge>标签用法

				
			

			

				

					weixin_30411997的博客
				

				

					03-07
					
					71
					
				

			

		

		

			
				
include和merge标记的作用主要是为了解决layout的重用问题。
比如我们有三四个Activity但是他们都要用到同一个样式的标题栏，虽然我们把一样的代码copy个三四遍也没关系，但实在是太丑了，而且效率太低，如果这个标题栏要改样式，你岂不是要去三四个地方分别改动。
为了解决这个问题，android中有了include和merge标记

以下为标题栏的layout文件title...

			
		

	





	

		

			

				
					
progress标签及样式

				
			

			

				

					weixin_44000173的博客
				

				

					04-25
					
					1706
					
				

			

		

		

			
				
Html5--Progress标签的使用及属性样式

			
		

	





	

		

			

				
					
HTML ＜progress＞标签

				
			

			

				

					allway2的博客
				

				

					02-07
					
					3910
					
				

			

		

		

			
				
HTML <progress> Tag

The<progress>element can be used in conjunction with JavaScript to display the progress of a task or process as it is underway.

The<progress>tag should not be confused with the<meter>tag (which represents...

			
		

	





	

		

			

				
					
＜ progress ＞标签   定义运行中的任务进度

				
			

			

				

					纸 鸢
				

				

					09-18
					
					430
					
				

			

		

		

			
				
HTML < progress > 标签 - - - 定义运行中的任务进度
不适合用来表示度量衡（例如：磁盘空间使用情况或相关的查询结果）；度量衡用 < meter > 标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>progress标签</title>
	</head>
	<body>
		进度.

			
		

	





	

		

			

				
					
（19）HTML5 ＜progress＞ 标签

				
			

			

				

					Java田根旺
				

				

					12-20
					
					532
					
				

			

		

		

			
				
一、浏览器支持

IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。

注：IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。

二、标签定义及使用说明

<progress> 标签定义运行中的任务进度（进程）。它是H5新增的标签。

三、提示和注释

提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress&

			
		

	





	

		

			

				
					
【H5 CSS】progress元素样式

				
			

			

				

					z767327552的专栏
				

				

					12-31
					
					3145
					
				

			

		

		

			
				
progress
以下是progress的基本标签
<progress></progress>

根据w3c的定义，progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。
除了通用的全局属性外，它还拥有两个自己的属性

max  -表示有多少任务需要完成。如果未设置，默认为1.0
value -表示现在的完成的进度。value的取值最好是 0.0<=value<=1.0

进度条的状态
一个进度条有两种状态：不确定和已确定


不确定-即

			
		

	





	

		

			

				
					
HTML5 progress进度条详解

					
热门推荐

				
			

			

				

					pingwei_deng的博客
				

				

					06-11
					
					5万+
					
				

			

		

		

			
				
HTML5 progress进度条详解HTML5 progress 元素简介progress是HTML5的一个新元素，表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。html5 progress进度条语法&lt;progress value='70' max='100'&gt;&lt;/progress&gt;点击这里查...

			
		

	





	

		

			

				
					
关于HTML中progress标签的定义及用法汇总！

				
			

			

				

					xiaoxijing的博客
				

				

					10-08
					
					3228
					
				

			

		

		

			
				
Progress标签可以帮助我们轻松创建一个进度条，对于Web前端开发人员来说是非常有用处的，所以掌握好Progress标签的用法对于前端开发人员很重要。下面，我就为大家分享在HTML中Progress标签的详细用法。
“Progress”作为英文单词有“进程、前进”的意思，那它作为HTML中的标签又充当什么样的角色呢？我们一起来跟着我来看看HTML中Progress标签的定义及用法！

一、Pr...

			
		

	





	

		

			

				
					
html5 progress标签的使用

				
			

			

				

					huzijia888的博客
				

				

					11-13
					
					2001
					
				

			

		

		

			
				
function test(){
var kk = document.getElementById("pro1");
   kk.value=kk.value+1;
}





var s= self.setInterval("test()",1000);/*使用window自带的函数 setInetrval来重复执行test函数
实现progress的value值得自增长，

			
		

	





	

		

			

				
					
HTML5 <progress>标签详解：实现动态进度条

				
			

			

				

					
				

			

		

		

			
				
<progress>标签的基本结构包括两个主要属性：max和value。max属性定义了进度条的最大值，表示任务的全部完成程度；value属性则是当前的进度值，如果没有明确指定，<progress>元素会动态地显示剩余的任务量。例如，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值