HTML 全局属性
HTML 全局属性
全局属性是所有HTML元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用。
我们可以在所有的HTML元素上指定全局属性,甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性,即使使用这些元素意味着文档不再是html5兼容的。
例如,虽然<foo>
不是一个有效的HTML元素,但是html5兼容的浏览器隐藏了标记为<foo hidden>...<foo>
的内容。
除了基本的HTML全局属性之外,还存在以下全局属性:
- xml:lang 和 xml:base ——两者都是从XHTML规范继承,但为了兼容性而被保留的。
- 多重aria-*属性,用于改善可访问性。
- HTML 事件属性
New
: HTML5 新属性。
全局属性总览
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
autocapitalize | 它控制用户输入/编辑文本输入时文本输入是否自动大写,以及如何自动大写 |
class | 规定元素的类名(classname) |
contenteditable New |
规定是否可编辑元素的内容。 |
contextmenu New |
指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-* New |
用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggable New |
指定某个元素是否可以拖动 |
dropzone New |
指定是否将数据复制,移动,或链接,或删除 |
exportparts | Used to transitively export shadow parts from a nested shadow tree into a containing light tree. |
hidden New |
hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
inputmode | 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 |
is | 允许您指定标准HTML元素像定义的内置元素一样工作 |
itemid | 是元素的唯一的全局标识符 |
itemprop | 用于向一个物体中添加属性 |
itemref | 不具有 itemscope 属性的元素的后代,才可以与具有 itemref 的元素关联 |
itemscope | 它定义了一个与元数据关联的数据项 |
itemtype | 指定了词汇的 URL,它将会用于定义数据结构中的 itemprop |
lang | 设置元素中内容的语言代码。 |
part | 元素的部件名称的空格分隔列表。Part名称允许CSS通过::part() 伪元素选择和设置阴影关联树中的特定元素。 |
slot | 将一个 shadow DOM shadow 树中的槽分配给一个元素 |
spellcheck New |
检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translate New |
指定是否一个元素的值在页面载入时是否需要翻译 Z |
全局属性的详细描述
accesskey
提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。
详细介绍:https://www.axihe.com/api/html/global/accesskey.html
autocapitalize
控制用户的文本输入是否和如何自动大写,它可以有以下的值:
- off or none,没有应用自动大写(所有字母都默认为小写字母)。
- on or sentences,每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
- words,每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
- characters,所有的字母都应该默认为大写。
详细介绍:https://www.axihe.com/api/html/global/autocapitalize.html
class
一个以空格分隔的元素的类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
详细介绍:https://www.axihe.com/api/html/global/class.html
contenteditable
一个枚举属性(enumerated attribute),表示元素是否可被用户编辑。 如果可以,浏览器会调整元素的部件(widget)以允许编辑。
- true 或者空字符串,表明元素是可被编辑的;
- false,表明元素不能被编辑。
详细介绍:https://www.axihe.com/api/html/global/contenteditable.html
contextmenu
<menu>
的id ,作为该元素的上下文菜单(已经不被支持,将从所有浏览器中删除)。
详细介绍:https://www.axihe.com/api/html/global/contextmenu.html
data-*
一类自定义数据属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。 HTMLElement.dataset 属性可以访问它们。
详细介绍:https://www.axihe.com/api/html/global/data.html
dir
一个指示元素中文本方向的枚举属性。它的取值如下:
- ltr, 指从左到右,用于那种从左向右书写的语言(比如英语);
- rtl, 指从右到左,用于那种从右向左书写的语言(比如阿拉伯语);
- auto, 指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法,直到发现一个具有强方向性的字符,然后将这一方向应用于整个元素。
详细介绍:https://www.axihe.com/api/html/global/dir.html
draggable
一种枚举属性,指示是否可以 使用 Drag and Drop API 拖动元素。它可以有以下的值:
- true, 这表明元素可能被拖动
- false, 这表明元素可能不会被拖动
详细介绍:https://www.axihe.com/api/html/global/draggable.html
dropzone
枚举属性,指示可以使用 Drag and Drop API 在元素上删除哪些类型的内容。 它可以具有以下值:
- copy,表示drop将创建被拖动元素的副本
- move,表示拖动的元素将移动到此新位置。
- link,将创建一个指向拖动数据的链接。
详细介绍:https://www.axihe.com/api/html/global/dropzone.html
exportparts
Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
hidden
布尔属性表示该元素尚未或不再相关。例如,它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容
详细介绍:https://www.axihe.com/api/html/global/hidden.html
id
定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。
详细介绍:https://www.axihe.com/api/html/global/id.html
inputmode
向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 <input>
元素,但在contenteditable模式下可用于任何元素。
详细介绍:https://www.axihe.com/api/html/global/inputmode.html
is
允许您指定标准HTML元素应该像已注册的自定义内置元素一样(有关更多详细信息,请参阅使用自定义元素)。
详细介绍:https://www.axihe.com/api/html/global/is.html
注意: item *属性是 WHATWG HTML Microdata feature的一部分。
itemid
项的唯一全局标识符。
详细介绍:https://www.axihe.com/api/html/global/itemid.html
itemprop
用于向项添加属性。 每个HTML元素都可以指定一个itemprop属性,其中一个itemprop由一个名称和值对组成。
详细介绍:https://www.axihe.com/api/html/global/itemprop.html
itemref
只有不是具有itemscope属性的元素的后代,它的属性才可以与使用itemref项目相关联。它提供了元素ID列表(而不是itemids)以及文档中其他位置的其他属性。
详细介绍:https://www.axihe.com/api/html/global/itemref.html
itemscope
itemscope(通常)与itemtype一起使用,以指定包含在关于特定项目代码块中的HTML。 itemscope创建Item并定义与之关联的itemtype的范围。 itemtype是描述项及其属性上下文的词汇表(例如schema.org)的有效URL。
详细介绍:https://www.axihe.com/api/html/global/itemscope.html
itemtype
指定将用于在数据结构中定义itemprops(项属性)的词汇表的URL。 itemscope用于设置数据结构中按itemtype设置的词汇表的生效范围。
详细介绍:https://www.axihe.com/api/html/global/itemtype.html
lang
帮助定义元素的语言:不可编辑元素所在的语言,或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成),格式在 Tags for Identifying Languages (BCP47) 中定义。xml:lang 优先于它。
详细介绍:https://www.axihe.com/api/html/global/lang.html
part
元素的部件名称的空格分隔列表。Part名称允许CSS通过::part() 伪元素选择和设置阴影关联树中的特定元素。
slot
将shadow DOM阴影关联树中的一个沟槽分配给一个元素:具有slot属性的元素被分配给由<slot>
元素创建的沟槽,其name属性的值与slot属性的值匹配。
详细介绍:https://www.axihe.com/api/html/global/slot.html
spellcheck
枚举属性定义是否可以检查元素是否存在拼写错误。它可能具有以下值:
- true,表示如果可能,应检查元素是否存在拼写错误;
- false, 表示不应检查元素的拼写错误。
详细介绍:https://www.axihe.com/api/html/global/spellcheck.html
style
含要应用于元素的CSS样式声明。 请注意,建议在单独的文件中定义样式。 该属性和<style>
元素主要用于快速样式化,例如用于测试目的。
详细介绍:https://www.axihe.com/api/html/global/style.html
tabindex
整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置。它可能需要几个值:
- 负值表示该元素应该是可聚焦的,但不应通过顺序键盘导航到达;
- 0 表示元素应通过顺序键盘导航可聚焦和可到达,但其相对顺序由平台约定定义;
- 正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是tabindex的增加值。如果多个元素共享相同的tabindex,则它们的相对顺序遵循它们在文档中的相对位置。
详细介绍:https://www.axihe.com/api/html/global/tabindex.html
title
包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。
详细介绍:https://www.axihe.com/api/html/global/title.html
translate
枚举属性,用于指定在页面本地化时是否转换元素的属性值及其Text 节点子节点的值,或者是否保持它们不变。它可以具有以下值:
- 空字符串和"yes",表示元素将被翻译。
- “no”, 表示该元素不会被翻译。
详细介绍:https://www.axihe.com/api/html/global/translate.html