From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/progress/index.html | 118 +++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/zh-cn/web/html/element/progress/index.html (limited to 'files/zh-cn/web/html/element/progress') diff --git a/files/zh-cn/web/html/element/progress/index.html b/files/zh-cn/web/html/element/progress/index.html new file mode 100644 index 0000000000..aba8a6466f --- /dev/null +++ b/files/zh-cn/web/html/element/progress/index.html @@ -0,0 +1,118 @@ +--- +title: ：进度指示元素 +slug: Web/HTML/Element/progress +translation_of: Web/HTML/Element/progress +--- +

概述

+ +

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

+ +

{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}

+ + + +

使用上下文

+ +
使用策略                流文本(Flow content), 短文本(phrasing content)
+Content categories     可标记内容,可触摸内容
+
+有效内容                Phrasing content, 其中在它的后代中不能包含
+Permitted content      <progress>元素.
+
+标签省略                不可以,{{no_tag_omission}}
+Tag omission
+
+有效的父元素             任何可以包裹短文本(phrasing content)的元素.
+
+隐式元素                {{ARIARole("progressbar")}}
+ARIA role
+
+有效的辅助元素            无
+ARIA roles
+
+DOM接口                {{domxref("HTMLProgressElement")}}
+
+ +

属性

+ +

和其他的HTML元素一样,该元素具有全局属性.

+ +
+
{{ htmlattrdef("max") }}
+
该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
+
{{ htmlattrdef("value") }}
+
该属性用来指定该进度条已完成的工作量.如果没有value属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).
+
+ +
+

Note: 你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向(默认)还是纵向.CSS伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条.

+
+ +
+
+ +

DOM 接口

+ +

该元素实现了HTMLProgressElement接口.

+ +

例子

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

结果

+ +

{{ EmbedLiveSample("Examples", 200, 50) }}

+ +

在Mac OS X上,显示的进度条如下:

+ +

progress-1.png

+ +

在Windows上,显示的进度条如下:

+ +

progress-firefox.JPG

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}{{Spec2('HTML5 W3C')}}起始定义
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.progress")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf