diff options
Diffstat (limited to 'files/zh-cn/web/html/global_attributes')
29 files changed, 3696 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/global_attributes/accesskey/index.html b/files/zh-cn/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..736a0c58b7 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,138 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>accesskey</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="note"> +<p>注意：在WHATWG规范中，它说你可以指定多个空格分隔的字符，浏览器将使用它所支持的第一个字符。然而，这在大多数浏览器中是行不通的。在IE/Edge中，它将使用它支持的第一个没有问题的，只要没有与其他命令冲突。</p> +</div> + +<p>激活 accesskey 的操作取决于浏览器及其平台。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>On Firefox 57 or newer, <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> -OR- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + On Firefox 14 or newer, <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + On Firefox 13 or older, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"> + <p><kbd>Shift</kbd> + <kbd>Esc</kbd> opens a contents list which are accessible by accesskey, then, can choose an item by pressing <kbd><em>key</em></kbd></p> + </td> + </tr> + </tbody> +</table> + +<p>要注意 Firefox 可以通过用户偏好，自定义所需的修饰键。</p> + +<h2 id="可访问性">可访问性</h2> + +<p>除了糟糕的浏览器支持之外， <code>accesskey</code>属性还有很多问题：</p> + +<ul> + <li><code>accesskey</code> 值可能与系统或浏览器键盘快捷键或辅助技术功能相冲突。对于一个操作系统来说，辅助技术和浏览器组合可能无法与其他操作系统协同工作。</li> + <li>某些 <code>accesskey</code> 值可能不会出现在某些键盘上，特别是在国际化是一个问题的时候。</li> + <li>依赖于数字的 <code>accesskey</code> 值可能会让那些经历认知问题的人感到困惑，因为他们的数字与它触发的功能没有逻辑关联。</li> + <li>通知用户<code>accesskey</code>s 存在，这样他们就能意识到该功能。如果没有公开这些信息的方法，<code>accesskey</code>s 可能会被意外激活。</li> +</ul> + +<p>由于这些问题，一般建议不要在大多数通用的网站和web应用程序中使用<code>accesskey</code> 属性。</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}} + <table> + <tbody> + </tbody> + </table> + </td> + <td>More realistic behavior described for what is implemented in reality.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>与 {{SpecName('HTML5.1')}} 规范相同。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>与 {{SpecName('HTML5 W3C')}} 相同。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>可以将几个字符设置为accesskey。而且，它可以设置在任何元素上。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>只支持 {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/autocapitalize/index.html b/files/zh-cn/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..7e5e13b1f3 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,46 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Atributos globales + - Autocapitalize + - HTML +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>The <code><strong>autocapitalize</strong></code> <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> 是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：</p> + +<ul> + <li><code>off</code> or <code>none</code>: 没有应用自动大写（所有字母都默认为小写字母）。</li> + <li><code>on</code> or <code>sentences</code>: 每个<strong>句子</strong>的第一个字母默认为大写字母；所有其他字母都默认为小写字母。</li> + <li><code>words</code>: 每个<strong>单词</strong>的第一个字母默认为大写字母；所有其他字母都默认为小写字母。</li> + <li><code>characters</code>: 所有的<strong>字母</strong>都默认为大写。</li> +</ul> + +<p>在物理键盘上输入时，<code>autocapitalize</code> 属性不会影响行为。相反，它会影响其他输入机制的行为，比如移动设备的虚拟键盘和语音输入。这种机制的行为是，它们经常通过自动地将第一个句子的字母大写来帮助用户。<code>autocapitalize</code> 属性使作者能够覆盖每个元素的行为。</p> + +<p><code>autocapitalize</code> 属性永远不会为带有 {{htmlattrxref("type", "input")}} 属性，其值为 <code>url</code>, <code>email</code> 或 <code>password</code>的 {{HTMLElement("input")}} 元素启用自动大写。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/zh-cn/web/html/global_attributes/class/index.html b/files/zh-cn/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..61e6611ca5 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/class/index.html @@ -0,0 +1,59 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +tags: + - Global attributes + - HTML +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> <strong>class </strong>的值是一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (<a href="/zh-CN/docs/Web/CSS/Class_selectors">class selectors</a>) 或DOM方法( {{domxref("document.getElementsByClassName")}})来选择和访问特定的元素。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<p class="hidden"> </p> + +<p>尽管对class 的命名没有要求，但 web 开发者最好使用可以表达元素语义目的的名称，而不是描述元素展现的名称（即使一个元素是斜体，但是 class 的命名也不应该是 italics）。<strong>语义化</strong>命名即使在页面展现发生改变时仍能合乎逻辑。</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', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, <strong>class</strong> is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/contenteditable/index.html b/files/zh-cn/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..429e7e2017 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,67 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - contenteditable + - copy + - document.execCommand +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> <strong>contenteditable</strong> 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p>该属性必须是下面的值之一：</p> + +<ul> + <li><code>true</code> 或空字符串，表示元素是可编辑的；</li> + <li><code>false</code> 表示元素不是可编辑的。</li> +</ul> + +<p>如果没有设置该属性，其默认值继承自父元素。</p> + +<p>该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 <code>true</code>、<code>false</code> 或空字符串中的一个，并且不允许简写为 <code><label contenteditable>Example Label</label></code>正确的用法是 <code><label contenteditable="true">Example Label</label></code>。</p> + +<p>你可以使用CSS {{cssxref("caret-color")}} 属性设置用于绘制文本插入{{Glossary("caret")}}的颜色。</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', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> + <li>All <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li> + <li>The CSS {{cssxref("caret-color")}} property</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/contextmenu/index.html b/files/zh-cn/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..4a42601760 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,127 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Global attributes + - HTML + - 全局属性 + - 参考 +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu </a>属性已经过时，将从所有浏览器中删除。</p> +</div> + +<div><code><strong>contextmenu</strong></code><a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>是指用于某个元素的“<span id="result_box" lang="zh-CN"><span>上下文菜单</span></span>”的{{HTMLElement("menu")}}的<a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a>属性。</div> + +<div> </div> + +<div><span lang="zh-CN"><span>上下文菜单是指在用户交互（例如右键点击）时出现的菜单。</span> <span>HTML5允许我们自定义此菜单。</span> <span>这里有一些实现示例，包括嵌套菜单。</span></span></div> + +<h2 id="示例" name="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Anywhere in the example you can share the page on Twitter and + Facebook using the Share menu from your context menu. + </li> + <li contextmenu="changeFont" id="fontSizing"> + On this specific list element, you can change the size of the text + by using the "Increase/Decrease font" actions from your context menu + </li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + On the image below, you can fire the "Change Image" action + in your Context Menu.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('示例', "100%", 400)}}</p> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p><span id="result_box" lang="zh-CN">[1]通过命令行选项<code>--enable-blink-features = ContextMenu</code>可以获得实验性实现。直到Chrome 52和Opera 39之前，它还是一个可选的、实验性功能</span><span lang="zh-CN">，但由于Web兼容性问题，现已被删除。在2017年6月，它从这两个浏览器里被完全移除了。这些记录在</span> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a><span lang="zh-CN">。</span></p> + +<p><span lang="zh-CN"><span>[2]</span></span>Firefox Mobile 已经不再支持 <code>contextmenu</code> 属性 ({{bug(1424252)}})。</p> + +<h2 id="推荐阅读">推荐阅读</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/data-_star_/index.html b/files/zh-cn/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..59113524be --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,74 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +tags: + - Global attributes + - HTML +translation_of: Web/HTML/Global_attributes/data-* +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><strong>data-*</strong> <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> 是一类被称为<strong>自定义数据属性</strong>的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 <a href="/zh-CN/docs/Web/HTML" title="zh/HTML">HTML</a> 与 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 表现之间进行专有数据的交换。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<p>所有这些自定义数据属性都可以通过所属元素的 {{domxref("HTMLElement")}} 接口来访问。 {{domxref("HTMLElement.dataset")}} 属性可以访问它们。 <code>*</code> 可以使用遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">xml名称生产规则</a> 的任何名称来被替换，并具有以下限制：</p> + +<ul> + <li>该名称不能以<code>xml</code>开头，无论这些字母是大写还是小写；</li> + <li>该名称不能包含任何分号 (<code>U+003A</code>)；</li> + <li>该名称不能包含A至Z的大写字母。</li> +</ul> + +<p>注意，{{domxref("HTMLElement.dataset")}} 属性是一个{{domxref("DOMStringMap")}}，并且自定义数据属性 <em> data-test-value</em> 可以通过 <code>HTMLElement.dataset.testValue</code> ( 或者是<code> HTMLElement.dataset["<em>testValue</em>"] </code>) 来访问，任何破折号(<code>U+002D</code>) 都会被下个字母的大写替代(驼峰拼写)。</p> + +<h3 id="用法">用法</h3> + +<p>通过添加 <strong>data-*</strong><strong> </strong>属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程<strong>对象</strong>。例如，在游戏里的太空船 "<a href="https://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29">sprite</a><em>"</em> 可以是一个带有一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/class">class</a> 属性和几个 data-*属性的简单 {{HTMLElement("img")}} 元素：</p> + +<pre><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</img></pre> + +<p id="Specifications">有关使用 HTML 数据属性的更深入的教程，请参阅<a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">使用数据属性</a>。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}} 的快照， no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<p><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>相关链接</span></p> + +<ul> + <li>所有的<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></li> + <li>{{domxref("HTMLElement.dataset")}} 属性允许访问和修改这些值</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">使用数据属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/dir/index.html b/files/zh-cn/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..8f27c5ee20 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/dir/index.html @@ -0,0 +1,127 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +translation_of: Web/HTML/Global_attributes/dir +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a><strong>dir</strong>是一个指示元素中文本方向的枚举属性。它的取值如下：</p> + +<ul> + <li><span style="font-family: courier new;">ltr</span>, 指从<em>左</em>到<em>右</em>，用于那种从左向右书写的语言（比如英语）；</li> + <li><span style="font-family: courier new;">rtl</span>, 指从<em>右</em>到<em>左</em>，用于那种从右向左书写的语言（比如阿拉伯语）；</li> + <li><span style="font-family: courier new;">auto</span>, 指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。</li> +</ul> + +<div class="note"> +<p><strong>使用说明</strong></p> + +<p>这个属性对有不同语义的{{ HTMLElement("bdo") }}元素是必须的。</p> + +<ul> + <li> + <p>这个属性在{{ HTMLElement("bdi") }}元素中<em>不可</em>继承。未赋值时，它的默认值是<span style="font-family: courier new;">auto</span>。</p> + </li> + <li> + <p>这个属性可以被CSS属性{{ cssxref("direction") }}和{{ cssxref("unicode-bidi") }}覆盖，如果CSS网页有效且该元素支持这些属性的话。</p> + </li> + <li> + <p>由于文本的方向是和内容的语义而不是和表现相关，因此有可能的话，网页开发者使用这一属性而非CSS属性是被推荐的。这样，即使在不支持CSS或禁用CSS的浏览器中，文本也会正常显示。</p> + </li> + <li> + <p>auto应当用于方向未知的数据，如用户输入的数据，最终保存在数据库中的数据。</p> + </li> +</ul> +</div> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>自上一版本{{SpecName('HTML5.1')}}没有明显变化。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}}的快照, 和{{SpecName('HTML5 W3C')}}比没有变化</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}}的快照, 在 {{SpecName('HTML4.01')}}基础上增加了auto值，并且是全局属性。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>被所有元素支持除了{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}和{{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<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>基本支持</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>全部<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</li> + <li>对应这个属性的{{domxref("HTMLElement.dir")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/draggable/index.html b/files/zh-cn/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..910f94d027 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/draggable/index.html @@ -0,0 +1,101 @@ +--- +title: draggable +slug: Web/HTML/Global_attributes/draggable +tags: + - 拖动 +translation_of: Web/HTML/Global_attributes/draggable +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><a href="/zh-CN/docs/Web/HTML/Global_attributes" style="text-decoration: underline;">全局属性</a> <strong>draggable</strong> 是一个枚举类型的属性，用于标识元素是否允许使用 <a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">拖放操作API</a> 拖动。它的取值如下：</p> + +<ul> + <li><span style="font-family: Courier New;">true，表示元素可以被拖动</span></li> + <li><span style="font-family: Courier New;">false，表示元素不可以被拖动</span></li> +</ul> + +<p>如果该属性没有设值，则默认值 为 <span style="font-family: Courier New;">auto ，表示使用浏览器定义的默认行为。</span></p> + +<p>这个属性是<em>枚举类型</em>，而不是 <em>布尔类型</em> 。这意味着必须显式指定值为 <span style="font-family: Courier New;">true</span> 或者 <span style="font-family: Courier New;">false</span> ，像 <code><label draggable>Example Label</label> 这样的简写是不允许的。正确的用法是</code> <code><label draggable="true">Example Label</label>。</code></p> + +<p>默认情况下，只有已选中的文本、图片、链接可以拖动。对其它的元素来说，必须按拖动机制的顺序设置 <strong>ondragstart</strong> 事件才能正常工作， 见 <a href="/zh-CN/docs/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">综合示例</a> 。</p> + +<h2 id="标准">标准</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考资料">参考资料</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/dropzone/index.html b/files/zh-cn/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..316e41a944 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,94 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><strong>dropzone</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 是个枚举属性，表示什么内容类型可以拖放到元素上，使用 <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>，它可以拥有以下值：</p> + +<ul> + <li><span style="font-family: courier new;">copy，</span>它表明拖放行为会创建被拖放元素的副本。</li> + <li><span style="font-family: courier new;">move</span>，它表明被拖放元素会移动到新的位置。</li> + <li><span style="font-family: courier new;">link</span>，它会创建被拖放数据的链接。 </li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>与最新的快照{{SpecName('HTML5.1')}} 没有区别</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} 的快照，最初定义</td> + </tr> + </tbody> +</table> + +<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>基础支持</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/hidden/index.html b/files/zh-cn/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..507318c483 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/hidden/index.html @@ -0,0 +1,108 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> <code>hidden</code> 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。</p> + +<p><code>hidden</code>属性不能用于隐藏那些可以在其它板块中合理显示的内容。 例如,用<code>hidden</code>属性去隐藏一个选项卡对话框种的面板是不正确的，因为选项卡界面只不过是溢出显示的一种——一个可以等量于一个只显示所有form表单控件的拥有滚动条的大页面。类似地，用 <code>hidden </code>属性在某个特定板块中隐藏一部分内容也是不正确的，——如果某些内容被标记为隐藏，它将从所有版块中隐藏,包括例如屏幕阅读器.</p> + +<p>隐藏元素不应与非隐藏元素链接，作为隐藏元素的后代的元素仍然是活动的，这意味着脚本元素仍然可以执行，表单元素仍然可以提交。</p> + +<p>比如说，用 <code>href </code>标签链接到一个带有 <code>hidden </code>标签的区块是不对的。 如果这个区块和这个页面不相干，或者这个区块不适用于这个页面，那没有任何理由需要链接到它。</p> + +<p>不过，你还是可以使用 ARIA <code>aria-</code><code>describedby</code> 标签去引用本身是隐藏的一些描述。</p> + +<p>类似的，你也可以将一个带有 hidden 标签的 canvas 元素作为屏幕外的缓存区域，或者在表单控件中引用一个已经隐藏的表单。</p> + +<div class="note"> +<p><strong>说明:</strong> 改变具有hidden属性的元素的CSS的 {{cssxref("display")}} 属性将覆盖该行为。 例如, 元素被设置为 <code>display: flex</code> 将会导致元素显示出来，尽管设置了hidden属性</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>4</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">aria-hidden</a>属性</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/id/index.html b/files/zh-cn/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..d1ccbcd3ec --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/id/index.html @@ -0,0 +1,63 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>id</code> <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></strong>定义了一个全文档唯一的标识符 (ID)。它用于在链接（使用<a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#片段">片段</a>）、脚本和样式（通过 {{glossary("CSS")}}）中辨识元素。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<div class="blockIndicator warning"> +<p>该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。</p> +</div> + +<p><code>id</code> 的值不得包含空白字符（{{glossary("whitespace")}}，包括空格和制表符等）。浏览器会将不符合规范的 ID 中的空白字符视为 ID 的一部分。与允许以空格分隔值的 {{htmlattrxref("class")}} 属性不同，元素只能拥有一个 ID 值。</p> + +<div class="note"> +<p><strong>注意：</strong>使用除 {{glossary("ASCII")}} 字母、数字、<code>_</code>、<code>-</code> 和 <code>.</code> 以外的字符可能会造成兼容性问题，因为 HTML 4 中不允许使用它们。虽然这个限制在 {{glossary("HTML5")}} 中被解除了，但为兼容性考虑 ID 应该以字母开头。</p> +</div> + +<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', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>所有的<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</li> + <li>反映该属性的 {{domxref("Element.id")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/index.html b/files/zh-cn/web/html/global_attributes/index.html new file mode 100644 index 0000000000..86a17db9f7 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/index.html @@ -0,0 +1,201 @@ +--- +title: 全局属性 +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><strong>全局属性</strong>是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。</p> + +<p>我们可以在所有的HTML元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是html5兼容的。例如，虽然<code><foo></code>不是一个有效的HTML元素，但是html5兼容的浏览器隐藏了标记为<code><foo hidden>...<foo></code>的内容。</p> + +<p>除了基本的HTML全局属性之外，还存在以下全局属性:</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}} 和 {{htmlattrdef("xml:base")}} ——两者都是从XHTML规范继承，但为了兼容性而被保留的。</li> + <li>多重<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA">aria-*</a></code>属性，用于改善可访问性。</li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Event_handlers">事件处理程序</a> 属性：<strong><code>onabort</code></strong>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="全局属性列表">全局属性列表<span style="display: none;"> </span><span style="display: none;"> </span></h2> + +<ul> +</ul> + +<dl> + <dt><a href="/zh-CN/docs/Web/HTML/Global_attributes/accesskey">{{htmlattrdef("accesskey")}}</a></dt> + <dd>提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize">{{htmlattrdef("autocapitalize")}}</a></dt> + <dd>控制用户的文本输入是否和如何自动大写，它可以有以下的值： + <ul> + <li><code>off</code> or <code>none</code>，没有应用自动大写（所有字母都默认为小写字母）。</li> + <li><code>on</code> or <code>sentences</code>，每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。</li> + <li><code>words</code>，每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。</li> + <li><code>characters</code>，所有的字母都应该默认为大写。</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/class">{{htmlattrdef("class")}}</a></dt> + <dd>一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors">class selectors</a>) 或DOM方法( <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName" title="返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。"><code>document.getElementsByClassName</code></a>)来选择和访问特定的元素。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">{{htmlattrdef("contenteditable")}}</a></dt> + <dd>一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。 如果可以，浏览器会调整元素的部件（widget）以允许编辑。 + <ul> + <li><code>true</code> 或者空字符串，表明元素是可被编辑的；</li> + <li><code>false</code>，表明元素不能被编辑。</li> + </ul> + </dd> + <dt><a href="/zh-CN/docs/Web/HTML/Global_attributes/contextmenu">{{htmlattrdef("contextmenu")}}</a></dt> + <dd>{{HTMLElement("menu")}} 的<code><a href="#attr-id"><strong>id</strong></a></code> ，作为该元素的上下文菜单（已经不被支持，将从所有浏览器中删除）。</dd> + <dt><a href="/zh-CN/docs/Web/HTML/Global_attributes/data-*">{{htmlattrdef("data-*")}}</a></dt> + <dd>一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" title="zh/HTML">HTML</a> 之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement" title="HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口."><code>HTMLElement</code></a> 接口来访问。 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset" title="HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。"><code>HTMLElement.dataset</code></a> 属性可以访问它们。</dd> + <dt><a href="/zh-CN/docs/Web/HTML/Global_attributes/dir">{{htmlattrdef("dir")}}</a></dt> + <dd> + <p>一个指示元素中文本方向的枚举属性。它的取值如下：</p> + + <ul> + <li>ltr, 指从<em>左</em>到<em>右</em>，用于那种从左向右书写的语言（比如英语）；</li> + <li>rtl, 指从<em>右</em>到<em>左</em>，用于那种从右向左书写的语言（比如阿拉伯语）；</li> + <li>auto, 指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。</li> + </ul> + </dd> + <dt><a href="/zh-CN/docs/Web/HTML/Global_attributes/draggable">{{htmlattrdef("draggable")}}</a></dt> + <dd>一种枚举属性，指示是否可以 使用 <a href="/zh-CN/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> 拖动元素。它可以有以下的值： + <ul> + <li><code>true</code>, 这表明元素可能被拖动</li> + <li><code>false</code>, 这表明元素可能不会被拖动</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">{{htmlattrdef("dropzone")}}</a> {{experimental_inline}}</dt> + <dd>枚举属性，指示可以使用 <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> 在元素上删除哪些类型的内容。 它可以具有以下值： + <ul> + <li>copy，表示drop将创建被拖动元素的副本</li> + <li>move，表示拖动的元素将移动到此新位置。</li> + <li><code>link</code>，将创建一个指向拖动数据的链接。</li> + </ul> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">{{htmlattrdef("hidden")}}</a></dt> + <dd><font><font>布尔属性表示该元素尚未或不再</font></font><em><font><font>相关</font></font></em><font><font>。</font><font>例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。</font><font>浏览器不会呈现此类元素。</font><font>不得使用此属性隐藏可合法显示的内容</font></font></dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/id">{{htmlattrdef("id")}}</a></dt> + <dd>定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 {{HTMLElement("input")}}元素，但在{{HTMLAttrxRef("contenteditable")}}模式下可用于任何元素。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/is">{{htmlattrdef("is")}}</a></dt> + <dd>允许您指定标准HTML元素应该像已注册的自定义内置元素一样（有关更多详细信息，请参阅使用自定义元素）。</dd> +</dl> + +<div class="note"> +<p><strong>注意: </strong>item *属性是 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>的一部分。</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">{{htmlattrdef("itemid")}}</a></dt> + <dd>项的唯一全局标识符。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">{{htmlattrdef("itemprop")}}</a></dt> + <dd>用于向项添加属性。 每个HTML元素都可以指定一个itemprop属性，其中一个itemprop由一个名称和值对组成。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">{{htmlattrdef("itemref")}}</a></dt> + <dd>只有不是具有<code>itemscope</code>属性的元素的后代，它的属性才可以与使用<code>itemref</code>项目相关联。它提供了元素ID列表（而不是<code>itemids</code>）以及文档中其他位置的其他属性。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">{{htmlattrdef("itemscope")}}</a></dt> + <dd><code>itemscope</code>（通常）与{{htmlattrxref("itemtype")}}一起使用，以指定包含在关于特定项目代码块中的HTML。 <code>itemscope</code>创建Item并定义与之关联的<code>itemtype</code>的范围。 <code>itemtype</code>是描述项及其属性上下文的词汇表（例如<a class="external external-icon" href="https://schema.org/">schema.org</a>）的有效URL。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">{{htmlattrdef("itemtype")}}</a></dt> + <dd>指定将用于在数据结构中定义<code>itemprops</code>（项属性）的词汇表的URL。 <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code>用于设置数据结构中按<code>itemtype</code>设置的词汇表的生效范围。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/lang">{{htmlattrdef("lang")}}</a></dt> + <dd>帮助定义元素的语言:不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成)，格式在 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> 中定义。<strong><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes$edit#attr-xml:lang">xml:lang</a> </strong>优先于它。</dd> + <dt></dt> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a> {{Experimental_Inline}}</dt> + <dd>元素的部件名称的空格分隔列表。Part名称允许CSS通过{{CSSxRef("::part()")}} 伪元素选择和设置阴影关联树中的特定元素。</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/slot">{{htmlattrdef("slot")}}</a></dt> + <dd>将<a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>阴影关联树中的一个沟槽分配给一个元素：具有<code>slot</code>属性的元素被分配给由{{HTMLElement("slot")}}元素创建的沟槽，其{{htmlattrxref("name", "slot")}}属性的值与<code>slot</code>属性的值匹配。</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">{{htmlattrdef("spellcheck")}}</a> {{experimental_inline}}</dt> + <dd>枚举属性定义是否可以检查元素是否存在拼写错误。它可能具有以下值： + <ul> + <li><code>true</code>，表示如果可能，应检查元素是否存在拼写错误;</li> + <li><code>false</code>, 表示不应检查元素的拼写错误。</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/style">{{htmlattrdef("style")}}</a></dt> + <dd>含要应用于元素的<a href="/en-US/docs/Web/CSS">CSS</a>样式声明。 请注意，建议在单独的文件中定义样式。 该属性和{{HTMLElement("style")}}元素主要用于快速样式化，例如用于测试目的。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">{{htmlattrdef("tabindex")}}</a></dt> + <dd>整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可能需要几个值： + <ul> + <li>负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;</li> + <li><code>0</code> 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义;</li> + <li>正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是<a href="#attr-tabindex"><strong>tabindex</strong></a>的增加值。如果多个元素共享相同的<code>tabindex</code>，则它们的相对顺序遵循它们在文档中的相对位置。</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/title">{{htmlattrdef("title")}}</a></dt> + <dd>包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{experimental_inline}}</dt> + <dd>枚举属性，用于指定在页面本地化时是否转换元素的属性值及其{{domxref("Text")}} 节点子节点的值，或者是否保持它们不变。它可以具有以下值： + <ul> + <li>空字符串和<code>"yes"</code>，表示元素将被翻译。</li> + <li><code>"no"</code>, 表示该元素不会被翻译。</li> + </ul> + </dd> +</dl> + +<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', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element")}} 和 {{domxref("GlobalEventHandlers")}} 接口允许查询大多数全局属性。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/inputmode/index.html b/files/zh-cn/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..36eb81901a --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,64 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +translation_of: Web/HTML/Global_attributes/inputmode +--- +<p><span class="seoSummary"><strong><code>inputmode</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> </span>是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。它可以是以下值：</p> + +<dl> + <dt><code>"none"</code></dt> + <dd>无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。</dd> + <dt><code>"text"</code></dt> + <dd>使用用户本地区域设置的标准文本输入键盘。</dd> + <dt><code>"decimal"</code></dt> + <dd>小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。</dd> + <dt><code>"numeric"</code></dt> + <dd>数字输入键盘，所需要的就是0到9的数字，设备可能也可能不显示减号键。</dd> + <dt><code>"tel"</code></dt> + <dd>电话输入键盘，包含0到9的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code> 。</dd> + <dt><code>"search"</code></dt> + <dd>为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。</dd> + <dt><code>"email"</code></dt> + <dd>为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 。</dd> + <dt><code>"url"</code></dt> + <dd>为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> 。</dd> +</dl> + +<p>如果没有设置这个属性，它的默认值是 <code>"text"</code>，表明使用本地的标准文本输入键盘。</p> + +<div class="warning"> +<p><strong>规范冲突</strong>: <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG(超文本应用技术工作组)规范中列出了 <code>inputmode</code></a>, 并且现代浏览器正在努力支持它。但 <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 规范</a> 不再将其列出（也就是说将其标记为过时的）。在达成共识之前，你应该认为WHATWG规范定义的就是正确的。</p> +</div> + +<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", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> + +<div>{{HTMLSidebar("Global_attributes")}}</div> diff --git a/files/zh-cn/web/html/global_attributes/is/index.html b/files/zh-cn/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..f8e770fa80 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +tags: + - Global attributes + - HTML + - Reference + - is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">is 全局属性( <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> )允许您指定标准HTML元素像定义的内置元素一样工作（请参阅使用自定义元素( <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> )以获取更多详细信息）。</span></p> + +<p>只有在当前文档中已成功定义( <a href="/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> )指定的自定义元素名称并且扩展了要应用的元素类型时，才能使用此属性。</p> + +<h2 id="示例">示例</h2> + +<p> 以下代码来自我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 示例（<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>）。</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>></<span class="pl-ent">p</span>></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/html/global_attributes/itemid/index.html b/files/zh-cn/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..6d42d5bca7 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemid/index.html @@ -0,0 +1,149 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - Attribute + - Global attribute + - HTML + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemid</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 是元素的唯一的全局标识符。<code>itemid</code> 属性只能为同时拥有 <strong><code>itemscope</code> </strong>和 <strong><code>itemtype</code></strong> 的元素指定。同时，<code>itemid</code> 只能为拥有 <code>itemscope</code> 的元素指定，它的相应 <code>itemtype</code> 引用或定义了支持全局标识符的词汇。</p> + +<p><code>itemtype</code> 的全局标识符的准确含义，由该标识符以指定的词汇提供。词汇定义了全局标识符相同的多个元素是否可以共存，并且如果是这样，这些元素如何处理。 </p> + +<p class="note"><strong>注：</strong>Whatwg.org 的定义规定了 <code>itemid</code> 必须是 URL。但是，下面的示例正确展示了 URN 也可以使用。这个不一致性可能反映了 Microdata 规范的不完善性。</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Title <dd itemprop="title">The Reality Dysfunction +<dt>Author <dd itemprop="author">Peter F. Hamilton +<dt>Publication date +<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl></pre> + +<h3 id="结构化数据">结构化数据</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('示例')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemid">itemid</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">其它不同的全局属性</a></li> + <li>其它 microdata 相关的全局属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/itemprop/index.html b/files/zh-cn/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..f9bbe32116 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,507 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>全局属性 <code><strong>itemprop</strong></code>被用于向一个物体中添加属性。每一个HTML元素都可以指定一个itemprop属性，一个<code>itemprop</code><font face="Open Sans, arial, sans-serif">属性</font>由name-value对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个string或者一个URL，并且可以和大部分元素进行组合，包括{{HTMLElement("audio")}}， {{HTMLElement("embed")}}， {{HTMLElement("iframe")}}， {{HTMLElement("img")}}， {{HTMLElement("link")}}， {{HTMLElement("object")}}， {{HTMLElement("source")}} ， {{HTMLElement("track")}}， 和 {{HTMLElement("video")}}。</p> + +<h2 id="样例">样例</h2> + +<p>下面的样例展示了一组带有<code>itemprop</code>属性的源代码，后面的表格展示了产生的结构化数据。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="Structured_data">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"> </td> + <th colspan="2" rowspan="1">Item</th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>属性拥有的值可能是字符串又或者是URL。当一个字符串值是一个URL的时候，它被用 {{HTMLElement("a")}} 及它的属性值 {{htmlattrxref("href", "a")}} 、{{HTMLElement("img")}} 及它的属性值 {{htmlattrxref("src", "img")}} 、或者其它被链接到或嵌入外部的资源的元素来表述。</p> + +<h3 id="Three_properties_with_values_that_are_strings">Three properties with values that are strings</h3> + +<pre class="brush: html"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>.</p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>.</p> + <p>I am + <span itemprop="nationality">British</span>.</p> +</div></pre> + +<h3 id="One_property_image_whose_value_is_a_URL">One property, "image", whose value is a URL</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>当一个字符串值不能令人通俗易懂的时候（e.g.，一个长串的数字和字母），它能被用data元素的value属性表示，用所给元素内容的更易懂的版本（它不是结构化数据的一部分-请看下面的例子）。</p> + +<h3 id="An_item_with_a_property_whose_value_is_a_product_ID">An item with a property whose value is a product ID</h3> + +<p>ID不是人性化的，所以产品的名字是用的人所能看懂的文字而不是ID。</p> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>对于数字数据，meter 元素及它的 value 属性值能够被用来表述。</p> + +<h3 id="A_meter_element">A meter element</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name">Panasonic White + 60L Refrigerator</span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" + min=0 value=3.5 max=5>Rated 3.5/5</meter> + (based on <span + itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>与此相类似的，对于日期时间相关的数据，time 元素和他的 datetime 属性值能够被使用表示。</p> + +<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date">An item with one property, "birthday", whose value is a date</h3> + +<pre class="brush: html"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>通过把元素上的 itemscope 属性中声明属性，属性也可以是一个组 name-values 对。每个值既可以是一个字符串又可以是一组 name-values 对（i.e. 一个项）。</p> + +<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">An outer item representing a person, and an inner one representing a band</h3> + +<pre class="brush: html"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span></p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> + players)</span></p> +</div></pre> + +<p>上面的外层项有两个属性，“name” 和 “band”。“name” 的值是 “Amanda”, “band” 的值是一个在它右侧的项决定的，它有两个属性，“name” 和 “size”。乐队的 “name” 的值是 “Jazz Band”，“size” 的值是 “12”。这个例子的外层项是顶级微数据标签。不是其他项的项被称为顶级微数据项。</p> + +<h3 id="All_the_properties_separated_from_their_items">All the properties separated from their items</h3> + +<p>这个样例和之前一个一摸一样，但是所有的属性都被从它们的项中分离了出来。</p> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: + <span itemprop="name">Amanda</span></p> +<div id="b" + itemprop="band" + itemscope itemref="c"></div> +<div id="c"> + <p>Band: + <span itemprop="name">Jazz Band</span></p> + <p>Size: + <span itemprop="size">12</span> players</p> +</div></pre> + +<p>这产生了和之前样例相同的结果。第一个项有两个属性，“name“，设置为“Amanda”和“band”，设置到另一个项去了。第二个项有两个更进一步的属性，“name”设置为“Jazz Band”并且“size”设置为“12”。</p> + +<p>一个项可以有多个拥有相同名字但是值不同的属性。</p> + +<h3 id="Ice_cream_with_two_flavors">Ice cream with two flavors</h3> + +<pre class="brush: html"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>这产生了一个物体有两个属性,都拥有名字 "flavor" 但是却有不同的值 "Lemon sorbet" 和 "Apricot sorbet"。</p> + +<p>为了当一些属性有相同值的时候避免重复，一个介绍一个属性的元素同样可以一次性介绍多个属性。</p> + +<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange">An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"</h3> + +<pre class="brush: html"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>注意：微数据和被标记微数据的文档的内容之间是没有关系的。</p> +</div> + +<h3 id="Same_structured_data_marked_up_in_two_different_ways">Same structured data marked up in two different ways</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">语义上下面的两个样例没有任何区别。</p> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>两者都是拥有标题的图，并且都同时， 和图完全无关地, 有一个 名字是 "name" 并且值是"The Castle"的键值对的物体项。唯一的区别是如果用户把图片标题拖拽出文档的话，这个项会包含在拖拽的数据中。图像相关的项不会被包括。</p> + +<h2 id="名字和值">名字和值</h2> + +<p>一个属性是一个大小写敏感且展示键值对的包含唯一序列的无序集合。属性的值必须有至少一个序列。下面的这个样例中，每个数据格子都是一个序列。</p> + +<h3 id="Names_examples">Names examples</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>序列</strong>既可以是字符串也可以是URL。如果是一个URL，那么这个项被称为<strong>类型项</strong>。否则它是一个字符串。字符串不能包括句号和冒号（如下）。</p> + +<ol> + <li>如果项是一个类型项它必须满足: + <ol> + <li>是一个被定义的属性名</li> + <li>一个合法的指向语法定义的URL</li> + <li>一个合法的被用来当作所有权项属性名的URL</li> + </ol> + </li> + <li>如果一个项不是类型项，他必须： + <ol> + <li>一个不含 "<strong>.</strong>" (U+002E 句号) 和 "<strong>:</strong>" (U+003A冒号) 并且被用作一个所有权项的属性名（没有公共规范定义的）</li> + </ol> + </li> +</ol> + +<p class="note"><strong>注意:</strong> 上面的规则不允许 ":" 在没有URL的值中 是因为否则它们没法和URL作区分。带有"." 的值被保留作为将来可能的拓展。 空格也不被允许是因为否则值就会被解析为多个序列。</p> + +<h2 id="值">值</h2> + +<p>The property value of a name-value pair is as given for the first matching case in the following list:</p> + +<ul> + <li>If the element has an <strong>itemscope </strong>attribute + + <ul> + <li>The value is the <strong>item </strong>created by the element.</li> + </ul> + </li> + <li>If the element is a <strong>meta </strong>element + <ul> + <li>The value is the value of the element's <strong>content </strong>attribute</li> + </ul> + </li> + <li>If the element is an <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, or <strong>video </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the <a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>) of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is an <strong>a</strong>, <strong>area</strong>, or <strong>link </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is an <strong>object </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is a <strong>data </strong>element + <ul> + <li>The value is the value of the element's value attribute</li> + </ul> + </li> + <li>If the element is a <strong>meter </strong>element + <ul> + <li>The value is the value of the element's <strong>value </strong>attribute</li> + </ul> + </li> + <li>If the element is a <strong>time </strong>element + <ul> + <li>The value is the element's <strong>datetime </strong>value</li> + </ul> + </li> +</ul> + +<p>Otherwise</p> + +<ul> + <li>The value is the element's <strong>textContent</strong>.</li> +</ul> + +<p>If a property's value is a<strong> URL</strong>, the property must be specified using a URL property element. The URL property elements are the <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, and <strong>video </strong>elements.</p> + +<h3 id="Name_order">Name order</h3> + +<p>Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p> + +<h4 id="In_the_following_example_the_a_property_has_the_values_1_and_2_in_that_order_but_whether_the_a_property_comes_before_the_b_property_or_not_is_not_important">In the following example, the "a" property has the values "1" and "2", <em>in that order</em>, but whether the "a" property comes before the "b" property or not is not important</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<h4 id="The_following_is_equivalent">The following is equivalent</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="As_is_the_following">As is the following</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="And_the_following">And the following</h4> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="其他样例">其他样例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="Structured_data_2">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute:names:-the-itemprop-attribute">itemprop</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="查看其他">查看其他</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">其他不同的全局属性</a></li> + <li>其他，微数据相关的全局属性: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> +</div> +</div> diff --git a/files/zh-cn/web/html/global_attributes/itemref/index.html b/files/zh-cn/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..a16ec3bf27 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemref/index.html @@ -0,0 +1,167 @@ +--- +title: itemref +slug: Web/HTML/Global_attributes/itemref +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>itemref</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 不具有 <code>itemscope</code> 属性的元素的后代，才可以与具有 <code><strong>itemref</strong></code> 的元素关联。</span><code>itemref</code><span class="seoSummary"> 提供了元素 id（并不是 </span><code>itemid</code><span class="seoSummary">）的列表，并具有文档其它地方的额外属性。</span></p> + +<p><code>itemref</code> 属性只能在指定了 <code>itemscope</code> 的元素上指定。</p> + +<p class="note"><strong>注：</strong><code>itemref</code> 属性并不是 microdata 数据模型的一部分。它仅仅是个语义结构，用于帮助作者向页面添加注解，其中被注解的数据不遵循便利的树结构。例如，它允许作者标记表格中的数据，以便每一列定义一个单独的条目，同时在表格中保留属性。</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div> +</pre> + +<h3 id="结构化数据">结构化数据</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>id's</th> + <th>itemscope</th> + <th>itemref</th> + <th></th> + <th>(itemprop name)</th> + <th>(itemprop value)</th> + </tr> + <tr> + <td>id=amanda</td> + <td>itemscope</td> + <td>itemref=a,b</td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>id=a</td> + <td></td> + <td></td> + <td>itemprop</td> + <td>name</td> + <td>Amanda</td> + </tr> + <tr> + <td>id=b</td> + <td>itemscope</td> + <td>itemref=c</td> + <td></td> + <td>band</td> + <td></td> + </tr> + <tr> + <td colspan="1" rowspan="2">id=c</td> + <td></td> + <td></td> + <td>itemprop</td> + <td>Band</td> + <td>Jazz Band</td> + </tr> + <tr> + <td></td> + <td></td> + <td>itemprop</td> + <td>Size</td> + <td>12</td> + </tr> + </tbody> +</table> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemref</a></code></td> + <td></td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">其它不同的全局属性</a></li> + <li>其它 microdata 相关的全局属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/itemscope/index.html b/files/zh-cn/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..e04fb6db04 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,323 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemscope</strong></code> 是一个布尔值的 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 。它定义了一个与元数据关联的数据项。就是说一个元素的 <code><strong>itemscope</strong></code> 属性会创建一个项，包含了一组与元素相关的键值对。 相关的属性 {{htmlattrxref("itemtype")}} 通常表示表中一个有效的 URL （比如 <a href="http://schema.org/">schema.org</a>） 来表述项目和上下文。下面每个例子中的概念表都来自 <a href="https://schema.org/">schema.org</a>.</p> + +<p>每个 HTML 元素都可以有指定的 <code>itemscope</code> 属性。一个具有 <code>itemscope</code> 属性的元素可以没有关联的 <code>itemtype</code> ，但必须有相关的 <code>itemref</code>。</p> + +<div class="note"> +<p><strong>译者注:</strong> Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎： Google， Microsoft， Yandex 和 Yahoo! 所支持。</p> +</div> + +<div class="note"> +<p><strong>提示:</strong> 获取更多关于 <code>itemtype</code> 属性的信息： <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<h3 id="简单示例">简单示例</h3> + +<h4 id="HTML">HTML</h4> + +<p>下面一个例子指定的 <code>itemscope</code> 属性，设置了 <code>itemtype</code> 为 "http://schema.org/Movie"， 并且有3个关联的 <code>itemprop</code> 属性（name、director、genre）。</p> + +<pre class="brush:html"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 itemprop="name">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genre">Science fiction</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="sect1"> </h4> + +<h4 id="结构化数据">结构化数据</h4> + +<p>下表展示了上面例子当中的结构化数据。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id_属性"><code>itemscope</code> id 属性</h3> + +<p>当你表述一个元素的 <code>itemscope</code> 属性时，就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了 <code>itemscope</code> 和 <code>itemtype</code> 属性，你同时也就阐述了一个 {{htmlattrxref("id")}} 属性。你可以用 <code>id</code> 属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。</p> + +<h3 id="示例">示例</h3> + +<p>下面示例中有4个 <code>itemscope</code> 属性。每一个 <code>itemscope</code> 设置了相应的 <code>itemptype</code> 属性。例子中<code>itemtype</code>，<code>Recipe</code>，<code>AggregateRating</code>，以及 <code>NutritionInformation</code> 通过指定了 <code>itemptype</code>，也就是“http://schema.org/Recipe”，也都是 <a href="www.schema.org">schema.org</a> 提供的一个食谱的结构化数据的一部分。</p> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> +<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> +<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> +<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> +<span itemprop="name">Carol Smith</p></span> +</span> +<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> +November 5, 2009</p></time> +<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> +Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice<br></span> + Calories per serving: <span itemprop="calories">250 cal<br></span> + Fat per serving: <span itemprop="fatContent">12 g<br></span> +</span> +<p>Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... </p> + +Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div> </pre> + +<h3 id="结果">结果</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>下面例子是上述例子的补充：</p> + +<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> + +<h4 id="结构化数据_2">结构化数据</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>提示</strong>: Google 提供了一个方便地从HTML提取微数据结构的工具：<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a>。你可以通过上面的 HTML试一下。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>下表详细列出了主流浏览器中该条目的兼容性。 </p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">其它不同的全局属性</a></li> + <li>其他 microdata 相关的全局熟悉 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/itemtype/index.html b/files/zh-cn/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..3f0927d5cf --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,289 @@ +--- +title: itemtype +slug: Web/HTML/Global_attributes/itemtype +translation_of: Web/HTML/Global_attributes/itemtype +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>itemtype</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 指定了词汇的 URL，它将会用于定义数据结构中的 <code>itemprop</code>（条目属性）。</span>{{htmlattrxref("itemscope")}} 用于设置词汇的生效范围，其中词汇在数据结构中由 <code>itemtype</code> 设置。</p> + +<p>Google 和其它主流搜索引擎支持 <a href="http://schema.org/">schema.org</a> 结构化数据词汇。这个词汇定义了一组标准的类型名称和属性名称。例如，<code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> 表示音乐会的名称，<code><a href="http://schema.org/startDate">startDate</a></code> 和 <code><a href="http://schema.org/location">location</a></code> 属性指定了音乐会的关键信息。这里，<a href="http://schema.org/MusicEvent"><code>MusicEvent</code> </a>应该是用于 <code>itemtype</code> 的 URL，而 <code>startDate</code> 和 location 作为 <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> 所定义的 <code>itemprop。</code></p> + +<div class="note"> +<p><strong>注：</strong>更多 <code>itemtype</code> 属性的信息请见 <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<ul> + <li><strong>itemtype</strong> 属性必须拥有这样的值，它是唯一标识的无序集合，这些标识是大小写敏感的，每个标识都是有效的绝对 URL，并且所有都使用相同词汇定义。属性的值必须至少拥有一个标识。</li> + <li>条目的类型必须全部为定义在适用规范（例如 <a href="http://schema.org/">schema.org</a>）中的类型，并且必须使用相同词汇定义。</li> + <li>itemtype 属性只能在指定了 itemscope 属性的元素上指定。</li> + <li>itemid 属性只能在同时指定了 itemscope 和 itemtype 属性的元素上指定。它们必须仅仅在拥有 itemscope 属性的元素上指定，它的 itemtype 属性指定了不支持全局标识符的词汇，根据该词汇规范的定义。</li> + <li>全局标识符的准确含义，由词汇的规范决定。它留给这种规范，来定义全局标识符相同的多个条目（位于相同页面或不同页面）是否允许存在，以及对于处理 ID 相同的多个条目，使用什么处理规则。</li> +</ul> + +<h3 id="简单示例">简单示例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME</span> + <span itemprop="name">Executive Anvil</span> +</div></pre> + +<h4 id="结构化数据">结构化数据</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">schema.org Product</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">brand [Thing]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME<br></span> + <span itemprop="name">Executive Anvil<br></span> + <img itemprop="image" src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png" width="50" height="50" alt="Executive Anvil logo" /><br> + +<span itemprop="description">Sleeker than ACME's Classic Anvil, the + Executive Anvil is perfect for the business traveler + looking for something to drop from a height. + <br> +</span> + + Product #: <span itemprop="mpn">925872<br></span> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + Rating: <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89 + </span> reviews<p> + </span> + +<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> + Regular price: $179.99<br> + <meta itemprop="priceCurrency" content="USD" /> + <span itemprop="price">Sale price: $119.99<br></span> + (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05"> + 5 November!</time>)<br> + Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization"> + <span itemprop="name">Executive Objects<br></span> + </span> + Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned, + in excellent condition<br> + <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now! +</span> + + </span> + +</div></pre> + +<h3 id="结果">结果</h3> + +<h4 id="HTML_3">HTML</h4> + +<p>{{EmbedLiveSample('HTML_2', '300', '400', '', 'Web/HTML/Global_attributes/itemtype')}}</p> + +<h4 id="结构化数据_2">结构化数据</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="7">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Product (http://schema.org/Product)</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.</td> + </tr> + <tr> + <td>itemprop</td> + <td>mpn</td> + <td>925872</td> + </tr> + <tr> + <td>itemprop</td> + <td>brand [Thing]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + <tr> + <td colspan="1" rowspan="9">itemscope</td> + <td>itemprop[itemtype]</td> + <td>aggregateRating[AggregateRating]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.4</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>89</td> + </tr> + <tr> + <td>itemprop</td> + <td>offers [Offer]</td> + <td>http://schema.org/Offer</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceCurrency</td> + <td>USD</td> + </tr> + <tr> + <td>itemprop</td> + <td>price</td> + <td>119.99</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceValidUntil</td> + <td>2020-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>itemCondition</td> + <td>http://schema.org/UsedCondition</td> + </tr> + <tr> + <td>itemprop</td> + <td>availability</td> + <td>http://schema.org/InStock</td> + </tr> + <tr> + <td colspan="1" rowspan="2">itemscope</td> + <td>itemprop[itemtype]</td> + <td>seller [Organization]</td> + <td>http://schema.org/Organization</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Objects</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注：</strong></span> 一个工具，用于从 HTML 提取 microdata 结构，是 Google 的 <a href="https://developers.google.com/structured-data/testing-tool/">结构化数据测试工具</a>。在上面展示的 HTML 上尝试吧。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemtype</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">其它不同的全局属性</a></li> + <li>其它 microdata 相关的全局属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/lang/index.html b/files/zh-cn/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..6c253f48a7 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/lang/index.html @@ -0,0 +1,131 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - 全局属性 语言标签 lang +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>lang</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 参与了元素语言的定义。这个语言是不可编辑元素写入的语言，或者可编辑元素应该写入的语言。标签包含单个条目，值的格式由 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>用于定义语言的标签 (BCP47)</em></a> IETF 文档定义。如果标签的内容是空字符串，语言就设为<em>未知</em>。如果标签内容是无效的，根据 BCP47，它就设为<em>无效</em>。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="note"> +<h2 id="语言标签语法">语言标签语法</h2> + +<p>完整的BCP47语法足以标记极其特定的语言方言，但大多数用法都要简单得多。</p> + +<p>语言标记由连字符分隔的语言子标签组成，其中每个子标签指示该语言的特定属性。 3个最常见的子标签是：</p> + +<dl> + <dt>语言子标签</dt> + <dd>Required。一个2或3个字符的代码，用于定义基本语言，通常全部用小写编写。例如，English的语言代码是<code>en</code>，Badeshi的代码是<code>bdz</code>。 + + </dd> + <dt>脚本子标签</dt> + <dd>该子标签定义了用于该语言的书写系统，并且总是4个字符长，首字母大写。例如，French-in-Braille是<code>fr-Brai</code>，<code>ja-Kana</code>是用Katakana字母书写的日文。如果语言是以非常典型的方式编写的，例如拉丁字母表中的英语，则无需使用此子标签。</dd> + <dt>地区子标签</dt> + <dd>该子标签定义了来自特定位置的基本语言的方言，并且是ALLCAPS中与国家代码匹配的2个字母，或者是与非国家区域匹配的3个数字。例如，<code>es-ES</code>是西班牙语中的西班牙语，<code>es-013</code>是中美洲的西班牙语。 “国际西班牙语”就是<code>es</code>。</dd> +</dl> + +<p>如果两者都存在，则脚本子标签位于区域子标签之前 ––ru-Cyrl-BY是俄语，用白俄罗斯语中的西里尔字母书写。</p> + +<p>要查找语言的正确子标签代码，请参阅<a href="https://r12a.github.io/app-subtags/">语言子标签查找</a>。</p> +</div> + +<p>即使设置了 <strong>lang</strong> 属性，也可能无效，因为 <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a> 属性更加优先。</p> + +<p>对于CSS伪类{{cssxref(":lang")}}，如果它们的名称不同，则两个无效的语言名称是不同的。比如:<code>lang(es)</code>匹配<code>lang =“es-ES”</code>和<code>lang =“es-419”</code>，而<code>:lang(xyzzy)</code>与l<code>ang =“xyzzy-Zorp！”</code>不匹配。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/part/index.html b/files/zh-cn/web/html/global_attributes/part/index.html new file mode 100644 index 0000000000..ba309b028f --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/part/index.html @@ -0,0 +1,39 @@ +--- +title: part +slug: Web/HTML/Global_attributes/part +translation_of: Web/HTML/Global_attributes/part +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>part</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 包含一个以元素中part属性名称组成的列表，该列表以空格分隔。通过Part 的名称，可以使用CSS伪元素“::part”来选择shadow 树中指定元素并设置其样式 。</p> + +<p>参见用例 <a href="https://mdn.github.io/web-components-examples/shadow-part/">Shadow part 实例</a>.</p> + +<h2 id="标准">标准</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}</td> + <td>{{Spec2('CSS Shadow Parts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.global_attributes.part")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/slot/index.html b/files/zh-cn/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..43a73a82c5 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/slot/index.html @@ -0,0 +1,40 @@ +--- +title: slot +slug: Web/HTML/Global_attributes/slot +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div> + +<p><strong>slot</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 将一个 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow 树中的槽分配给一个元素： 带有 <code>slot</code> 属性的元素分配给由 {{HTMLElement("slot")}} 创建的槽，它的 {{htmlattrxref("name", "slot")}} 属性的值匹配 <code>slot</code> 属性的值。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/spellcheck/index.html b/files/zh-cn/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..7e8214cd73 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,213 @@ +--- +title: spellcheck +slug: Web/HTML/Global_attributes/spellcheck +tags: + - spellcheck + - 拼写检查 +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>spellcheck<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"> 全局属性</a>是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值：<a href="/en-US/docs/Web/HTML/Global_attributes"> </a></p> + +<ul> + <li><code>true</code>, 设置在可能的情况下会去检查元素内容的拼写错误;</li> + <li><code>false</code>, 设置在可能的情况下关闭对元素内容拼写检查.</li> +</ul> + +<p>如果没有设置这个属性，默认值由元素自身类型和浏览器设置决定。默认值也可以被继承，当有祖先元素的<em> spellcheck </em>设置为 <code>true</code> 的情况下，子元素的默认值也是 <code>true</code>。<br> + <br> + 你可以参考这篇文章的例子来使用这个属性。</p> + +<p>这个属性是枚举型而不是布尔类型. 这意味着显式设置其中一个值true或false是强制性的，如果使用简写 <code><label spellcheck>Example Label</label> 是不行的</code>。 正确的用法是<code> <label spellcheck="true">Example Label</label></code>.</p> + +<p>这个属性仅仅是浏览器上的提示: 浏览器并不会强制去检查拼写错误，通常不可编辑的元素是不会去检查拼写错误的，就算它的spellcheck 属性被设置为true而且浏览器支持拼写检查。</p> + +<p>各个浏览器的默认设置和元素依赖:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>浏览器</th> + <th>{{ HTMLElement("html") }}</th> + <th>{{ HTMLElement("textarea") }}</th> + <th>{{ HTMLElement("input") }}</th> + <th>其他</th> + <th>附注</th> + </tr> + <tr> + <td rowspan="3">Firefox</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <code>0</code></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>当 <code>layout.spellcheckDefault</code> 值为 <code>1</code> (default value)</strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <code>2</code></td> + </tr> + <tr> + <td rowspan="3">Seamonkey</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <span style="font-family: Courier New;"><code>0</code></span></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>当 <code>layout.spellcheckDefault</code> 值为 <span style="font-family: Courier New;">1</span><strong>（默认如此）</strong></strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <span style="font-family: Courier New;"><code>2</code></span></td> + </tr> + <tr> + <td rowspan="3">Camino</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <span style="font-family: Courier New;"><code>0</code></span></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td><em>inherited</em></td> + <td>当 <code>layout.spellcheckDefault</code> 值为 <span style="font-family: Courier New;"><code>1</code></span></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>当 <span style="font-family: Courier New;">layout.spellcheckDefault</span> 值为 <span style="font-family: Courier New;"><code>2</code></span><strong>（默认如此）</strong></strong></td> + </tr> + <tr> + <td>Chrome</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Opera</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Safari</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + </tbody> +</table> + +<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', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>与最新的快照相比没有变化， {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} 的快照，初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Chrome for 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>{{ CompatNo() }}</td> + <td>{{ CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/style/index.html b/files/zh-cn/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..6b2f0f5acc --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/style/index.html @@ -0,0 +1,107 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>style</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 包含应用到元素的 <a href="/en-US/docs/Web/CSS">CSS</a> 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 {{HTMLElement("style")}} 元素的主要目的是快速装饰。例如用于测试目的。</p> + +<div class="note"> +<p><strong>用法注解：</strong>这个属性不能用于传递语义信息。即使所有样式都移除了，页面也应该保留正确语义。通常它不应用于隐藏不相关的信息；这应该使用 <a href="#attr-hidden"><strong>hidden</strong></a> 属性来实现。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Defines the content of the <code>style</code> attribute.</td> + </tr> + </tbody> +</table> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/tabindex/index.html b/files/zh-cn/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..a67c3d938c --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,73 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - Global attributes + - HTML +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><strong>tabindex</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用<kbd>Tab</kbd>键，因此得名）。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</p> + +<p>它接受一个整数作为值，具有不同的结果，具体取决于整数的值：</p> + +<ul> + <li>tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。</li> + <li><code>tabindex="0"</code> ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。</li> + <li>tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照<strong>tabindex</strong> 的数值递增而滞后获焦。如果多个元素拥有相同的 <strong>tabindex</strong>，它们的相对顺序按照他们在当前DOM中的先后顺序决定。</li> +</ul> + +<p>根据键盘序列导航的顺序，值为 <code>0</code> 、非法值、或者没有 <strong>tabindex</strong> 值的元素应该放置在 <strong>tabindex</strong> 值为正值的元素后面。</p> + +<p>如果我们在 {{htmlelement("div")}} 上设置了 <code>tabindex</code> 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 <code>tabindex</code>。<a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">查看这篇 fiddle 来理解 tabindex 的滚动影响</a>。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注：</strong></span>tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> + <li>反映这个属性的 {{domxref("HTMLElement.tabIndex")}} </li> + <li>tabindex 的可访问性问题：请见 <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">不要使用大于 0 的 Tabindex | Adrian Roselli</a>。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/title/index.html b/files/zh-cn/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..73fbf8eda3 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/title/index.html @@ -0,0 +1,140 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - HTML + - Reference + - Title + - 全局属性 +translation_of: Web/HTML/Global_attributes/title +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary"><strong>title</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。一些典型用例：</span></p> + +<ul> + <li>链接：被链接文档的标题或描述</li> + <li>媒体元素，例如图像：描述或关联信息</li> + <li>段落：脚注或者相关的评论</li> + <li>引用：作者信息，以及其他</li> +</ul> + +<p>如果省略了这个属性，就意味着这个元素的最近祖先的标题仍然是相关的（并且可以用作元素的提示信息）。如果这个属性设为空字符串，它就明确意味着，它的最近祖先的标题是不相关的（并且不应用于这个元素的提示信息）。</p> + +<p>额外的语义可以附加到 {{ HTMLElement("link") }}，{{ HTMLElement("abbr") }}，{{ HTMLElement("input") }} 和 { HTMLElement("menuitem") }} 元素的 <strong>title</strong> 属性。</p> + +<p><strong>title</strong> 属性可以包含多行。每个插入的 <code>U+000A LINE FEED</code> (<code>LF</code>) 代表一个换行。有一些需要注意的东西，因为这意味着：</p> + +<pre class="brush: html"><p>Newlines in title should be taken into account,like this <abbr title="This is a +multiline title">example</abbr>.</p> +</pre> + +<p>这个示例定义了两行的标题。</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', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> + <li>反映这个属性的 {{domxref("HTMLElement.title")}} </li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/translate/index.html b/files/zh-cn/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..298214b303 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/translate/index.html @@ -0,0 +1,98 @@ +--- +title: translate +slug: Web/HTML/Global_attributes/translate +tags: + - Experimental + - HTML + - Referece +translation_of: Web/HTML/Global_attributes/translate +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> <strong>translate </strong>被用来规定对应元素的属性值及其子文本节点内容，是否跟随系统语言作出对应的翻译变化。Translate属性可以有下面两个值:</p> + +<ul> + <li>不做特别设置或者是“yes”。使用这两个值就代表着，网页在进行本地化的时候，对应内容要被翻译。</li> + <li><code>"no"。</code>使用此值代表着，对应的内容无需做任何翻译。</li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><strong>浏览器兼容性</strong></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>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅"><strong>参阅</strong></h2> + +<ul> + <li>所有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>.</li> + <li>{{domxref("HTMLElement.translate")}} API接口可以读取translate属性的值。</li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/x-ms-加速装置键/index.html b/files/zh-cn/web/html/global_attributes/x-ms-加速装置键/index.html new file mode 100644 index 0000000000..b44ded3590 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/x-ms-加速装置键/index.html @@ -0,0 +1,41 @@ +--- +title: x-ms-加速装置键 +slug: Web/HTML/Global_attributes/x-ms-加速装置键 +tags: + - HTML + - 参考 + - 属性 + - 无标准的 +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p><span class="seoSummary"> <code><strong>x-ms-acceleratorkey</strong></code> 属性声明 <a href="https://docs.microsoft.com/en-us/windows/uwp/design/input/keyboard-accelerators">accelerator key</a> 已经分配给一个元素: 当按下键盘上的键时，通过JavaScript激活该元素。</span></p> + +<p>{{Non-standard_Inline}} 此专有属性是特定于 Internet Explorer 和 Microsoft Edge的。</p> + +<p>对于屏幕阅读器和其他辅助技术，<code>x-ms-acceleratorkey</code> 在可访问性树中公开一个通知，即该元素存在一个加速器键。此属性不提供加速器键行为。必须提供JavaScript事件处理程序，如<code>onkeypress</code>, <code>onkeydown</code>, 或者 <code>onkeyup</code>, 来侦听声明的加速器键并相应地激活元素。</p> + +<p>为下列元素提供键盘快捷方式：不需要JavaScript的，请使用 <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">the <code>accesskey</code> 属性</a>。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: html"><button x-ms-acceleratorkey="[explanation of key combination]">…</button></pre> + +<h2 id="价值">价值</h2> + +<p>加速器键组合。例如：</p> + +<ul> + <li><code>"Ctrl+B"</code> 的组合 <kbd>Ctrl</kbd> 和 <kbd>B</kbd> 秘钥。</li> + <li><code>"J"</code> 只是为了 <kbd>J</kbd> 钥匙。</li> + <li><code>"Ctrl+; then K"</code> 的快捷方式，类似于 <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz的就键盘模式</a>。这种方法比较复杂，但不覆盖用户浏览器或操作系统提供的现有键盘快捷键。 </li> +</ul> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">全球 <code>accesskey</code> 属性</a></li> + <li><a href="/en-US/docs/Web/CSS/-ms-accelerator">这个 <code>-ms-accelerator</code> CSS 属性</a></li> + <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API 扩展</a></li> +</ul> diff --git a/files/zh-cn/web/html/global_attributes/x-ms-格式-检测/index.html b/files/zh-cn/web/html/global_attributes/x-ms-格式-检测/index.html new file mode 100644 index 0000000000..c36b3ca744 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/x-ms-格式-检测/index.html @@ -0,0 +1,43 @@ +--- +title: x-ms-格式-检测 +slug: Web/HTML/Global_attributes/x-ms-格式-检测 +tags: + - HTML + - x-ms-format-detection + - 参考 + - 属性 +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p>这个 <code><strong>x-ms-format-detection</strong></code> 属性确定元素文本中的数据格式(如电话号码)是否自动转换为可跟踪链接。</p> + +<p>现有的链接(例如带有<code>tel:</code> 计划不受影响。</p> + +<div class="blockIndicator note"> +<p>通过格式检测创建的链接不会出现在DOM中。</p> +</div> + +<p>{{Non-standard_inline}} 此专有属性是特定于 Internet Explorer 和Microsoft Edge。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: html"><html x-ms-format-detection="none"> +</pre> + +<h2 id="价值">价值</h2> + +<dl> + <dt><code>all</code></dt> + <dd>检测所有受支持的数据格式。</dd> + <dt><code>none</code></dt> + <dd>关闭格式检测。</dd> + <dt><code>phone</code></dt> + <dd>电话号码模式是自动链接的。</dd> +</dl> + +<h2 id="另请详见">另请详见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API extensions</a></li> +</ul> |