Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

HTML 定义了少量的属性，这些属性适用于所有的HTML elements，这些属性可以用在所有的element中，尽管有些属性对一些element没什么作用。

使用说明：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

 

文档标签和贡献者

 此页面的贡献者： vicvinc, Shaoqiang.Zhang, zhangking, TimZhao, ziyunfei, bugknightyyp
 最后编辑者: vicvinc,