1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: <progress>：进度指示元素
slug: Web/HTML/Element/progress
translation_of: Web/HTML/Element/progress
---
<h2 id="概述">概述</h2>
<p><strong>HTML</strong>中的<strong><code><progress></code></strong>元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。</p>
<p>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</p>
<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>and send us a pull request.</p>
</div>
<h2 id="使用上下文">使用上下文</h2>
<pre class="syntaxbox notranslate"><strong>使用策略 </strong>流文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>), 短文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>)
<strong><a href="/zh-CN/docs/Web/HTML/Content_categories">Content categories</a> </strong>可标记内容，可触摸内容
<strong>有效内容 </strong><a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, 其中在它的后代中不能包含
<strong>Permitted content</strong> <code><progress></code>元素。
<strong>标签省略 </strong>不可以，{{no_tag_omission}}
<strong>Tag omission</strong>
<strong>有效的父元素</strong> 任何可以包裹短文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>) 的元素。
<strong>隐式元素 </strong>{{ARIARole("progressbar")}}
<strong>ARIA role</strong>
<strong>有效的辅助元素 </strong>无
<strong>ARIA roles</strong>
<strong>DOM 接口</strong> {{domxref("HTMLProgressElement")}}
</pre>
<h2 id="属性">属性</h2>
<p>和其他的 HTML 元素一样，该元素具有<a href="/zh-cn/HTML/Global_attributes" rel="internal">全局属性</a>.</p>
<dl>
<dt>{{ htmlattrdef("max") }}</dt>
<dd>该属性描述了这个<code>progress</code>元素所表示的任务一共需要完成多少工作。</dd>
<dt>{{ htmlattrdef("value") }}</dt>
<dd>该属性用来指定该进度条已完成的工作量。如果没有<code>value 属性</code>,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).</dd>
</dl>
<div class="blockIndicator note">
<p><strong>Note: </strong>你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条。</p>
</div>
<dl>
</dl>
<h2 id="DOM_接口">DOM 接口</h2>
<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLProgressElement" title="zh-cn/DOM/HTMLProgressElement">HTMLProgressElement</a></code>接口。</p>
<h2 id="例子">例子</h2>
<pre class="brush: html notranslate"><progress value="70" max="100">70 %</progress>
</pre>
<h3 id="结果">结果</h3>
<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p>
<p>在 Mac OS X 上，显示的进度条如下：</p>
<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p>
<p>在 Windows 上，显示的进度条如下：</p>
<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>起始定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.progress")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{htmlelement("meter")}}</li>
<li>{{ cssxref(":indeterminate") }}</li>
<li>{{ cssxref("-moz-orient") }}</li>
<li>{{ cssxref("::-moz-progress-bar") }}</li>
<li>{{ cssxref("::-ms-fill") }}</li>
<li>{{ cssxref("::-webkit-progress-bar") }}</li>
<li>{{ cssxref("::-webkit-progress-value") }}</li>
<li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
</ul>
|
