From d490e42ffe823173477b841ec397105bd06cb336 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 17 Jun 2021 13:35:36 -0400 Subject: rid of $samples iframes --- .../api/element/compositionstart_event/index.html | 16 +++++--- .../api/htmlinputelement/invalid_event/index.html | 35 +++--------------- .../web/api/range/getboundingclientrect/index.html | 29 ++++----------- files/zh-cn/web/css/font-variant/index.html | 18 ++++----- .../zh-cn/web/css/shape-image-threshold/index.html | 15 +++++--- files/zh-cn/web/css/shape-margin/index.html | 19 ++++------ files/zh-cn/web/css/translate/index.html | 12 +++--- files/zh-cn/web/html/element/fieldset/index.html | 43 +++++----------------- files/zh-cn/web/html/element/form/index.html | 6 +-- files/zh-cn/web/html/element/optgroup/index.html | 37 ++----------------- 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 --- +
{{APIRef}}
+

文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

@@ -52,11 +54,11 @@ inputElement.addEventListener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); -

动态演示

+

动态演示

HTML

-
<div class="control">
+
<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>

 
+
 
 
JS

 
-
const inputElement = document.querySelector('input[type="text"]');
+
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);
 
 
结果

 
-

+
{{ EmbedLiveSample('Live_example', '100%', '180px') }}

 
 
规范

 
@@ -144,7 +148,7 @@ inputElement.addEventListener('compositionend', handleEvent);
 
 
浏览器兼容性

 
-
{{Compat("api.Element.compositionstart_event")}}

+
{{Compat}}

 
 
参见

 
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
  
 
 
-
这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

+
这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

 
 
这个事件不会在 {{Event("blur")}} 事件中触发。

 
-
示例

+
示例

 
 
