initial commit

1 files changed, 118 insertions, 0 deletions

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: <progress>：进度指示元素
+slug: Web/HTML/Element/progress
+translation_of: Web/HTML/Element/progress
+---
+<h2 id="概述">概述</h2>
+
+<p><strong>HTML</strong>中的<strong><code>&lt;progress&gt;</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="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>), 短文本(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>)
+<strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Content categories</a>     </strong>可标记内容,可触摸内容
+
+<strong>有效内容                </strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, 其中在它的后代中不能包含
+<strong>Permitted content</strong>      <code>&lt;progress&gt;</code>元素.
+
+<strong>标签省略                </strong>不可以,{{no_tag_omission}}
+<strong>Tag omission</strong>
+
+<strong>有效的父元素</strong>             任何可以包裹短文本(<a href="https://wiki.developer.mozilla.org/en-US/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">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</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', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '&lt;progress&gt;')}}</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>