全局属性

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的自定义属性可以通过THMLElment.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属性directionunicode-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

 

文档标签和贡献者

向此页面作出贡献: zhangking, TimZhao, ziyunfei, bugknightyyp
最后编辑者: zhangking,