如果表单提交时有无效值，检查可提交元素时发现了错误，则 invalid 事件会在那个无效元素上触发。在这个例子中，当输入无效值触发 invalid 事件时，这个无效值被记录下来。

 
@@ -65,40 +65,15 @@ function logValue(e) {
 
 
结果

 
-

+
{{EmbedLiveSample("Examples")}}

 
 
规范

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态注释
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5 W3C')}}

+{{Specifications}}
 
 
浏览器兼容性

 
-
-
-
{{Compat("api.HTMLInputElement.invalid_event")}}

+
{{Compat}}

 
 
参见

 
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
 
boundingRect = range.getBoundingClientRect()
 

 
-
示例

+
示例

 
 
HTML

 
-
<div id="highlight"></div>
+
<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>

 
 
CSS

 
-
#highlight {
+
#highlight {
   background: yellow;
   position: absolute;
   z-index: -1;
@@ -43,7 +43,7 @@ p {
 
 
JavaScript

 
-
const range = document.createRange();
+
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`;

 
 
结果

 
-

+
{{EmbedLiveSample("Example")}}

 
 
规范

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态备注
{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}{{Spec2('CSSOM View')}}Initial specification.

+{{Specifications}}
 
 
浏览器兼容性

 
-
-
-
{{Compat("api.Range.getBoundingClientRect")}}

+
{{Compat}}

 
 
参见

 
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;
  
规定与{{cssxref("font-variant-alternates")}}属性相关的关键字，可能的值包括：lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal 和 slashed-zero。

  
<east-asian-variant-values>, <east-asian-width-values>, ruby

  
规定与{{cssxref("font-variant-east-asian")}}属性相关的关键字，可能的值包括：jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby。

- 

- 
正式语法

- 

 
 
 {{csssyntax}}
 
 
示例

 
-
HTML

+
Setting the small-caps font variant

+
+
HTML

 
 
<p class="normal">Firefox rocks!</p>
 <p class="small">Firefox rocks!</p>
 

 
-
CSS

+
CSS

 
 
p.normal {
   font-variant: normal;
@@ -69,9 +68,9 @@ p.small {
 }
 

 
-
结果

+
Result

 
-

+
{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}

 
 
规范

 
@@ -106,11 +105,8 @@ p.small {
 
 
浏览器兼容性

 
-

-
+
{{Compat}}

 
-
{{Compat("css.properties.font-variant")}}

-

 
 
参见

 
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}}
 
-
范例

+
范例

+
+
Aligning text to a gradient

 
 
这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。shape-outside也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。

 
-
HTML

+
HTML

 
 
<div id="gradient-shape"></div>
 
@@ -65,7 +67,7 @@ shape-image-threshold: unset;
   deleniti ipsum sequi rem eveniet laboriosam magni expedita?
 </p>

 
-
CSS

+
CSS

 
 
#gradient-shape {
   width: 150px;
@@ -82,9 +84,10 @@ shape-image-threshold: unset;
 
 
随后值为0.2的shape-image-threshold属性规定渐变中不透明度超过20%的像素才参与构成形状。

 
-
Result

+
Result

+
+
{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}

 
-

 
规范

 
 
@@ -109,7 +112,7 @@ shape-image-threshold: unset;
 

 
 
-
{{Compat("css.properties.shape-image-threshold")}}

+
{{Compat}}

 
参见

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;
 
 
范例

 
-
HTML

+
Adding a margin to a polygon

+
+
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>

+of Mars, if one exists, probably knows its truth as we know it.</section>
 
-
CSS

+
CSS
section {
   max-width: 400px;
@@ -77,10 +79,9 @@ of Mars, if he exists, probably knows its truth as we know it.</section>
 
-
Result

-
-

+
Result

 
+
{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}}

 
规范

 
 

 
 
 
 
 
 

@@ -104,11 +105,7 @@ of Mars, if he exists, probably knows its truth as we know it.</section>浏览器兼容性
 
-

-
-
-
{{Compat("css.properties.shape-margin")}}

-

+
{{Compat}}
参见

 
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}}
 
-
示例

+
示例
HTML

 
-
<div>
+
<div>
   <p class="translate">Translation</p>
 </div>

 
 
CSS

 
-
* {
+
* {
   box-sizing: border-box;
 }
 
@@ -89,9 +89,9 @@ div:hover .translate {
 }
 

 
-
结果

+
Result

 
-

+
{{EmbedLiveSample('Examples')}}

 
 
规范

 
@@ -118,7 +118,7 @@ div:hover .translate {
 
 
 
-
{{Compat("css.properties.translate")}}

+
{{Compat}}

 
 
参见

 
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
 
注意：截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 flexbox 和 grid 布局。这个 GitHub issue 跟踪了这个bug。

 
 
-
示例

+
示例

 
-
简单的 fieldset

+
简单的 fieldset

 
 
这个例子展示了一个非常简单的 <fieldset>，其中有一个 <legend> 和一个简单的控件。

 
-
<form action="#">
+
<form action="#">
   <fieldset>
     <legend>Simple fieldset</legend>
     <input type="radio" id="radio">
@@ -65,13 +65,13 @@ translation_of: Web/HTML/Element/fieldset
   </fieldset>
 </form>

 
-

+
{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}

 
-
禁用 fieldset

+
禁用 fieldset

 
 
这个例子展示了一个被禁用的 <fieldset> ，其中有两个控件。注意随着 <fieldset> 被一起禁用的控件如何表现。

 
-
<form action="#">
+
<form action="#">
   <fieldset disabled>
     <legend>Disabled fieldset</legend>
     <div>
@@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/fieldset
   </fieldset>
 </form>

 
-

+
{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}

 
 
技术概览

 
@@ -126,36 +126,11 @@ translation_of: Web/HTML/Element/fieldset
 
 
规范

 
-

 
 
 
 

- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态注释
{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}{{Spec2('HTML WHATWG')}}Definition of the fieldset element
{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}{{Spec2('HTML4.01')}}Initial definition

+
{{Specifications}}

 
 
浏览器兼容性

 
-
{{Compat("html.elements.fieldset")}}

+
{{Compat}}

 
 
[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled;  相关 Issues: IE bug 817488: input[type="file"] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type="text"] within fieldset[disabled].

 
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
  
 
 
-
示例

+
示例

 
 
HTML

 
-
<!-- Form which will send a GET request to the current URL -->
+
<!-- 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>

 
-

+
{{ EmbedLiveSample('Examples', '100%', 110) }}

 
 
规范

 
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
  
选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

 
 
-
示例

+
示例

 
 
<select>
   <optgroup label="Group 1">
@@ -81,44 +81,15 @@ translation_of: Web/HTML/Element/optgroup
 
 
结果

 
-

+
{{EmbedLiveSample("Examples")}}

 
 
规范

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态注释
{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}{{Spec2('HTML4.01')}}

+
{{Specifications}}

 
 
浏览器兼容性

 
-
{{Compat("html.elements.optgroup")}}

-
-

-
-

+
{{Compat}}

 
 
另请参阅

 
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
 
 
示例

 
-
基本选择

+
基本选择

 
 
<!-- 第二项会默认选中 -->
 <select name="select">
@@ -112,13 +112,13 @@ translation_of: Web/HTML/Element/select
 
 
结果

 
-

+
{{EmbedLiveSample("Basic_select", "", "100")}}

 
-
使用多选的进阶选择

+
使用多选的进阶选择

 
 
下面的例子更加复杂，展示了可用在 <select> 元素上的更多功能：

 
-
<label>Please choose one or more pets:
+
<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>
 

 
-

+
{{EmbedLiveSample("Advanced_select_with_multiple_features", "", "100")}}

 
 
你会看见：

 
@@ -182,36 +182,11 @@ translation_of: Web/HTML/Element/select
 
 
规范

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态注释
{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}{{Spec2('HTML4.01')}}

+
{{Specifications}}

 
 
浏览器兼容性

 
-
{{Compat("html.elements.select")}}

+
{{Compat}}

 
 
参见

 
-- 
cgit v1.2.3-54-g00ecf