# 元素的属性与事件

在现实世界中我们通常使用名字、年龄、性别、外貌等内容来描述一个人,同样的在HTML中也有描述元素的内容(例如元素的名称、样式等),我们统称其为属性(例如下方指定元素名称的name属性,指定元素样式的style属性)。

🧑‍💻 动手试一试 🔺
html
预览

# 属性的组成

一个属性必须包含如下三个部分内容:属性名称等号以及属性值(由一对单/双引号引起来)

注意

在属性和元素名称之间(如果已经有一个或多个属性,就与前一个属性之间)有一个空格

# 全局属性

全局属性是所有 HTML 元素共有的属性,它们可以用于所有元素,即使属性可能对某些元素不起作用。我们可以在所有的 HTML 元素上指定全局属性,甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性,即使使用这些元素意味着文档不再是 html5 兼容的。

属性名 作用 属性值
accesskey 提供了为当前元素生成键盘快捷键的提示 可打印的字符
autocapitalize 控制用户的文本输入是否和如何自动大写 枚举类型:
off or none所有字母都默认为小写字母
on or sentences: 每个句子的第一个字母默认为大写字母,其他字母都默认为小写字母
words: 每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母
characters: 所有的字母都默认为大写
class 一个以空格分隔的元素的类名(classes)列表,它允许 CSS 和 Javascript 通过类选择器 或 DOM 方法来选择和访问特定的元素。 字符串
contenteditable 表示元素是否可被用户编辑。如果可以,浏览器会修改元素的组件以允许编辑。 枚举类型:true、false
data-* 被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。 字符串
dir 指示元素中文本方向 枚举类型:
ltr,指从左到右
rtl,指从右到左
auto,指由用户代理决定方向。
draggable 元素是否允许使用拖放操作API拖动 枚举类型:true、false
hidden 表示元素是否被隐藏 布尔类型:true、false
id 定义了一个全文档唯一的标识符 (ID)。它用于在链接(使用片段)、脚本和样式(通过CSS)中辨识元素。 字符串
is 允许您指定标准 HTML 元素像定义的内置元素一样工作 字符串
lang 表示元素的语言 BCP47语言定义
part 包含一个以元素中 part 属性名称组成的列表,该列表以空格分隔。通过 Part 的名称,可以使用 CSS 伪元素“::part”来选择 shadow 树中指定元素并设置其样式。 字符串
slot 将一个 shadow 树中的槽分配给一个元素:带有 slot 属性的元素分配给由slot创建的槽,它的 name 属性的值匹配 slot 属性的值。 字符串
style 包含应用到元素的 CSS 样式声明。 字符串
tabindex 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)。 整数
title 表示咨询信息文本,和它属于的元素相关。这个信息通常存在,但绝不必要,作为提示信息展示给用户。 字符串
translate 用来规定对应元素的属性值及其子文本节点内容,是否跟随系统语言作出对应的翻译变化。 枚举类型:yes、no
itemid 代表元素的唯一的全局标识符,用于Microdata技术 字符串
itemprop 被用于向一个物体中添加属性,用于Microdata技术 字符串
itemref 提供了元素 id(并不是 itemid)的列表,并具有文档其它地方的额外属性,用于Microdata技术 字符串
itemscope 它定义了一个与元数据关联的数据项,用于Microdata技术 布尔
itemtype 指定了词汇的 URL,它将会用于定义数据结构中的 itemprop(条目属性),用于Microdata技术 url
本节参考