From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/global_attributes/accesskey/index.html | 138 ++++++ .../global_attributes/autocapitalize/index.html | 46 ++ .../web/html/global_attributes/class/index.html | 59 +++ .../global_attributes/contenteditable/index.html | 67 +++ .../html/global_attributes/contextmenu/index.html | 127 ++++++ .../html/global_attributes/data-_star_/index.html | 74 +++ .../web/html/global_attributes/dir/index.html | 127 ++++++ .../html/global_attributes/draggable/index.html | 101 ++++ .../web/html/global_attributes/dropzone/index.html | 94 ++++ .../web/html/global_attributes/hidden/index.html | 108 +++++ .../zh-cn/web/html/global_attributes/id/index.html | 63 +++ files/zh-cn/web/html/global_attributes/index.html | 201 ++++++++ .../html/global_attributes/inputmode/index.html | 64 +++ .../zh-cn/web/html/global_attributes/is/index.html | 67 +++ .../web/html/global_attributes/itemid/index.html | 149 ++++++ .../web/html/global_attributes/itemprop/index.html | 507 +++++++++++++++++++++ .../web/html/global_attributes/itemref/index.html | 167 +++++++ .../html/global_attributes/itemscope/index.html | 323 +++++++++++++ .../web/html/global_attributes/itemtype/index.html | 289 ++++++++++++ .../web/html/global_attributes/lang/index.html | 131 ++++++ .../web/html/global_attributes/part/index.html | 39 ++ .../web/html/global_attributes/slot/index.html | 40 ++ .../html/global_attributes/spellcheck/index.html | 213 +++++++++ .../web/html/global_attributes/style/index.html | 107 +++++ .../web/html/global_attributes/tabindex/index.html | 73 +++ .../web/html/global_attributes/title/index.html | 140 ++++++ .../html/global_attributes/translate/index.html | 98 ++++ .../index.html" | 41 ++ .../index.html" | 43 ++ 29 files changed, 3696 insertions(+) create mode 100644 files/zh-cn/web/html/global_attributes/accesskey/index.html create mode 100644 files/zh-cn/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/zh-cn/web/html/global_attributes/class/index.html create mode 100644 files/zh-cn/web/html/global_attributes/contenteditable/index.html create mode 100644 files/zh-cn/web/html/global_attributes/contextmenu/index.html create mode 100644 files/zh-cn/web/html/global_attributes/data-_star_/index.html create mode 100644 files/zh-cn/web/html/global_attributes/dir/index.html create mode 100644 files/zh-cn/web/html/global_attributes/draggable/index.html create mode 100644 files/zh-cn/web/html/global_attributes/dropzone/index.html create mode 100644 files/zh-cn/web/html/global_attributes/hidden/index.html create mode 100644 files/zh-cn/web/html/global_attributes/id/index.html create mode 100644 files/zh-cn/web/html/global_attributes/index.html create mode 100644 files/zh-cn/web/html/global_attributes/inputmode/index.html create mode 100644 files/zh-cn/web/html/global_attributes/is/index.html create mode 100644 files/zh-cn/web/html/global_attributes/itemid/index.html create mode 100644 files/zh-cn/web/html/global_attributes/itemprop/index.html create mode 100644 files/zh-cn/web/html/global_attributes/itemref/index.html create mode 100644 files/zh-cn/web/html/global_attributes/itemscope/index.html create mode 100644 files/zh-cn/web/html/global_attributes/itemtype/index.html create mode 100644 files/zh-cn/web/html/global_attributes/lang/index.html create mode 100644 files/zh-cn/web/html/global_attributes/part/index.html create mode 100644 files/zh-cn/web/html/global_attributes/slot/index.html create mode 100644 files/zh-cn/web/html/global_attributes/spellcheck/index.html create mode 100644 files/zh-cn/web/html/global_attributes/style/index.html create mode 100644 files/zh-cn/web/html/global_attributes/tabindex/index.html create mode 100644 files/zh-cn/web/html/global_attributes/title/index.html create mode 100644 files/zh-cn/web/html/global_attributes/translate/index.html create mode 100644 "files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" create mode 100644 "files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" (limited to 'files/zh-cn/web/html/global_attributes') 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

accesskey 全局属性 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
+ +
+

注意：在WHATWG规范中，它说你可以指定多个空格分隔的字符，浏览器将使用它所支持的第一个字符。然而，这在大多数浏览器中是行不通的。在IE/Edge中，它将使用它支持的第一个没有问题的，只要没有与其他命令冲突。

+
+ +

激活 accesskey 的操作取决于浏览器及其平台。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 WindowsLinuxMac
FirefoxAlt + Shift + keyOn Firefox 57 or newer, Control +  Option + key -OR- Control + Alt + key
+ On Firefox 14 or newer, Control + Alt + key
+ On Firefox 13 or older, Control + key
Internet ExplorerAlt + keyN/A
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/AControl + Alt + key
Opera 15+Alt + keyControl + Alt + key
Opera 12 +

Shift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key

+
+ +

要注意 Firefox 可以通过用户偏好，自定义所需的修饰键。

+ +

可访问性

+ +

除了糟糕的浏览器支持之外， accesskey属性还有很多问题：

+ + + +

由于这些问题，一般建议不要在大多数通用的网站和web应用程序中使用accesskey 属性。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}} + + + +
+ 		More realistic behavior described for what is implemented in reality.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}与 {{SpecName('HTML5.1')}} 规范相同。
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}与 {{SpecName('HTML5 W3C')}} 相同。
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}可以将几个字符设置为accesskey。而且，它可以设置在任何元素上。
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}只支持 {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.accesskey")}}

+ +

参见

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

{{HTMLSidebar("Global_attributes")}}

+ +

The autocapitalize 全局属性 是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：

+ + + +

在物理键盘上输入时，autocapitalize 属性不会影响行为。相反，它会影响其他输入机制的行为，比如移动设备的虚拟键盘和语音输入。这种机制的行为是，它们经常通过自动地将第一个句子的字母大写来帮助用户。autocapitalize 属性使作者能够覆盖每个元素的行为。

+ +

autocapitalize 属性永远不会为带有 {{htmlattrxref("type", "input")}}  属性，其值为  url, email 或 password的 {{HTMLElement("input")}} 元素启用自动大写。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

全局属性 class 的值是一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( {{domxref("document.getElementsByClassName")}})来选择和访问特定的元素。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

尽管对class 的命名没有要求，但 web 开发者最好使用可以表达元素语义目的的名称，而不是描述元素展现的名称（即使一个元素是斜体，但是 class 的命名也不应该是 italics）。语义化命名即使在页面展现发生改变时仍能合乎逻辑。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
具体条目标准备注
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, class is now a true global attribute.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.class")}}

+ +

另见

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

{{HTMLSidebar("Global_attributes")}}

+ +

全局属性 contenteditable  是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
+ +

该属性必须是下面的值之一：

+ + + +

如果没有设置该属性，其默认值继承自父元素。

+ +

该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，并且不允许简写为 <label contenteditable>Example Label</label>正确的用法是 <label contenteditable="true">Example Label</label>。

+ +

你可以使用CSS {{cssxref("caret-color")}} 属性设置用于绘制文本插入{{Glossary("caret")}}的颜色。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范版本规范状态注解
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.contenteditable")}}

+ +

相关链接

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

contextmenu 属性已经过时，将从所有浏览器中删除。

+
+ +
contextmenu全局属性是指用于某个元素的“上下文菜单”的{{HTMLElement("menu")}}的ID属性。
+ +
 
+ +
上下文菜单是指在用户交互（例如右键点击）时出现的菜单。 HTML5允许我们自定义此菜单。 这里有一些实现示例，包括嵌套菜单。
+ +

示例

+ +

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

JavaScript

+ +
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";
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例', "100%", 400)}}

+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.contextmenu")}}

+ +

[1]通过命令行选项--enable-blink-features = ContextMenu可以获得实验性实现。直到Chrome 52和Opera 39之前，它还是一个可选的、实验性功能，但由于Web兼容性问题，现已被删除。在2017年6月，它从这两个浏览器里被完全移除了。这些记录在  Chrome bug 87553。

+ +

[2]Firefox Mobile 已经不再支持 contextmenu 属性 ({{bug(1424252)}})。

+ +

推荐阅读

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

{{HTMLSidebar("Global_attributes")}}

+ +

data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
+ +

所有这些自定义数据属性都可以通过所属元素的 {{domxref("HTMLElement")}} 接口来访问。  {{domxref("HTMLElement.dataset")}} 属性可以访问它们。 * 可以使用遵循 xml名称生产规则 的任何名称来被替换，并具有以下限制：

+ + + +

注意，{{domxref("HTMLElement.dataset")}} 属性是一个{{domxref("DOMStringMap")}}，并且自定义数据属性 data-test-value 可以通过 HTMLElement.dataset.testValue ( 或者是 HTMLElement.dataset["testValue"] )  来访问，任何破折号(U+002D) 都会被下个字母的大写替代(驼峰拼写)。

+ +

用法

+ +

通过添加 data-* 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。例如，在游戏里的太空船 "sprite" 可以是一个带有一个 class 属性和几个 data-*属性的简单 {{HTMLElement("img")}} 元素：

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

有关使用 HTML 数据属性的更深入的教程，请参阅使用数据属性。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}} 的快照， no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.data_attributes")}}

+ +

相关链接

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

{{HTMLSidebar("Global_attributes")}}

+ +

全局属性dir是一个指示元素中文本方向的枚举属性。它的取值如下：

+ + + +
+

使用说明

+ +

这个属性对有不同语义的{{ HTMLElement("bdo") }}元素是必须的。

+ + +
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}自上一版本{{SpecName('HTML5.1')}}没有明显变化。
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}}的快照, 和{{SpecName('HTML5 W3C')}}比没有变化
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}}的快照, 在 {{SpecName('HTML4.01')}}基础上增加了auto值，并且是全局属性。
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}被所有元素支持除了{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}和{{HTMLElement("script")}}.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

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

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

全局属性 draggable 是一个枚举类型的属性，用于标识元素是否允许使用 拖放操作API 拖动。它的取值如下：

+ + + +

如果该属性没有设值，则默认值 为 auto ，表示使用浏览器定义的默认行为。

+ +

这个属性是枚举类型，而不是 布尔类型 。这意味着必须显式指定值为 true 或者 false ，像 <label draggable>Example Label</label> 这样的简写是不允许的。正确的用法是 <label draggable="true">Example Label</label>。

+ +

默认情况下，只有已选中的文本、图片、链接可以拖动。对其它的元素来说，必须按拖动机制的顺序设置 ondragstart 事件才能正常工作， 见 综合示例 。

+ +

标准

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参考资料

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

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

dropzone 全局属性 是个枚举属性，表示什么内容类型可以拖放到元素上，使用 Drag and Drop API，它可以拥有以下值：

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}与最新的快照{{SpecName('HTML5.1')}} 没有区别
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} 的快照，最初定义
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

另见

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

全局属性 hidden 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

+ +

hidden属性不能用于隐藏那些可以在其它板块中合理显示的内容。 例如,用hidden属性去隐藏一个选项卡对话框种的面板是不正确的，因为选项卡界面只不过是溢出显示的一种——一个可以等量于一个只显示所有form表单控件的拥有滚动条的大页面。类似地，用 hidden 属性在某个特定板块中隐藏一部分内容也是不正确的，——如果某些内容被标记为隐藏，它将从所有版块中隐藏,包括例如屏幕阅读器.

+ +

隐藏元素不应与非隐藏元素链接，作为隐藏元素的后代的元素仍然是活动的，这意味着脚本元素仍然可以执行，表单元素仍然可以提交。

+ +

比如说，用 href 标签链接到一个带有 hidden 标签的区块是不对的。 如果这个区块和这个页面不相干，或者这个区块不适用于这个页面，那没有任何理由需要链接到它。

+ +

不过，你还是可以使用 ARIA aria-describedby 标签去引用本身是隐藏的一些描述。

+ +

类似的，你也可以将一个带有 hidden 标签的 canvas 元素作为屏幕外的缓存区域，或者在表单控件中引用一个已经隐藏的表单。

+ +
+

说明: 改变具有hidden属性的元素的CSS的 {{cssxref("display")}} 属性将覆盖该行为。 例如, 元素被设置为 display: flex 将会导致元素显示出来，尽管设置了hidden属性

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Defines the suggested default rendering of the hidden attribute using CSS
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

另见

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

id 全局属性定义了一个全文档唯一的标识符 (ID)。它用于在链接（使用片段）、脚本和样式（通过 {{glossary("CSS")}}）中辨识元素。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ +
+

该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。

+
+ +

id 的值不得包含空白字符（{{glossary("whitespace")}}，包括空格和制表符等）。浏览器会将不符合规范的 ID 中的空白字符视为 ID 的一部分。与允许以空格分隔值的 {{htmlattrxref("class")}} 属性不同，元素只能拥有一个 ID 值。

+ +
+

注意：使用除 {{glossary("ASCII")}} 字母、数字、_、- 和 . 以外的字符可能会造成兼容性问题，因为 HTML 4 中不允许使用它们。虽然这个限制在 {{glossary("HTML5")}} 中被解除了，但为兼容性考虑 ID 应该以字母开头。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}, now accept '_', '-' and '.' if not at the beginning fo the id. It is also a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.id")}}

+ +

另请参阅

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

{{HTMLSidebar("Global_attributes")}}

+ +

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

+ +

我们可以在所有的HTML元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是html5兼容的。例如，虽然<foo>不是一个有效的HTML元素，但是html5兼容的浏览器隐藏了标记为<foo hidden>...<foo>的内容。

+ +

除了基本的HTML全局属性之外，还存在以下全局属性:

+ + + +

全局属性列表  

+ + + +
+
{{htmlattrdef("accesskey")}}
+
提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。
+
{{htmlattrdef("autocapitalize")}}
+
控制用户的文本输入是否和如何自动大写，它可以有以下的值： +
    +
  • off or none，没有应用自动大写（所有字母都默认为小写字母）。
    • +
  • on or sentences，每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
    • +
  • words，每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
    • +
  • characters，所有的字母都应该默认为大写。
    • +
+
+
{{htmlattrdef("class")}}
+
一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
+
{{htmlattrdef("contenteditable")}}
+
一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。 如果可以，浏览器会调整元素的部件（widget）以允许编辑。 +
    +
  • true 或者空字符串，表明元素是可被编辑的；
    • +
  • false，表明元素不能被编辑。
    • +
+
+
{{htmlattrdef("contextmenu")}}
+
{{HTMLElement("menu")}} 的id ，作为该元素的上下文菜单（已经不被支持，将从所有浏览器中删除）。
+
{{htmlattrdef("data-*")}}
+
一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。  HTMLElement.dataset 属性可以访问它们。
+
{{htmlattrdef("dir")}}
+
+

一个指示元素中文本方向的枚举属性。它的取值如下：

+ +
    +
  • ltr, 指从左到右，用于那种从左向右书写的语言（比如英语）；
    • +
  • rtl, 指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
    • +
  • auto, 指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。
    • +
+
+
{{htmlattrdef("draggable")}}
+
一种枚举属性，指示是否可以 使用 Drag and Drop API 拖动元素。它可以有以下的值： +
    +
  • true, 这表明元素可能被拖动
    • +
  • false, 这表明元素可能不会被拖动
    • +
+
+
{{htmlattrdef("dropzone")}} {{experimental_inline}}
+
枚举属性，指示可以使用 Drag and Drop API 在元素上删除哪些类型的内容。 它可以具有以下值： +
    +
  • copy，表示drop将创建被拖动元素的副本
    • +
  • move，表示拖动的元素将移动到此新位置。
    • +
  • link，将创建一个指向拖动数据的链接。
    • +
