initial commit

1 files changed, 127 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/optgroup/index.html b/files/zh-cn/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..8ea407b546
--- /dev/null
+++ b/files/zh-cn/web/html/element/optgroup/index.html
@@ -0,0 +1,127 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/optgroup
+tags:
+  - HTML
+  - HTML表单
+  - 元素
+  - 参考
+  - 表单
+translation_of: Web/HTML/Element/optgroup
+---
+<p>{{HTMLRef}}</p>
+
+<p><strong>HTML元素 <code>&lt;optgroup&gt;</code> </strong>为{{HTMLElement("select")}} 元素中的选项创建分组。</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th>
+   <td>无</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的内容</th>
+   <td>0或多个 {{HTMLElement("option")}} 元素</td>
+  </tr>
+  <tr>
+   <th scope="row">标签省略</th>
+   <td>开始标签是必须的。当该元素后面也跟着一个 <span style="font-family: courier new;">&lt;optgroup&gt; </span>元素，或该元素的父元素没有其他内容时，结束标签可省略。</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的父元素</th>
+   <td>一个 {{HTMLElement("select")}} 元素.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td>{{ARIARole("group")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>No <code>role</code> permitted</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 接口</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Note("Optgroup elements may not be nested.")}}</p>
+
+<h2 id="属性">属性</h2>
+
+<p><span style="line-height: 21px;">这个元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">。</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Group 1"&gt;
+    &lt;option&gt;Option 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 2"&gt;
+    &lt;option&gt;Option 2.1&lt;/option&gt;
+    &lt;option&gt;Option 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 3" disabled&gt;
+    &lt;option&gt;Option 3.1&lt;/option&gt;
+    &lt;option&gt;Option 3.2&lt;/option&gt;
+    &lt;option&gt;Option 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/optgroup$samples/Example?revision=1617230"></iframe></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("html.elements.optgroup")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li>其他表单相关的元素：{{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li>
+</ul>