diff options
Diffstat (limited to 'files/zh-cn/web/html')
| -rw-r--r-- | files/zh-cn/web/html/element/fieldset/index.html | 43 | ||||
| -rw-r--r-- | files/zh-cn/web/html/element/form/index.html | 6 | ||||
| -rw-r--r-- | files/zh-cn/web/html/element/optgroup/index.html | 37 | ||||
| -rw-r--r-- | files/zh-cn/web/html/element/select/index.html | 39 |
4 files changed, 23 insertions, 102 deletions
diff --git a/files/zh-cn/web/html/element/fieldset/index.html b/files/zh-cn/web/html/element/fieldset/index.html index 4128676e36..3da899a141 100644 --- a/files/zh-cn/web/html/element/fieldset/index.html +++ b/files/zh-cn/web/html/element/fieldset/index.html @@ -51,13 +51,13 @@ translation_of: Web/HTML/Element/fieldset <p><strong>注意：</strong>截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Flexbox">flexbox</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid </a>布局。<a href="https://github.com/w3c/csswg-drafts/issues/321">这个 GitHub issue</a> 跟踪了这个bug。</p> </div> -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> -<h3 id="简单的_fieldset">简单的 fieldset</h3> +<h3 id="Simple_fieldset">简单的 fieldset</h3> <p>这个例子展示了一个非常简单的 <code><fieldset></code>，其中有一个 <code><legend> </code>和一个简单的控件。</p> -<pre><form action="#"> +<pre class="brush: html"><form action="#"> <fieldset> <legend>Simple fieldset</legend> <input type="radio" id="radio"> @@ -65,13 +65,13 @@ translation_of: Web/HTML/Element/fieldset </fieldset> </form></pre> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="80" id="frame_Simple_fieldset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/fieldset$samples/Simple_fieldset?revision=1625975" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}</p> -<h3 id="禁用_fieldset">禁用 fieldset</h3> +<h3 id="Disabled_fieldset">禁用 fieldset</h3> <p>这个例子展示了一个被禁用的 <code><fieldset></code> ，其中有两个控件。注意随着 <code><fieldset></code> 被一起禁用的控件如何表现。</p> -<pre><form action="#"> +<pre class="brush: html"><form action="#"> <fieldset disabled> <legend>Disabled fieldset</legend> <div> @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/fieldset </fieldset> </form></pre> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="110" id="frame_Disabled_fieldset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/fieldset$samples/Disabled_fieldset?revision=1625975" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}</p> <h2 id="技术概览">技术概览</h2> @@ -126,36 +126,11 @@ translation_of: Web/HTML/Element/fieldset <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', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definition of the <code>fieldset</code> element</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("html.elements.fieldset")}}</p> +<p>{{Compat}}</p> <p>[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled; 相关 Issues: <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">IE bug 817488: <code>input[type="file"]</code> not disabled inside disabled <code>fieldset</code></a> and <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">IE bug 962368: Can still edit <code>input[type="text"]</code> within <code>fieldset[disabled]</code></a>.</p> diff --git a/files/zh-cn/web/html/element/form/index.html b/files/zh-cn/web/html/element/form/index.html index e7c0e43048..14308b9497 100644 --- a/files/zh-cn/web/html/element/form/index.html +++ b/files/zh-cn/web/html/element/form/index.html @@ -135,11 +135,11 @@ translation_of: Web/HTML/Element/form </dd> </dl> -<h2 id="Examples" name="Examples">示例</h2> +<h2 id="Examples">示例</h2> <h3 id="HTML">HTML</h3> -<pre class="notranslate"><!-- Form which will send a GET request to the current URL --> +<pre class="brush: html"><!-- Form which will send a GET request to the current URL --> <form> <label>Name: <input name="submitted-name" autocomplete="name"> @@ -163,7 +163,7 @@ translation_of: Web/HTML/Element/form </fieldset> </form></pre> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="110" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/form$samples/Examples?revision=1623519" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/optgroup/index.html b/files/zh-cn/web/html/element/optgroup/index.html index 8ea407b546..c2fb23f845 100644 --- a/files/zh-cn/web/html/element/optgroup/index.html +++ b/files/zh-cn/web/html/element/optgroup/index.html @@ -61,7 +61,7 @@ translation_of: Web/HTML/Element/optgroup <dd>选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。</dd> </dl> -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> <pre class="brush: html"><select> <optgroup label="Group 1"> @@ -81,44 +81,15 @@ translation_of: Web/HTML/Element/optgroup <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> +<p>{{EmbedLiveSample("Examples")}}</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', '<optgroup>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> -<p>{{Compat("html.elements.optgroup")}}</p> - -<div id="compat-desktop"></div> - -<div id="compat-mobile"></div> +<p>{{Compat}}</p> <h2 id="另请参阅">另请参阅</h2> diff --git a/files/zh-cn/web/html/element/select/index.html b/files/zh-cn/web/html/element/select/index.html index 470f6ec2fa..fa0d3e3cfa 100644 --- a/files/zh-cn/web/html/element/select/index.html +++ b/files/zh-cn/web/html/element/select/index.html @@ -100,7 +100,7 @@ translation_of: Web/HTML/Element/select <h2 id="示例">示例</h2> -<h3 id="基本选择">基本选择</h3> +<h3 id="Basic_select">基本选择</h3> <pre class="brush: html"><!-- 第二项会默认选中 --> <select name="select"> @@ -112,13 +112,13 @@ translation_of: Web/HTML/Element/select <h4 id="结果">结果</h4> -<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p> +<p>{{EmbedLiveSample("Basic_select", "", "100")}}</p> -<h3 id="使用多选的进阶选择">使用多选的进阶选择</h3> +<h3 id="Advanced_select_with_multiple_features">使用多选的进阶选择</h3> <p>下面的例子更加复杂，展示了可用在 <code><select></code> 元素上的更多功能：</p> -<pre><label>Please choose one or more pets: +<pre class="brush: html"><label>Please choose one or more pets: <select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">Dog</option> @@ -134,7 +134,7 @@ translation_of: Web/HTML/Element/select </label> </pre> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="100" id="frame_Advanced_select_with_multiple_features" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/select$samples/Advanced_select_with_multiple_features?revision=1625986"></iframe></p> +<p>{{EmbedLiveSample("Advanced_select_with_multiple_features", "", "100")}}</p> <p>你会看见：</p> @@ -182,36 +182,11 @@ translation_of: Web/HTML/Element/select <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', 'forms.html#the-select-element', '<select>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div>{{Compat("html.elements.select")}}</div> +<div>{{Compat}}</div> <h2 id="参见">参见</h2> |