非常教程

HTML参考手册

标签 | Elements

progress

在HTML5中引入

HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

内容类别

Flow content, phrasing content, labelable content, palpable content.

允许的内容

Phrasing content ,但其后代中不得有<progress>元素。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受 phrasing content 的元素。

允许ARIA角色

没有

DOM界面

HTMLProgressElement

属性

这个元素包含全局属性。

max该属性描述progress元素指示的任务需要多少工作。该max属性(如果存在)必须具有大于零的值并且是有效的浮点数。默认值是1.

value此属性指定已完成多少任务。它必须是0 max到0 之间的有效浮点数,如果max省略,则在0和1之间。如果没有value属性,进度条是不确定的; 这表明活动正在进行,没有迹象表明预计会花多长时间。

注:最小值始终为0,并且min属性不允许用于progress元素。您可以使用-moz-orientCSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。

注::indeterminate伪类可用于匹配不确定进度条。在给它一个值之后,要将进度条更改为不确定的,你必须使用删除值属性element.removeAttribute("value")

例子

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

结果

在Windows 7上,生成的进度如下所示:

progress

其他例子

See -moz-orient.

规范

Specification

Status

Comment

HTML Living StandardThe definition of '<progress>' in that specification.

Living Standard

HTML5The definition of '<progress>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

6

(Yes)

61 2

10

11

5.2

max

6

(Yes)

6

10

11

5.2

value

6

(Yes)

6

10

11

5.2

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

61 2

No

11

73

max

(Yes)

(Yes)

(Yes)

6

No

11

7

value

(Yes)

(Yes)

(Yes)

6

No

11

7

HTML

超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。