rid of $samples iframes

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>&lt;fieldset&gt;</code>，其中有一个 <code>&lt;legend&gt; </code>和一个简单的控件。</p>
 
-<pre>&lt;form action="#"&gt;
+<pre class="brush: html">&lt;form action="#"&gt;
   &lt;fieldset&gt;
     &lt;legend&gt;Simple fieldset&lt;/legend&gt;
     &lt;input type="radio" id="radio"&gt;
@@ -65,13 +65,13 @@ translation_of: Web/HTML/Element/fieldset
   &lt;/fieldset&gt;
 &lt;/form&gt;</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>&lt;fieldset&gt;</code> ，其中有两个控件。注意随着 <code>&lt;fieldset&gt;</code> 被一起禁用的控件如何表现。</p>
 
-<pre>&lt;form action="#"&gt;
+<pre class="brush: html">&lt;form action="#"&gt;
   &lt;fieldset disabled&gt;
     &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
     &lt;div&gt;
@@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/fieldset
   &lt;/fieldset&gt;
 &lt;/form&gt;</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', '&lt;fieldset&gt;')}}</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', '&lt;fieldset&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</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">&lt;!-- Form which will send a GET request to the current URL --&gt;
+<pre class="brush: html">&lt;!-- Form which will send a GET request to the current URL --&gt;
 &lt;form&gt;
   &lt;label&gt;Name:
     &lt;input name="submitted-name" autocomplete="name"&gt;
@@ -163,7 +163,7 @@ translation_of: Web/HTML/Element/form
   &lt;/fieldset&gt;
 &lt;/form&gt;</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">&lt;select&gt;
   &lt;optgroup label="Group 1"&gt;
@@ -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', '&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>
+<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">&lt;!-- 第二项会默认选中 --&gt;
 &lt;select name="select"&gt;
@@ -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>&lt;select&gt;</code> 元素上的更多功能：</p>
 
-<pre>&lt;label&gt;Please choose one or more pets:
+<pre class="brush: html">&lt;label&gt;Please choose one or more pets:
   &lt;select name="pets" multiple size="4"&gt;
     &lt;optgroup label="4-legged pets"&gt;
       &lt;option value="dog"&gt;Dog&lt;/option&gt;
@@ -134,7 +134,7 @@ translation_of: Web/HTML/Element/select
 &lt;/label&gt;
 </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', '&lt;select&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</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>