HTML 属性

属性介绍

元素也可以拥有属性，属性看起来像这样：

属性必须包含：

• 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
• 属性名称，后面跟着一个等于号。
• 一个属性值，由一对引号（””）引起来。
• 有些特殊的属性，没有属性名，只有属性值，例如：disabled。

全局属性集合

accesskey

accesskey 全局属性 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。

autocapitalize

The autocapitalize 全局属性 是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：

• off or none: 没有应用自动大写（所有字母都默认为小写字母）。
• on or sentences: 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
• words: 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
• characters: 所有的字母都默认为大写。

class

全局属性 class 的值是一个以空格分隔的元素的类名（classes）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 ( document.getElementsByClassName) 来选择和访问特定的元素。

contenteditable

全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

• true 或空字符串，表示元素是可编辑的。
• false 表示元素不是可编辑的。
• plaintext-only 表示元素的原始文本是可编辑的，但富文本格式会被禁用。

data-*

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

dir

全局属性dir是一个指示元素中文本方向的枚举属性。它的取值如下：

• ltr，指从左到右，用于那种从左向右书写的语言（比如英语）；
• rtl，指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
• auto，指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。

备注：
这个属性对有不同语义的<bdo>元素是必须的。
这个属性在<bdi>元素中***不可***继承。未赋值时，它的默认值是 auto。
这个属性可以被 CSS 属性direction和unicode-bidi覆盖，如果 CSS 网页有效且该元素支持这些属性的话。
由于文本的方向是和内容的语义而不是和表现相关，因此有可能的话，网页开发者使用这一属性而非 CSS 属性是被推荐的。这样，即使在不支持 CSS 或禁用 CSS 的浏览器中，文本也会正常显示。
auto 应当用于方向未知的数据，如用户输入的数据，最终保存在数据库中的数据。

draggable

全局属性 draggable 是一种枚举(en-US)属性，用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。

• draggable 可以有如下取值：

• • true：表示元素可以被拖动
  • false：表示元素不可以被拖动
  • 如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为

警告： 这个属性是枚举类型(en-US)，而不是布尔类型。这意味着必须显式指定值为 true 或者 false，像 <img draggable> 这样的简写是不允许的。正确的用法是 <img draggable="false">。

如果没有设置该属性，其默认值为 auto，这意味着拖动行为是浏览器的默认行为：只有选择的文本、图像和链接可以被拖动。对于其他元素，必须设置事件 ondragstart 以使拖放行为生效，如本综合实例所示。

hidden

全局属性 hidden 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

id

id 全局属性定义了一个全文档唯一的标识符（ID）。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。

inputmode

inputmode 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。

is

is 全局属性允许你指定标准 HTML 元素像定义的内置元素一样工作。

itemid

itemid 全局属性 是元素的唯一的全局标识符。itemid 属性只能为同时拥有 itemscope 和 itemtype 的元素指定。同时，itemid 只能为拥有 itemscope 的元素指定，它的相应 itemtype 引用或定义了支持全局标识符的词汇。

itemprop

全局属性 itemprop被用于向一个物体中添加属性。每一个 HTML 元素都可以指定一个 itemprop 属性，一个itemprop属性由 name-value 对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个 string 或者一个 URL，并且可以和大部分元素进行组合，包括<audio>， <embed>， <iframe>，<img>，<link>， <object>， <source>(en-US) ， <track>，和 <video>。

itemref

itemref 全局属性 不具有 itemscope 属性的元素的后代，才可以与具有 itemref 的元素关联。itemref 提供了元素 id（并不是 itemid）的列表，并具有文档其他地方的额外属性。

• itemref 属性只能在指定了 itemscope 的元素上指定。

itemscope

itemscope 是一个布尔值的 全局属性 。它定义了一个与元数据关联的数据项。就是说一个元素的 itemscope 属性会创建一个项，包含了一组与元素相关的键值对。

itemtype

itemtype 全局属性 指定了词汇的 URL，它将会用于定义数据结构中的 itemprop（条目属性）。itemscope 用于设置词汇的生效范围，其中词汇在数据结构中由 itemtype 设置。

lang

lang 全局属性 参与了元素语言的定义。这个语言是不可编辑元素写入的语言，或者可编辑元素应该写入的语言。

part

part 全局属性 包含一个以元素中 part 属性名称组成的列表，该列表以空格分隔。通过 Part 的名称，可以使用 CSS 伪元素“::part”来选择 shadow 树中指定元素并设置其样式。

popover

全局属性 popover 用来指定一个元素为弹出式元素。

slot

slot 全局属性 将一个（shadow DOM ）shadow 树中的槽分配给一个元素：带有 slot 属性的元素分配给由 <slot> 创建的槽，它的 name 属性的值匹配 slot 属性的值。

spellcheck

spellcheck 全局属性是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值：

• true, 设置在可能的情况下会去检查元素内容的拼写错误;
• false, 设置在可能的情况下关闭对元素内容拼写检查。

style

style 全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 <style> 元素的主要目的是快速装饰。例如用于测试目的。

tabindex

tabindex 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航。

title

全局属性 title 包含代表与它所属的元素有关的咨询信息的文本。

• title 属性的主要用途是为辅助技术标注 <iframe> 元素。
• title 属性也可以用来标注数据表格中的控件。

translate

全局属性 translate 是一种枚举(en-US)属性，用来规定对应元素的可翻译属性值及其 Text(en-US) 子节点内容是否跟随系统语言作出对应的翻译变化。

