全局属性

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，尽管属性可能对某些元素没有影响。

使用说明：HTML5 规范规定全局属性可以用在所有的HTML element上，甚至HTML5没有规范的element。这意味着任何非标准的element也可以使用这些属性，甚至在HTML5不兼容的文档类型下这些element的使用方式也可以用。

 

accesskey

这个属性提供了一种使用快捷键访问当前元素的途径。它是用一个字符（单个Unicode code）列表的独立规范构成。浏览器应该使用键盘的第一布局。

HTML 4在前一个HTML版本里，只能指定一个字符。而且不是全局属性，能使用的元素值有：<a>, <area>, <button>, <input>, <label>, <legend> and <textarea>.

使用说明: 怎样操作激活快捷键决定于平台和浏览器。
  Windows Linux Mac
Firefox Alt + Shift + a key
  • Firefox 14 or newer, Control + Alt + a key
  • Firefox 13 or older, Control + a key
Internet Explorer Alt + a key N/A
Google Chrome Alt + a key Control + Alt + a key
Safari Alt + a key N/A Control + Alt + a key
Opera Shift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by a key

注意：火狐可以依照用户的喜好自定义需要的调节键。

 

标准文档 WHATWG HTML Living Standard
accesskey (HTML 4: HTML 4.01 Specification
accesskey)

class

这个属性是一个element的class的独立规范列表。class允许css和javascript通过class选择器或者类似下面的DOM方法来选择和访问element

document.getElementsByClassName.

使用说明: 尽管规范没有将class名字定为是必须的，但是开发者会使用一个能描述element语义化用途的名字，而不会使用一个描述他外观的名字（例如：用可以描述它是一个属性的attribute，而不是用描述它的表现形式是斜体italics来命名，尽管element的class名字可以使用italics）。语义化的名字仍然有意义即使页面的表现形式改变了。

标准文档 WHATWG HTML Living Standard
class (HTML 4: HTML 4.01 Specification
class)

contenteditable

HTML5 :这个可枚举的属性表示这个element可以被用户编辑。如果是这样，浏览器会修改widget让它允许编辑。这个属性必须拥有以下值中的其中一个：

  • true 或者空字符串,表明这个element可编辑;
  • false, 表明这个element一定不能被编辑.

如果这个属性没有被设置，他的默认值会继承他父element的。

使用说明: 这个属性是一个可枚举的属性，而不是一个布尔属性。这意味着true,false或空字符串的显式使用是强制的。这样的简写<label contenteditable>Example Label</label>是不允许的。正确使用方式是：<label contenteditable="true">Example Label</label>。

标准文档 WHATWG HTML Living Standard
contenteditable

contextmenu

HTML5 这个属性和这个新规范WHATWG HTML Living Standard
contextmenu有关系.

一个context menu是一个菜单，出现在用户的交互里，比如一次右击。HTML5允许我们自定义这个菜单。这个几个实现的例子，包含了嵌套的菜单。

The following HTML...

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></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><pre 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</pre></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">One the image below, you can fire the "Change Image" action in your Context Menu.</li><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>
  </ol>
</body>

      ol {
        list-style-type:decimal;
      }

...used with this JavaScript...

function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

...will result in:

data-*

HTML5 这类的属性，被称为自定义属性，允许HTML与和它对应DOM表现形式之间的专有信息交换，这或许对script来说有用。这样被设置了这个属性的element就可以通过的HTMLElement的接口访问所有的自定义数据。HTMLElement.dataset属性提供了访问它们的权限。

*可以被任何符合以下限制的the producton rule of xml names(xml的命名规则)代替：

  • 名字不能以xml开头，除此之外其他任何情形都可是使用这3个字母；
  • 名字不能含有分号；
  • 名字不能含有大写字母。

注意：HTMLElement.dataset是一个 StringMap。一个名叫data-test-value的自定义属性可以通过HTMLElment.dataset.testValue来访问，属性的名字中的中线(U+002D)被挨着它字母的大写字母代替了（驼峰命名）。

Normative document WHATWG HTML Living Standard
data

dir

这个可枚举属性表明element的文本方向。它可以有以下值：

  • ltr, left to right，适用于从左向右写的语言（比如：英语）；
  • rtl, right to left，适用于从右向左写的语言（比如：阿拉伯语）
  • auto, 由代理决定。用一个最基础的算法来解析element中的字符，如果发现有一个字符具有很强的方向性，那么就把这个方向作为整个element的方向。 HTML5

Usage notes:

  • 这个属性强制要求使用在<bdo>element中，它在里边有不同的语法含义。
  • 该属性不背<bdi>element继承，如果不设置，它的值就是auto.
  • 这个属性能够被css属性direction和unicode-bidi覆盖。如果一个css页面被激活，那么element就会支持这些属性。
  • 因为文本的方向与内容本身有关，和它的表现没关系，所以推荐开发者尽可能的使用这个属性来而避免在css属性中使用。这样的话，即使浏览器不支持css或者css背解除，它还会正确显示。
  • auto值应该用到不明方向的数据中，就像用户输入的数据，它最终会保存到数据中去。
Normative document WHATWG HTML Living Standard
dir (HTML 4: HTML 4.01 Specification
dir)

draggable

HTML5 这个可枚举的属性决定一个element是否能够被拖动，可以使用Drag and Drop API。它的能使用的值如下：

  • true, 表示这个element可以被拖动
  • false, 表示这个值不可以被拖动

如果这个属性没有被设置，默认是auto,这就意味着它的行为默认由浏览器定义。

Usage notes:

  • 这个属性是一个可枚举的属性，但不是一个布尔类型属性。这意味着显式使用true 或flase其中之一是强制性的，像这样的简写<label draggable>Example Label</label>是不允许的。正确用法是<label draggable="true">Example Label</label>。
  • 默认，只有text selections(被选中的文本)，images,和links能被拖动。对于其他的element来说，为了让拖拽机制能够正常工作，ondragstart必须被设置的，正如展示的这个comprehensive example(综合实例)。
Normative document HTML5, section 3.9.5

dropzone

HTML5 未实现 这个可枚举的属性决定丢到一个element上的内容类型，可以使用的Drag and Drop API。它能够使用的值如下：

  • copy, 表示丢放时会创建一个被拖拽element的副本；
  • move, 表示被拖拽的element被移动到这个新位置；
  • link, 将会给拖拽的数据（dragged data）创建一个链接；
Normative document HTML5, section 8.6.8

hidden

HTML5 这个布尔（Boolean）属性表示element还没有或是不再存在，当然这都是相对的。例如，你经常在页面上使用隐藏element,只有在登录处理完成后才可以被使用。浏览器不渲染这样的element。

Usage notes:

  • 这个属性不能使用在能够适时的显示而又被隐藏内容里。比如，它不应该被用来隐藏选项卡面板的选项卡式界面，这个属性不能用于隐藏的而又适时的显示的内容。例如：它不应该用来隐藏选项卡式界面的标签面板。
  • 隐藏的element不应该链接非隐藏element。
  • 隐藏element的子element仍然是有效的，这意味着脚本element仍然会执行，表单element仍然可以被提交。
Normative document HTML5, section 8.1

id

 

这个属性是唯一的标识，它在整个document里应该是唯一的。当需要链接（使用片段标识符，锚点），执行脚本，控制样式时，可以用它来定位识别元素。

 

 

Usage note:

  • 个属性值是一个晦涩的字符串，也就是说web开发者不要用它来传达任何信息，特殊的含义。例如 语义含义，千万不要包含在该字符串中。
  • 这个属性值不要包含空白符（white spaces）。如果ID中包含空白符，浏览器会把它当成是不合格的ID。对照class属性的值可以包含空白符，element通过id属性只能定义ID。注意一个elment可能含有多个ID，但是其他的只能通过其他手段来设置，比如通过脚本调用element的DOM接口。
  • 不可以使用ASCII字符以及数字、“_”、“-”和“.”，因为这些可能引起兼容性问题，因为他们在HTML4中是不允许使用的。尽管这些限制在HTML5中已经被解除了，但是ID应该以一个字符来开头来避免兼容性问题。
Normative document HTML5, section 3.2.3.1 (HTML 4: HTML4.01, section 7.5.2)

itemid

itemprop

itemref

itemscope

itemtype

HTML5 These attributes are related to the HTML5 Microdata feature. 未实现 (查看 bug 591467)

lang

这个属性用于定义element的语言。不管这个element能不能够被编辑，都应该写上这个属性。这个标签包含单个条目值，它的格式规范定义在 Tags for Identifying Languages (BCP47)(BCP47)IETF 文档中。如果标签的内容是空字符串，那么语言就会被设置为unknown；如果标签的内容是无效的，它就被设置为 invalid,见BCP47。

Usage note:

  • 即使是lang属性被设置了，它也可能被忽略，因为xml:lang具有优先权。读 algorithm determining the language 来了解，怎么根据element的内容来决定用什么语言。
  • 对于css伪类（:lang）来说,如果他们名字不一样，两个无效的语言名字也不一样。
Normative document HTML5, section 3.2.3.3(HTML 4: HTML4.01, section 8.1)

spellcheck

HTML5 这个可枚举的属性定义element是否检查拼写错误。它的值可以是以下：

  • true, 表示如果可能的话，element应该被检查拼写错误；
  • false, 表示element不应该检查拼写错误；

如果这个属性没有被设置，他默认的值是element的类型以及浏览器定义的。它也可能是 inherited,这意味着element的元素内容将被检查拼写错误，如果离它最近的祖先元素有spellcheck并且值为true。

你可以参考this article这篇文章看看这个属性的综合用法的实例。

 

Usage notes:

  • 这个属性是可枚举的，不是一个布尔属性。这意味着显式使用true 或 false 其中之一是强制性的。这样简写<label spellcheck>Example Label</label> 是不允许的。这确的写法应该是<label spellcheck="true">Example Label</label>。
  • 对于浏览器来说，这个属性只是一个提示，浏览器并不需要能够去验证拼写错误。通常不可编辑的element是不检查拼写错误的，即使spellcheck的值是true并且浏览器也支持拼写检查。
  • 浏览器及element-dependant设置该属性的默认值是：
Browser <html> <textarea> <input> others Comment
Firefox false false false inherited When layout.spellcheckDefault is 0
false true inherited inherited When layout.spellcheckDefault is 1 (default value)
false true true inherited When layout.spellcheckDefault is 2
Seamonkey false false false inherited When layout.spellcheckDefault is 0
false true inherited inherited When layout.spellcheckDefault is 1 (default value)
false true true inherited When layout.spellcheckDefault is 2
Camino false false false inherited When layout.spellcheckDefault is 0
false true inherited inherited When layout.spellcheckDefault is 1
false true true inherited When layout.spellcheckDefault is 2 (default value)
Normative document HTML5, section 8.8

style

这个属性包含CSS样式声明，被应用到元素上。注意推荐将它定义在其他文件里。这个属性和<style>element主要的目的是快速编写样式，例如用来测试想要的效果。

Usage note: 这个属性不要用来表达语义化的信息。即使所有的样式都移走了，页面也应该语义正确。通常不应该用它来隐藏不着边际的信息，这通常应该使用hidden属性
 

Normative document HTML5, section 3.2.3.7(HTML 4: HTML4.01, section 14.2.2)

tabindex

这个整数类型的属性决定element是否可以获得焦点，如果它参与到排序的键盘导航，就可以定位它。它可能需要几个值：

  • 负数意味这element不可以获得焦点，也不可以通过排序的键盘导航到达；
  • 0意味着element可以通过排序的键盘导航到达，但是相对顺序取决于平台惯例；
  • 一个正数意味着可以通过排序的键盘导航获得焦点并到达。相对顺序去决议该属性的值，按照tabindex的增值排序。如果几个element有相同的tabindex,他们的相对顺序取决于他们在document中的位置。

在排序的键盘导航单上，如果一个元素的tabindex的值是一个0或者无效值或没有该属性，那么它应该被放在值是正数的element后边。

你可以参考这个文章this article来看看一个关于焦点管理的综合实例。

Normative document HTML5, section 8.4.1(HTML 4: HTML4.01, section 17.11.1)

title

这个属性包含的的是文本信息，这信息代表element自己包含的内容的公告。这样的信息一般会包含，但是不是必要的，作为用户一个提示工具。这是几个关于这个属性的用法：

  • Link: 关于被链接文档的一个标题或一段描述；
  • 和图片类似的媒体element:一段描述或相关的可信度；
  • Paragraph: 脚注活评论；
  • Quotation: 关于作者等一些信息。

如果这个属性清除了，这意味着离它最近的祖先元素的title和它相关（能够相应地成为这个元素的提示工具）。如果这个属性是空字符串，这很明显的表示离它最近的父元素的title和它没关系（不能作为这个元素的提示工具）。

<link>, <abbr> 和<input> 的title可以包含额外的语义信息。

Usage note: 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>

defines a two-line title.

Support for multi-line titles was added to Gecko in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).

Normative document HTML5, section 3.2.3.3 (HTML 4: HTML4.01, section 7.4.3

translate

这是一个可枚举的属性，用于确定当页面进行本地化(localized)时，元素的属性值以及元素的文本(Text)子节点中的内容是否要进行翻译。其可取的值如下：

  • 空字符串(empty)或者 "yes"，表示这个元素相关的内容将会被翻译
  • "no"，表示这个元素相关的内容不会被翻译

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
accesskey (Yes) (Yes) (Yes) (Yes) (Yes)
class (Yes) (Yes) (Yes) (Yes) (Yes)
contenteditable (Yes) 3.0 (1.9) (Yes) (Yes) (Yes)
contextmenu 未实现 9 (9) 未实现 未实现 未实现
data-* (Yes) 6 (6) (Yes) (Yes) (Yes)
dir (Yes) (Yes) (Yes) (Yes) (Yes)
draggable (Yes) 2.0 (1.8.1) (Yes) (Yes) (Yes)
dropzone ? 未实现 ? ? ?
hidden (Yes) 4.0 (2) (Yes) (Yes) (Yes)
id (Yes) (Yes) (Yes) (Yes) (Yes)
itemid, itemprop, itemref, itemscope, itemtype ? (Yes) ? ? ?
lang (Yes) (Yes) (Yes) (Yes) (Yes)
spellcheck (Yes) 2.0 (1.8.1) (Yes) (Yes) (Yes)
style (Yes) (Yes) (Yes) (Yes) (Yes)
tabindex (Yes) (Yes) (Yes) (Yes) (Yes)
title (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
accesskey (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
class (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
contenteditable (Yes) (Yes) 1.0 (1.9) (Yes) (Yes) ?
contextmenu 未实现 未实现 未实现 未实现 未实现 未实现
data-* (Yes) (Yes) 6.0 (6) (Yes) (Yes) ?
dir (Yes) (Yes) (Yes) (Yes) (Yes) ?
draggable (Yes) (Yes) 1.0 (1.8.1) (Yes) (Yes) ?
dropzone ? ? 未实现 ? ? ?
hidden (Yes) (Yes) 4.0 (2) (Yes) (Yes) (Yes)
id (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
itemid, itemprop, itemref, itemscope, itemtype ? ? (Yes) ? ? ?
lang (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
spellcheck (Yes) (Yes) 1.0 (1.8.1) (Yes) (Yes) ?
style (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
tabindex (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
title (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

也可以看看

文档标签和贡献者