diff options
| -rw-r--r-- | files/zh-cn/web/api/element/compositionstart_event/index.html | 16 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlinputelement/invalid_event/index.html | 35 | ||||
| -rw-r--r-- | files/zh-cn/web/api/range/getboundingclientrect/index.html | 29 | ||||
| -rw-r--r-- | files/zh-cn/web/css/font-variant/index.html | 18 | ||||
| -rw-r--r-- | files/zh-cn/web/css/shape-image-threshold/index.html | 15 | ||||
| -rw-r--r-- | files/zh-cn/web/css/shape-margin/index.html | 19 | ||||
| -rw-r--r-- | files/zh-cn/web/css/translate/index.html | 12 | ||||
| -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 |
11 files changed, 75 insertions, 194 deletions
diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html index 3997c0b7b1..c84ce8a537 100644 --- a/files/zh-cn/web/api/element/compositionstart_event/index.html +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -11,6 +11,8 @@ tags: translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- +<div>{{APIRef}}</div> + <p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> <p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> @@ -52,11 +54,11 @@ inputElement.addEventListener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); });</pre> -<h3 id="动态演示">动态演示</h3> +<h3 id="Live_example">动态演示</h3> <h4 id="HTML">HTML</h4> -<pre><div class="control"> +<pre class="brush: html"><div class="control"> <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> @@ -67,9 +69,10 @@ inputElement.addEventListener('compositionstart', (event) => { <button class="clear-log">Clear</button> </div></pre> +<div class="hidden"> <h4 id="CSS">CSS</h4> -<pre>body { +<pre class="brush: css">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -101,10 +104,11 @@ kbd { border: 1px solid black; } </pre> +</div> <h4 id="JS">JS</h4> -<pre>const inputElement = document.querySelector('input[type="text"]'); +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); @@ -123,7 +127,7 @@ inputElement.addEventListener('compositionend', handleEvent); <h4 id="结果">结果</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="180px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/compositionstart_event$samples/Live_example?revision=1606277" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</p> <h2 id="规范">规范</h2> @@ -144,7 +148,7 @@ inputElement.addEventListener('compositionend', handleEvent); <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("api.Element.compositionstart_event")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html index 6f1f97a94d..d047f1e5a0 100644 --- a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html +++ b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html @@ -35,11 +35,11 @@ translation_of: Web/API/HTMLInputElement/invalid_event </tbody> </table> -<p>这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 <code>invalid</code> 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <code><form></code> 或元素自己的 <a href="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> 方法之后。</p> +<p>这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 <code>invalid</code> 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <code><form></code> 或元素自己的 <a href="/en-US/docs/Learn/Forms#constraint_validation_api" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> 方法之后。</p> <p>这个事件不会在 {{Event("blur")}} 事件中触发。</p> -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> <p>如果表单提交时有无效值，检查可提交元素时发现了错误，则 <code>invalid</code> 事件会在那个无效元素上触发。在这个例子中，当输入无效值触发 <code>invalid</code> 事件时，这个无效值被记录下来。</p> @@ -65,40 +65,15 @@ function logValue(e) { <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLInputElement/invalid_event$samples/Examples?revision=1602988"></iframe></p> +<p>{{EmbedLiveSample("Examples")}}</p> <h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - <tr> - <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性</h2> - - -<p>{{Compat("api.HTMLInputElement.invalid_event")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/api/range/getboundingclientrect/index.html b/files/zh-cn/web/api/range/getboundingclientrect/index.html index 4c10f536b0..d49eb8c65c 100644 --- a/files/zh-cn/web/api/range/getboundingclientrect/index.html +++ b/files/zh-cn/web/api/range/getboundingclientrect/index.html @@ -22,16 +22,16 @@ translation_of: Web/API/Range/getBoundingClientRect <pre class="syntaxbox notranslate"><var>boundingRect</var> = <var>range</var>.getBoundingClientRect() </pre> -<h2 id="示例">示例</h2> +<h2 id="Example">示例</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="highlight"></div> +<pre class="brush: html "><div id="highlight"></div> <p>This example positions a "highlight" rectangle behind the contents of a range. The range's content <b>starts here</b> and continues on until it <b>ends here</b>. The bounding client rectangle contains everything selected in the range.</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#highlight { +<pre class="brush: css">#highlight { background: yellow; position: absolute; z-index: -1; @@ -43,7 +43,7 @@ p { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">const range = document.createRange(); +<pre class="brush: js">const range = document.createRange(); range.setStartBefore(document.getElementsByTagName('b').item(0), 0); range.setEndAfter(document.getElementsByTagName('b').item(1), 0); @@ -56,30 +56,15 @@ highlight.style.height = `${clientRect.height}px`;</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/API/Range/getBoundingClientRect$samples/Example?revision=1549349"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性</h2> - - -<p>{{Compat("api.Range.getBoundingClientRect")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/font-variant/index.html b/files/zh-cn/web/css/font-variant/index.html index a01120c3c3..f5aae7872a 100644 --- a/files/zh-cn/web/css/font-variant/index.html +++ b/files/zh-cn/web/css/font-variant/index.html @@ -44,22 +44,21 @@ font-variant: unset; <dd>规定与{{cssxref("font-variant-alternates")}}属性相关的关键字，可能的值包括：<code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code> 和 <code>slashed-zero</code>。</dd> <dt><code><east-asian-variant-values></code>, <code><east-asian-width-values></code>, <code>ruby</code></dt> <dd>规定与{{cssxref("font-variant-east-asian")}}属性相关的关键字，可能的值包括：<code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>。</dd> - <dt> - <h3 id="正式语法">正式语法</h3> - </dt> </dl> {{csssyntax}} <h2 id="示例">示例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Setting_the_small-caps_font_variant">Setting the small-caps font variant</h3> + +<h4 id="HTML">HTML</h4> <pre class="brush: html"><p class="normal">Firefox rocks!</p> <p class="small">Firefox rocks!</p> </pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">p.normal { font-variant: normal; @@ -69,9 +68,9 @@ p.small { } </pre> -<h3 id="结果">结果</h3> +<h4 id="Result">Result</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/font-variant$samples/Example?revision=1598093"></iframe></p> +<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}</p> <h2 id="规范">规范</h2> @@ -106,11 +105,8 @@ p.small { <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> -<div> - +<p>{{Compat}}</p> -<p>{{Compat("css.properties.font-variant")}}</p> -</div> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html index 1f4daae524..923607a5e8 100644 --- a/files/zh-cn/web/css/shape-image-threshold/index.html +++ b/files/zh-cn/web/css/shape-image-threshold/index.html @@ -44,11 +44,13 @@ shape-image-threshold: unset; {{csssyntax}} -<h2 id="范例">范例</h2> +<h2 id="Examples">范例</h2> + +<h3 id="Aligning_text_to_a_gradient">Aligning text to a gradient</h3> <p>这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。<code>shape-outside</code>也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。</p> -<h3 id="HTML">HTML</h3> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><div id="gradient-shape"></div> @@ -65,7 +67,7 @@ shape-image-threshold: unset; deleniti ipsum sequi rem eveniet laboriosam magni expedita? </p></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css; hightlight[9]">#gradient-shape { width: 150px; @@ -82,9 +84,10 @@ shape-image-threshold: unset; <p>随后值为<code>0.2</code>的<code>shape-image-threshold</code>属性规定渐变中不透明度超过20%的像素才参与构成形状。</p> -<h3 id="Result">Result</h3> +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</p> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="230" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/shape-image-threshold$samples/Example?revision=1598826" width="600"></iframe></p> <h2 id="规范">规范</h2> <table class="standard-table"> @@ -109,7 +112,7 @@ shape-image-threshold: unset; <div> -<p>{{Compat("css.properties.shape-image-threshold")}}</p> +<p>{{Compat}}</p> </div> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/shape-margin/index.html b/files/zh-cn/web/css/shape-margin/index.html index 1590690856..afc4a907df 100644 --- a/files/zh-cn/web/css/shape-margin/index.html +++ b/files/zh-cn/web/css/shape-margin/index.html @@ -49,7 +49,9 @@ shape-margin: unset; <h2 id="范例">范例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Adding_a_margin_to_a_polygon">Adding a margin to a polygon</h3> + +<h4 id="HTML">HTML</h4> <pre class="brush: html"><section> <div class="shape"></div> @@ -59,9 +61,9 @@ uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant -of Mars, if he exists, probably knows its truth as we know it.</section></pre> +of Mars, if one exists, probably knows its truth as we know it.</section></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">section { max-width: 400px; @@ -77,10 +79,9 @@ of Mars, if he exists, probably knows its truth as we know it.</section></ shape-margin: 20px; }</pre> -<h3 id="Result">Result</h3> - -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="250" id="frame_Example" src="https://mdn.mozillademos.org/zh-CN/docs/Web/CSS/shape-margin$samples/Example?revision=1608812" width="500"></iframe></p> +<h4 id="Result">Result</h4> +<p>{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}}</p> <h2 id="规范">规范</h2> <table class="standard-table"> @@ -104,11 +105,7 @@ of Mars, if he exists, probably knows its truth as we know it.</section></ <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div> - - -<p>{{Compat("css.properties.shape-margin")}}</p> -</div> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/translate/index.html b/files/zh-cn/web/css/translate/index.html index 117a42ed4f..acfffc7ba9 100644 --- a/files/zh-cn/web/css/translate/index.html +++ b/files/zh-cn/web/css/translate/index.html @@ -48,17 +48,17 @@ translate: 50% 105px 5rem; {{csssyntax}} -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="translate">Translation</p> </div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -89,9 +89,9 @@ div:hover .translate { } </pre> -<h3 id="结果">结果</h3> +<h3 id="Result">Result</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/translate$samples/Examples?revision=1595410"></iframe></p> +<p>{{EmbedLiveSample('Examples')}}</p> <h2 id="规范">规范</h2> @@ -118,7 +118,7 @@ div:hover .translate { -<p>{{Compat("css.properties.translate")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> 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> |