+
+
{{HTMLAttrDef("exportparts")}} {{Experimental_Inline}}
+
Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
+
{{htmlattrdef("hidden")}}
+
布尔属性表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容
+
{{htmlattrdef("id")}}
+
定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。
+
{{HTMLAttrDef("inputmode")}}
+
向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 {{HTMLElement("input")}}元素，但在{{HTMLAttrxRef("contenteditable")}}模式下可用于任何元素。
+
{{htmlattrdef("is")}}
+
允许您指定标准HTML元素应该像已注册的自定义内置元素一样（有关更多详细信息，请参阅使用自定义元素）。
+
+ +
+

注意: item *属性是 WHATWG HTML Microdata feature的一部分。

+
+ +
+
{{htmlattrdef("itemid")}}
+
项的唯一全局标识符。
+
{{htmlattrdef("itemprop")}}
+
用于向项添加属性。 每个HTML元素都可以指定一个itemprop属性，其中一个itemprop由一个名称和值对组成。
+
{{htmlattrdef("itemref")}}
+
只有不是具有itemscope属性的元素的后代，它的属性才可以与使用itemref项目相关联。它提供了元素ID列表（而不是itemids）以及文档中其他位置的其他属性。
+
{{htmlattrdef("itemscope")}}
+
itemscope（通常）与{{htmlattrxref("itemtype")}}一起使用，以指定包含在关于特定项目代码块中的HTML。 itemscope创建Item并定义与之关联的itemtype的范围。 itemtype是描述项及其属性上下文的词汇表（例如schema.org）的有效URL。
+
{{htmlattrdef("itemtype")}}
+
指定将用于在数据结构中定义itemprops（项属性）的词汇表的URL。 itemscope用于设置数据结构中按itemtype设置的词汇表的生效范围。
+
{{htmlattrdef("lang")}}
+
帮助定义元素的语言:不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成)，格式在 Tags for Identifying Languages (BCP47) 中定义。xml:lang 优先于它。
+
+
{{HTMLAttrDef("part")}} {{Experimental_Inline}}
+
元素的部件名称的空格分隔列表。Part名称允许CSS通过{{CSSxRef("::part()")}} 伪元素选择和设置阴影关联树中的特定元素。
+
+ +
+
{{htmlattrdef("slot")}}
+
将shadow DOM阴影关联树中的一个沟槽分配给一个元素：具有slot属性的元素被分配给由{{HTMLElement("slot")}}元素创建的沟槽，其{{htmlattrxref("name", "slot")}}属性的值与slot属性的值匹配。
+
+ +
+
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
+
枚举属性定义是否可以检查元素是否存在拼写错误。它可能具有以下值： +
    +
  • true，表示如果可能，应检查元素是否存在拼写错误;
    • +
  • false, 表示不应检查元素的拼写错误。
    • +
+
+
{{htmlattrdef("style")}}
+
含要应用于元素的CSS样式声明。 请注意，建议在单独的文件中定义样式。 该属性和{{HTMLElement("style")}}元素主要用于快速样式化，例如用于测试目的。
+
{{htmlattrdef("tabindex")}}
+
整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可能需要几个值： +
    +
  • 负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;
    • +
  • 0 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义;
    • +
  • 正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是tabindex的增加值。如果多个元素共享相同的tabindex，则它们的相对顺序遵循它们在文档中的相对位置。
    • +
+
+
{{htmlattrdef("title")}}
+
包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。
+
{{htmlattrdef("translate")}} {{experimental_inline}}
+
枚举属性，用于指定在页面本地化时是否转换元素的属性值及其{{domxref("Text")}} 节点子节点的值，或者是否保持它们不变。它可以具有以下值： +
    +
  • 空字符串和"yes"，表示元素将被翻译。
    • +
  • "no", 表示该元素不会被翻译。
    • +
+
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML WHATWG')}}From latest snapshot, {{SpecName('HTML5.1')}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, spellcheck, draggable, and dropzone have been added.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
+ xml:lang which was initially part of XHTML, is now also part of HTML.
+ hidden, data-*, contextmenu, contenteditable, and translate have been added.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
+ class and style 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")}}.
+ dir 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")}}.
+ id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ lang 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")}}.
+ tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ accesskey is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.
+ title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes")}}

+ +

参见

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

inputmode 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。它可以是以下值：

+ +
+
"none"
+
无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
+
"text"
+
使用用户本地区域设置的标准文本输入键盘。
+
"decimal"
+
小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
+
"numeric"
+
数字输入键盘，所需要的就是0到9的数字，设备可能也可能不显示减号键。
+
"tel"
+
电话输入键盘，包含0到9的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
+
"search"
+
为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
+
"email"
+
为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
+
"url"
+
为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。
+
+ +

如果没有设置这个属性，它的默认值是 "text"，表明使用本地的标准文本输入键盘。

+ +
+

规范冲突: WHATWG(超文本应用技术工作组)规范中列出了 inputmode, 并且现代浏览器正在努力支持它。但 W3C HTML 5.2 规范 不再将其列出（也就是说将其标记为过时的）。在达成共识之前，你应该认为WHATWG规范定义的就是正确的。

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

参照

+ + + +
{{HTMLSidebar("Global_attributes")}}
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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

is 全局属性( global attribute )允许您指定标准HTML元素像定义的内置元素一样工作（请参阅使用自定义元素( Using custom elements )以获取更多详细信息）。

+ +

只有在当前文档中已成功定义( defined )指定的自定义元素名称并且扩展了要应用的元素类型时，才能使用此属性。

+ +

示例

+ +

 以下代码来自我们的 word-count-web-component 示例（see it live also）。