• 空字符串或 yes，意味着网页在进行本地化的时候，对应内容要被翻译。
• no，意味着对应的内容无需做任何翻译。

HTML属性集合

accept

accept 属性的值是一个以逗号分隔的列表，其中包含一个或多个文件类型，或唯一的文件类型指定符，用于描述允许使用的文件类型。

<label for="movie">Choose a movie to upload:</label>
<input type="file" name="movie" accept="video/*" />

<label for="poster">Choose a poster:</label>
<input type="file" name="poster" accept="image/png, image/jpeg"  multiple />

• 字符串 audio/* 意为 “任何音频文件”。
• 字符串 video/* 意为 “任何视频文件”。
• 字符串 image/* 意为 “任何图像文件”。
• 包含multiple属性可以同时选择多个文件。

autocomplete

HTML autocomplete 属性允许 web 开发人员指定用户代理是否有权限在填写表单字段值时提供自动帮助，并指导浏览器填写该字段的预期信息类型。

可用于以文本或数字作为输入的 <input> 元素、<textarea> 元素、<select> 元素和 <form>元素。

capture

捕获属性指定（可选）捕获一个新文件，并指定使用哪个设备捕获由 accept 属性定义类型的新媒体(摄像头或麦克风)。

crossorigin

crossorigin 属性在 <audio>、<img>、<link>、<script> 和<video> 元素中有效，它们提供对 CORS 的支持，定义该元素如何处理跨源请求，从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同，该属性可以是一个 CORS 设置属性。

• 网页经常请求加载其他服务器的资源。这就是 CORS 的用武之地。
• 跨域请求是对来自另一个域的资源（例如样式表、iframe、图像、字体或脚本）的请求

dirname

dirname 属性可用于 <textarea> 和 <input> 元素，用于描述表单提交时元素文本内容的方向性。浏览器使用该属性的值来确定用户输入的文本是从左到右还是从右到左。使用时，元素的文本方向性值将与作为字段名称的 dirname 属性值一起包含在表单提交数据中。

disabled

当布尔属性 disabled 存在时，元素将不可变、不能聚焦或与表单一同提交。用户将不能在表单控件本身或其子控件进行编辑或聚焦操作。

• 这些元素支持 disabled 属性：<button>、<command>、<fieldset>、<optgroup>、<option>、<select>、<textarea> 和 <input>。

elementtiming

elementtiming 属性用于表示某个元素被标记为由使用 “元素 “类型的 PerformanceObserver 对象跟踪。浏览器就会记住这些元素的加载时长，渲染时长等各种信息。配合PerformanceObserver API，我们就可以获得这些信息了。

• 该属性可应用于 <img>、<svg> 中的 <image> 元素、<video> 元素的海报图像、具有背景图像的元素以及包含文本节点（如 <p>）的元素。

for

for 属性是 <label> 和 <output> 允许使用的属性。在<label> 元素上使用时，它表示该标签所描述的表单元素。当用于 <output> 元素时，它允许在表示输出中使用的值的元素之间建立明确的关系。

max

max 属性定义了包含该属性的输入可接受且有效的最大值。如果元素的值大于此值，则验证失败。该值必须大于或等于 min 属性的值。如果 max 属性存在但未指定或无效，则不会应用最大值。如果 max 属性有效，且非空值大于 max 属性允许的最大值，则约束验证将阻止表单提交。

• max 属性适用于数字输入类型，包括日期、月、周、时间、本地日期时间、数字和范围类型，以及 <progress> 和 <meter> 元素。

maxlength

maxlength 属性定义了用户可输入 <input> 或 <textarea> 的最大字符串长度。该属性的整数值必须为 0 或更高。

min

min 属性定义了包含该属性的输入可接受且有效的最小值。如果元素的值小于该值，则验证失败。该值必须小于或等于 max 属性的值。

minlength

minlength 属性定义了用户可输入 <input> 或 <textarea> 的最小字符串长度。该属性的整数值必须为 0 或更高。

multiple

如果设置了布尔多重属性，则表示表单控件接受一个或多个值。该属性对电子邮件和文件输入类型以及 <select> 有效，用户选择多个值的方式取决于表单控件。

pattern

pattern 属性规定了一个表单控件的值应该匹配的正则表达式。如果一个非 null 值不满足 pattern 值设置的约束，ValidityState 对象的只读属性 patternMismatch(en-US) 将为 true。

placeholder

占位符属性定义了表单控件无值时显示的文本。占位符文本应向用户简要提示应输入到控件中的预期数据类型。

readonly

存在布尔只读属性时，元素不可更改，这意味着用户不能编辑控件。

rel

rel 属性定义了所链接的资源与当前文档的关系，在 <a>、<area> 和 <link> 元素上有效。支持的值取决于拥有该属性的元素。

required

如果存在布尔型 required 属性，则表示用户必须为输入指定一个值，才能提交所拥有的表单。

size

size 属性定义了 <input> 的宽度和 <select>元素的高度。对于输入，如果 type 属性是文本或密码，那么它就是字符数。该值必须是 0 或更高的整数。如果没有指定大小，或指定的值无效，则不会声明输入的大小，表单控件将采用用户代理默认的宽度。如果 CSS 目标元素的属性会影响宽度，则 CSS 优先。

step

step属性是一个数字，用于指定数值必须遵守的粒度或关键字 any。它适用于数字输入类型，包括日期、月、周、时间、本地日期时间、数字和范围类型。