initial commit

1 files changed, 186 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/meter/index.html b/files/zh-cn/web/html/element/meter/index.html
new file mode 100644
index 0000000000..e5a26f656a
--- /dev/null
+++ b/files/zh-cn/web/html/element/meter/index.html
@@ -0,0 +1,186 @@
+---
+title: <meter>
+slug: Web/HTML/Element/meter
+translation_of: Web/HTML/Element/meter
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;meter&gt;元素用来显示已知范围的标量值或者分数值。</code></strong> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, labelable content, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code>&lt;meter&gt;</code> element among its descendants.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLMeterElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="属性">属性</h2>
+
+<p>该元素包含所有的<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>当前的数值。如果设置了最小值和最大值（分别由min属性和max属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
+ <div class="note"><strong>使用备注: </strong>除非值域在0到1（闭区间）, 否则最小值和最大值属性需要定义，以保证value属性在值域范围内。换言之，默认的min和max值分别为0和1。</div>
+ </dd>
+ <dt>{{htmlattrdef("min")}}</dt>
+ <dd>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0。</dd>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1。</dd>
+ <dt>{{htmlattrdef("low")}}</dt>
+ <dd>定义了低值区间的上限值（译者注：如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。</dd>
+ <dt>{{htmlattrdef("high")}}</dt>
+ <dd>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。</dd>
+ <dt>{{htmlattrdef("optimum")}}</dt>
+ <dd>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了low和high属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和low之间，那么lower区间就被认为是更佳的取值范围。</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>该属性将本元素与对应的form元素关联。例如，一个计量器可能用来显示某个数值输入框（input元素，number类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="简单例子">简单例子</h3>
+
+<h4 id="HTML_content">HTML content</h4>
+
+<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500"
+  value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="输出">输出</h4>
+
+<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>
+
+<p>在Google Chrome浏览器上, 计量器结果如下:</p>
+
+<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
+
+<h3 id="高低值区间示例">高低值区间示例</h3>
+
+<p>注意本例中min属性被省略，这是允许的，默认值为0。</p>
+
+<h4 id="HTML_content_2">HTML content</h4>
+
+<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100"
+  value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
+</pre>
+
+<h4 id="输出_2">输出</h4>
+
+<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>
+
+<p>Google Chrome浏览器中，计量器显示效果如下:</p>
+
+<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-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-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>20<sup>[1]</sup></td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>20<sup>[1]</sup></td>
+   <td>11.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement">Microsoft Edge Platform Status page</a>.</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>