+ +
// 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' });
+ +
<p is="word-count"></p>
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

参见

+ + + +

 

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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemid 全局属性 是元素的唯一的全局标识符。itemid 属性只能为同时拥有 itemscope 和 itemtype 的元素指定。同时，itemid 只能为拥有 itemscope 的元素指定，它的相应 itemtype 引用或定义了支持全局标识符的词汇。

+ +

itemtype 的全局标识符的准确含义，由该标识符以指定的词汇提供。词汇定义了全局标识符相同的多个元素是否可以共存，并且如果是这样，这些元素如何处理。 

+ +

注：Whatwg.org 的定义规定了 itemid 必须是 URL。但是，下面的示例正确展示了 URN 也可以使用。这个不一致性可能反映了 Microdata 规范的不完善性。

+ +

示例

+ +

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

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemid +
http://vocab.example.net/book: urn:isbn:0-330-34032-8
+
itemproptitleThe Reality Dysfunction
itempropauthor +
Peter F. Hamilton
+
itemproppubdate1996-01-26
+ +

结果

+ +

{{EmbedLiveSample('示例')}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemid WG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

另见

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

全局属性 itemprop被用于向一个物体中添加属性。每一个HTML元素都可以指定一个itemprop属性，一个itemprop属性由name-value对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个string或者一个URL，并且可以和大部分元素进行组合，包括{{HTMLElement("audio")}}， {{HTMLElement("embed")}}， {{HTMLElement("iframe")}}， {{HTMLElement("img")}}， {{HTMLElement("link")}}， {{HTMLElement("object")}}， {{HTMLElement("source")}} ， {{HTMLElement("track")}}， 和 {{HTMLElement("video")}}。

+ +

样例

+ +

下面的样例展示了一组带有itemprop属性的源代码，后面的表格展示了产生的结构化数据。

+ +

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="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+ +

Structured data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Item
itemprop nameitemprop value
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

属性

+ +

属性拥有的值可能是字符串又或者是URL。当一个字符串值是一个URL的时候，它被用 {{HTMLElement("a")}} 及它的属性值 {{htmlattrxref("href", "a")}} 、{{HTMLElement("img")}} 及它的属性值 {{htmlattrxref("src", "img")}} 、或者其它被链接到或嵌入外部的资源的元素来表述。

+ +

Three properties with values that are strings

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

One property, "image", whose value is a URL

+ +
<div itemscope>
+ <img itemprop="image"
+   src="google-logo.png" alt="Google">
+</div>
+ +

当一个字符串值不能令人通俗易懂的时候（e.g.，一个长串的数字和字母），它能被用data元素的value属性表示，用所给元素内容的更易懂的版本（它不是结构化数据的一部分-请看下面的例子）。

+ +

An item with a property whose value is a product ID

+ +

ID不是人性化的，所以产品的名字是用的人所能看懂的文字而不是ID。

+ +
<h1 itemscope>
+ <data itemprop="product-id"
+   value="9678AOU879">The Instigator 2000</data>
+</h1>
+ +

对于数字数据，meter 元素及它的 value 属性值能够被用来表述。

+ +

A meter element

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

与此相类似的，对于日期时间相关的数据，time 元素和他的 datetime 属性值能够被使用表示。

+ +

An item with one property, "birthday", whose value is a date

+ +
<div itemscope>
+ I was born on <time
+   itemprop="birthday"
+   datetime="2009-05-10">May 10th 2009</time>.
+</div>
+ +

通过把元素上的 itemscope 属性中声明属性，属性也可以是一个组 name-values 对。每个值既可以是一个字符串又可以是一组 name-values 对（i.e. 一个项）。

+ +

An outer item representing a person, and an inner one representing a band

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

上面的外层项有两个属性，“name” 和 “band”。“name” 的值是 “Amanda”, “band” 的值是一个在它右侧的项决定的，它有两个属性，“name” 和 “size”。乐队的 “name” 的值是 “Jazz Band”，“size” 的值是 “12”。这个例子的外层项是顶级微数据标签。不是其他项的项被称为顶级微数据项。

+ +

All the properties separated from their items

+ +

这个样例和之前一个一摸一样，但是所有的属性都被从它们的项中分离了出来。

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

这产生了和之前样例相同的结果。第一个项有两个属性，“name“，设置为“Amanda”和“band”，设置到另一个项去了。第二个项有两个更进一步的属性，“name”设置为“Jazz Band”并且“size”设置为“12”。

+ +

一个项可以有多个拥有相同名字但是值不同的属性。

+ +

Ice cream with two flavors

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

这产生了一个物体有两个属性,都拥有名字 "flavor" 但是却有不同的值 "Lemon sorbet" 和 "Apricot sorbet"。

+ +

为了当一些属性有相同值的时候避免重复，一个介绍一个属性的元素同样可以一次性介绍多个属性。

+ +

An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

+ +
<div itemscope>
+ <span
+  itemprop="favorite-color
+    favorite-fruit">orange</span>
+</div>
+ +
+

注意：微数据和被标记微数据的文档的内容之间是没有关系的。

+
+ +

Same structured data marked up in two different ways

+ +

语义上下面的两个样例没有任何区别。

+ +
<figure>
+ <img src="castle.jpeg">
+ <figcaption><span
+   itemscope><span
+   itemprop="name">The Castle</span></span>
+     (1986)</figcaption>
+</figure>
+ +
<span itemscope><meta
+  itemprop="name"
+  content="The Castle"></span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle
+  (1986)</figcaption>
+</figure>
+ +

两者都是拥有标题的图，并且都同时， 和图完全无关地, 有一个 名字是 "name" 并且值是"The Castle"的键值对的物体项。唯一的区别是如果用户把图片标题拖拽出文档的话，这个项会包含在拖拽的数据中。图像相关的项不会被包括。

+ +

名字和值

+ +

一个属性是一个大小写敏感且展示键值对的包含唯一序列的无序集合。属性的值必须有至少一个序列。下面的这个样例中，每个数据格子都是一个序列。

+ +

Names examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Item
itemprop nameitemprop value
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

序列既可以是字符串也可以是URL。如果是一个URL，那么这个项被称为类型项。否则它是一个字符串。字符串不能包括句号和冒号（如下）。

+ +
    +
  1. 如果项是一个类型项它必须满足: +
      +
    1. 是一个被定义的属性名
      2. +
    2. 一个合法的指向语法定义的URL
      3. +
    3. 一个合法的被用来当作所有权项属性名的URL
      4. +
    +
    2. +
  2. 如果一个项不是类型项，他必须： +
      +
    1. 一个不含 "." (U+002E 句号) 和 ":" (U+003A冒号) 并且被用作一个所有权项的属性名（没有公共规范定义的）
      2. +
    +
    3. +
+ +

注意: 上面的规则不允许 ":" 在没有URL的值中 是因为否则它们没法和URL作区分。带有"." 的值被保留作为将来可能的拓展。 空格也不被允许是因为否则值就会被解析为多个序列。

+ +

值

+ +

The property value of a name-value pair is as given for the first matching case in the following list:

+ + + +

Otherwise

+ + + +

If a property's value is a URL, the property must be specified using a URL property element. The URL property elements are the a, area, audio, embed, iframe, img, link, object, source, track, and video elements.

+ +

Name order

+ +

Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

+ +

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

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+ +

The following is equivalent

+ +
<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+</div>
+ +

As is the following

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+ +

And the following

+ +
<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+
+ +

其他样例

+ +

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

Structured data

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemidhttp://vocab.example.net/book: urn:isbn:0-330-34032-8
itemproptitleThe Reality Dysfunction
itempropauthorPeter F. Hamilton
itemproppubdate1996-01-26
+ +

Result

+ +

{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemprop WG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +

查看其他

+ +
    +
  • 其他不同的全局属性
    • +
  • 其他，微数据相关的全局属性: +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
+
+
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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemref 全局属性 不具有 itemscope 属性的元素的后代，才可以与具有 itemref 的元素关联。itemref 提供了元素 id（并不是 itemid）的列表，并具有文档其它地方的额外属性。

+ +

itemref 属性只能在指定了 itemscope 的元素上指定。

+ +

注：itemref 属性并不是 microdata 数据模型的一部分。它仅仅是个语义结构，用于帮助作者向页面添加注解，其中被注解的数据不遵循便利的树结构。例如，它允许作者标记表格中的数据，以便每一列定义一个单独的条目，同时在表格中保留属性。

+ +

示例

+ +

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

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
id'sitemscopeitemref(itemprop name)(itemprop value)
id=amandaitemscopeitemref=a,b
id=aitempropnameAmanda
id=bitemscopeitemref=cband
id=citempropBandJazz Band
itempropSize12
+ +

结果

+ +

{{EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref')}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemrefWG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参阅

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemscope 是一个布尔值的 全局属性 。它定义了一个与元数据关联的数据项。就是说一个元素的 itemscope 属性会创建一个项，包含了一组与元素相关的键值对。 相关的属性 {{htmlattrxref("itemtype")}} 通常表示表中一个有效的 URL （比如 schema.org） 来表述项目和上下文。下面每个例子中的概念表都来自 schema.org.

+ +

每个 HTML 元素都可以有指定的 itemscope 属性。一个具有 itemscope 属性的元素可以没有关联的 itemtype ，但必须有相关的 itemref。

+ +
+

译者注: Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎： Google， Microsoft， Yandex 和 Yahoo! 所支持。

+
+ +
+

提示: 获取更多关于 itemtype 属性的信息： http://schema.org/Thing

+
+ +

简单示例

+ +

HTML

+ +

下面一个例子指定的 itemscope 属性，设置了 itemtype 为 "http://schema.org/Movie"， 并且有3个关联的 itemprop 属性（name、director、genre）。

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

 

+ +

结构化数据

+ +

下表展示了上面例子当中的结构化数据。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgenreScience Fiction
itempropnameAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
+ +

itemscope id 属性

+ +

当你表述一个元素的 itemscope 属性时，就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了 itemscope 和 itemtype 属性，你同时也就阐述了一个 {{htmlattrxref("id")}} 属性。你可以用 id 属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。

+ +

示例

+ +

下面示例中有4个 itemscope 属性。每一个 itemscope 设置了相应的 itemptype 属性。例子中itemtype，Recipe，AggregateRating，以及 NutritionInformation 通过指定了 itemptype，也就是“http://schema.org/Recipe”，也都是 schema.org 提供的一个食谱的结构化数据的一部分。

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

结果

+ +

HTML

+ +

下面例子是上述例子的补充：

+ +

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

+ +

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
+ +
+

提示: Google 提供了一个方便地从HTML提取微数据结构的工具： Structured Data Testing Tool。你可以通过上面的 HTML试一下。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemscope WG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

下表详细列出了主流浏览器中该条目的兼容性。 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参阅

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemtype 全局属性 指定了词汇的 URL，它将会用于定义数据结构中的 itemprop（条目属性）。{{htmlattrxref("itemscope")}} 用于设置词汇的生效范围，其中词汇在数据结构中由 itemtype 设置。

+ +

Google 和其它主流搜索引擎支持 schema.org 结构化数据词汇。这个词汇定义了一组标准的类型名称和属性名称。例如，MusicEvent 表示音乐会的名称，startDate 和 location 属性指定了音乐会的关键信息。这里，MusicEvent 应该是用于 itemtype 的 URL，而 startDate 和 location 作为 MusicEvent 所定义的 itemprop。

+ +
+

注：更多 itemtype 属性的信息请见 http://schema.org/Thing

+
+ + + +

简单示例

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+ +

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeschema.org Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
+ +

示例

+ +

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

结果

+ +

HTML

+ +

{{EmbedLiveSample('HTML_2', '300', '400', '', 'Web/HTML/Global_attributes/itemtype')}}

+ +

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeProduct (http://schema.org/Product)
itempropnameExecutive Anvil
itempropimagehttps://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png
itempropdescriptionSleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.
itempropmpn925872
itempropbrand [Thing] 
itempropnameACME
itemscopeitemprop[itemtype]aggregateRating[AggregateRating] 
itempropratingValue4.4
itempropreviewCount89
itempropoffers [Offer]http://schema.org/Offer
itemproppriceCurrencyUSD
itempropprice119.99
itemproppriceValidUntil2020-11-05
itempropitemConditionhttp://schema.org/UsedCondition
itempropavailabilityhttp://schema.org/InStock
itemscopeitemprop[itemtype]seller [Organization]http://schema.org/Organization
itempropnameExecutive Objects
+ +
+

注： 一个工具，用于从 HTML 提取 microdata 结构，是 Google 的 结构化数据测试工具。在上面展示的 HTML 上尝试吧。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemtype WG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

另见

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

lang 全局属性 参与了元素语言的定义。这个语言是不可编辑元素写入的语言，或者可编辑元素应该写入的语言。标签包含单个条目，值的格式由 用于定义语言的标签 (BCP47) IETF 文档定义。如果标签的内容是空字符串，语言就设为未知。如果标签内容是无效的，根据 BCP47，它就设为无效。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
+ + + +
+

语言标签语法

+ +

完整的BCP47语法足以标记极其特定的语言方言，但大多数用法都要简单得多。

+ +

语言标记由连字符分隔的语言子标签组成，其中每个子标签指示该语言的特定属性。 3个最常见的子标签是：

+ +
+
语言子标签
+
Required。一个2或3个字符的代码，用于定义基本语言，通常全部用小写编写。例如，English的语言代码是en，Badeshi的代码是bdz。 + +
+
脚本子标签
+
该子标签定义了用于该语言的书写系统，并且总是4个字符长，首字母大写。例如，French-in-Braille是fr-Brai，ja-Kana是用Katakana字母书写的日文。如果语言是以非常典型的方式编写的，例如拉丁字母表中的英语，则无需使用此子标签。
+
地区子标签
+
该子标签定义了来自特定位置的基本语言的方言，并且是ALLCAPS中与国家代码匹配的2个字母，或者是与非国家区域匹配的3个数字。例如，es-ES是西班牙语中的西班牙语，es-013是中美洲的西班牙语。 “国际西班牙语”就是es。
+
+ +

如果两者都存在，则脚本子标签位于区域子标签之前 ––ru-Cyrl-BY是俄语，用白俄罗斯语中的西里尔字母书写。

+ +

要查找语言的正确子标签代码，请参阅语言子标签查找。

+
+ +

即使设置了 lang 属性，也可能无效，因为 xml:lang 属性更加优先。

+ +

对于CSS伪类{{cssxref(":lang")}}，如果它们的名称不同，则两个无效的语言名称是不同的。比如:lang(es)匹配lang =“es-ES”和lang =“es-419”，而:lang(xyzzy)与lang =“xyzzy-Zorp！”不匹配。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}, behavior with xml:lang and language determination algorithm defined. It also is a true global attribute.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

相关链接

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

part 全局属性 包含一个以元素中part属性名称组成的列表，该列表以空格分隔。通过Part 的名称，可以使用CSS伪元素“::part”来选择shadow 树中指定元素并设置其样式 。

+ +

参见用例 Shadow part 实例.

+ +

标准

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}{{Spec2('CSS Shadow Parts')}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes.part")}}

+ +

相关链接

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
+ +

slot 全局属性 将一个 shadow DOM shadow 树中的槽分配给一个元素： 带有 slot 属性的元素分配给由 {{HTMLElement("slot")}} 创建的槽，它的 {{htmlattrxref("name", "slot")}} 属性的值匹配 slot 属性的值。

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.slot")}}

+ +

另见

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

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

spellcheck 全局属性是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值： 

+ + + +

如果没有设置这个属性，默认值由元素自身类型和浏览器设置决定。默认值也可以被继承，当有祖先元素的 spellcheck 设置为 true 的情况下，子元素的默认值也是 true。
+
+ 你可以参考这篇文章的例子来使用这个属性。

+ +

这个属性是枚举型而不是布尔类型. 这意味着显式设置其中一个值true或false是强制性的，如果使用简写 <label spellcheck>Example Label</label> 是不行的。 正确的用法是 <label spellcheck="true">Example Label</label>.

+ +

这个属性仅仅是浏览器上的提示: 浏览器并不会强制去检查拼写错误，通常不可编辑的元素是不会去检查拼写错误的，就算它的spellcheck 属性被设置为true而且浏览器支持拼写检查。

+ +

各个浏览器的默认设置和元素依赖:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
浏览器{{ HTMLElement("html") }}{{ HTMLElement("textarea") }}{{ HTMLElement("input") }}其他附注
Firefoxfalsefalsefalseinherited当 layout.spellcheckDefault 值为 0
falsetrueinheritedinherited当 layout.spellcheckDefault 值为 1 (default value)
falsetruetrueinherited当 layout.spellcheckDefault 值为 2
Seamonkeyfalsefalsefalseinherited当 layout.spellcheckDefault 值为 0
falsetrueinheritedinherited当 layout.spellcheckDefault 值为 1（默认如此）
falsetruetrueinherited当 layout.spellcheckDefault 值为 2
Caminofalsefalsefalseinherited当 layout.spellcheckDefault 值为 0
falsetrueinheritedinherited当 layout.spellcheckDefault 值为 1
falsetruetrueinherited当 layout.spellcheckDefault 值为 2（默认如此）
Chromefalsetrue?inherited
Internet Explorerfalsetrue?inherited
Operafalsetrue?inherited
Safarifalsetrue?inherited
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态附注
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}与最新的快照相比没有变化， {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} 的快照，初始定义
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
功能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

另见

+ + 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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

style 全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 {{HTMLElement("style")}} 元素的主要目的是快速装饰。例如用于测试目的。

+ +
+

用法注解：这个属性不能用于传递语义信息。即使所有样式都移除了，页面也应该保留正确语义。通常它不应用于隐藏不相关的信息；这应该使用 hidden 属性来实现。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Defines the content of the style attribute.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

另见

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

{{HTMLSidebar("Global_attributes")}}

+ +

tabindex 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

+ +

{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}

+ +

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

+ + + +

根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

+ +

如果我们在 {{htmlelement("div")}} 上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex。查看这篇 fiddle 来理解 tabindex 的滚动影响。

+ +
+

注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.tabindex")}}

+ +

另见

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

{{HTMLSidebar("Global_attributes")}}

+ +

title 全局属性 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。一些典型用例：

+ + + +

如果省略了这个属性，就意味着这个元素的最近祖先的标题仍然是相关的（并且可以用作元素的提示信息）。如果这个属性设为空字符串，它就明确意味着，它的最近祖先的标题是不相关的（并且不应用于这个元素的提示信息）。

+ +

额外的语义可以附加到 {{ HTMLElement("link") }}，{{ HTMLElement("abbr") }}，{{ HTMLElement("input") }} 和 { HTMLElement("menuitem") }} 元素的 title 属性。

+ +

title 属性可以包含多行。每个插入的 U+000A LINE FEED (LF) 代表一个换行。有一些需要注意的东西，因为这意味着：

+ +
<p>Newlines in title should be taken into account,like this <abbr title="This is a
+multiline title">example</abbr>.</p>
+
+ +

这个示例定义了两行的标题。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
格式状态注释
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特征ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{ CompatVersionUnknown() }}{{CompatGeckoDesktop(12)}}{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

另见

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

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

全局属性 translate 被用来规定对应元素的属性值及其子文本节点内容，是否跟随系统语言作出对应的翻译变化。Translate属性可以有下面两个值:

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

参阅

+ + diff --git "a/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" "b/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" new file mode 100644 index 0000000000..b44ded3590 --- /dev/null +++ "b/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/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 +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

 x-ms-acceleratorkey 属性声明 accelerator key 已经分配给一个元素: 当按下键盘上的键时，通过JavaScript激活该元素。

+ +

{{Non-standard_Inline}} 此专有属性是特定于 Internet Explorer 和 Microsoft Edge的。

+ +

对于屏幕阅读器和其他辅助技术，x-ms-acceleratorkey  在可访问性树中公开一个通知，即该元素存在一个加速器键。此属性不提供加速器键行为。必须提供JavaScript事件处理程序，如onkeypress, onkeydown, 或者 onkeyup, 来侦听声明的加速器键并相应地激活元素。

+ +

为下列元素提供键盘快捷方式：不需要JavaScript的，请使用 the accesskey 属性。

+ +

语法

+ +
<button x-ms-acceleratorkey="[explanation of key combination]">…</button>
+ +

价值

+ +

加速器键组合。例如：

+ + + +

另请参阅

+ + diff --git "a/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" "b/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" new file mode 100644 index 0000000000..c36b3ca744 --- /dev/null +++ "b/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/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 +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

这个 x-ms-format-detection 属性确定元素文本中的数据格式(如电话号码)是否自动转换为可跟踪链接。

+ +

现有的链接(例如带有tel: 计划不受影响。

+ +
+

通过格式检测创建的链接不会出现在DOM中。

+
+ +

{{Non-standard_inline}} 此专有属性是特定于 Internet Explorer 和Microsoft Edge。

+ +

语法

+ +
<html x-ms-format-detection="none">
+
+ +

价值

+ +
+
all
+
检测所有受支持的数据格式。
+
none
+
关闭格式检测。
+
phone
+
电话号码模式是自动链接的。
+
+ +

另请详见

+ + -- cgit v1.2.3-54-g00ecf