HTML 全局属性

🌙
手机阅读
本文目录结构
axihe

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指定是否将数据复制,移动,或链接,或删除
exportpartsUsed to transitively export shadow parts from a nested shadow tree into a containing light tree.
hidden Newhidden 属性规定对元素进行隐藏。
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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang