HTML 属性参考

HTML 中的元素具有**属性**；这些是配置元素或以各种方式调整其行为以满足用户所需标准的附加值。

属性列表

属性名称 元素 描述
accept <form>, <input> 服务器接受的类型列表，通常是文件类型。
accept-charset <form> 支持的字符集列表。
accesskey 全局属性 激活或将焦点添加到元素的键盘快捷键。
action <form> 处理通过表单提交的信息的程序的 URI。
align <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> 指定元素的水平对齐方式。
allow <iframe> 为 iframe 指定一个功能策略。
alt <area>, <img>, <input> 如果图像无法显示，则显示备用文本。
as <link> 指定链接加载的内容类型。
async <script> 异步执行脚本。
autocapitalize 全局属性 设置用户输入时是否自动大写。
autocomplete <form>, <input>, <select>, <textarea> 指示此表单中的控件是否可以默认情况下由浏览器自动完成其值。
autoplay <audio>, <video> 音频或视频应尽快播放。
background <body>, <table>, <td>, <th> 指定图像文件的 URL。

注意：尽管浏览器和电子邮件客户端可能仍然支持此属性，但它已过时。请使用 CSS background-image 代替。
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

元素的背景颜色。

注意：这是一个遗留属性。请使用 CSS background-color 属性代替。
border <img>, <object>, <table>

边框宽度。

注意：这是一个遗留属性。请使用 CSS border 属性代替。
capture <input> 来自 媒体捕获规范，指定可以捕获新文件。
charset <meta> 声明页面或脚本的字符编码。
checked <input> 指示元素在页面加载时是否应选中。
cite <blockquote>, <del>, <ins>, <q> 包含指向引文或更改来源的 URI。
class 全局属性 通常与 CSS 一起使用，以使用常见属性对元素进行样式化。
color <font>, <hr>

此属性使用命名颜色或以十六进制 #RRGGBB 格式指定的颜色设置文本颜色。

注意：这是一个遗留属性。请使用 CSS color 属性代替。
cols <textarea> 定义 textarea 中的列数。
colspan <td>, <th> colspan 属性定义单元格应跨越的列数。
content <meta> 根据上下文与 http-equiv 或 name 关联的值。
contenteditable 全局属性 指示元素的内容是否可编辑。
controls <audio>, <video> 指示浏览器是否应向用户显示播放控件。
coords <area> 一组指定热点区域坐标的值。
crossorigin <audio>, <img>, <link>, <script>, <video> 元素如何处理跨域请求
csp <iframe> 指定嵌入式文档必须同意对其本身实施的内容安全策略。
data <object> 指定资源的 URL。
data-* 全局属性 允许您将自定义属性附加到 HTML 元素。
datetime <del>, <ins>, <time> 指示与元素关联的日期和时间。
decoding <img> 指示解码图像的首选方法。
default <track> 指示除非用户的偏好指示其他情况，否则应启用轨道。
defer <script> 指示应在页面解析后执行脚本。
dir 全局属性 定义文本方向。允许的值为 ltr（从左到右）或 rtl（从右到左）
dirname <input>, <textarea>
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> 指示用户是否可以与元素交互。
download <a>, <area> 指示超链接用于下载资源。
draggable 全局属性 定义元素是否可以拖动。
enctype <form> method 为 POST 时定义表单数据的类型。
enterkeyhint <textarea>, contenteditable enterkeyhint 指定在虚拟键盘上为回车键呈现的操作标签（或图标）。该属性可与表单控件（如 textarea 元素的值）一起使用，或在编辑主机中的元素中使用（例如，使用 contenteditable 属性）。
for <label>, <output> 描述属于此元素的元素。
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> 指示拥有元素的表单。
formaction <input>, <button> 指示元素的操作，覆盖 <form> 中定义的操作。
formenctype <button>, <input> 如果按钮/输入是 提交按钮（例如 type="submit"），则此属性设置表单提交期间要使用的编码类型。如果指定此属性，它将覆盖按钮的 表单 拥有者的 enctype 属性。
formmethod <button>, <input> 如果按钮/输入是 提交按钮（例如 type="submit"），则此属性设置表单提交期间要使用的提交方法（GET、POST 等）。如果指定此属性，它将覆盖按钮的 表单 拥有者的 method 属性。
formnovalidate <button>, <input> 如果按钮/输入是 提交按钮（例如 type="submit"），则此布尔属性指定在提交表单时不验证表单。如果指定此属性，它将覆盖按钮的 表单 拥有者的 novalidate 属性。
formtarget <button>, <input> 如果按钮/输入是 提交按钮（例如 type="submit"），则此属性指定在其中显示提交表单后收到的响应的浏览上下文（例如，选项卡、窗口或内联框架）。如果指定此属性，它将覆盖按钮的 表单 拥有者的 target 属性。
headers <td>, <th> <th> 元素的 ID，适用于此元素。
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

指定此处列出元素的高度。对于所有其他元素，请使用 CSS height 属性。

注意：在某些情况下，例如 <div>，这是一个遗留属性，在这种情况下应使用 CSS height 属性代替。
hidden 全局属性 防止呈现给定元素，同时保持子元素（例如脚本元素）处于活动状态。
high <meter> 指示上范围的上限。
href <a>, <area>, <base>, <link> 链接资源的 URL。
hreflang <a>, <link> 指定链接资源的语言。
http-equiv <meta> 定义一个语义指令。
id 全局属性 通常与 CSS 一起使用，以对特定元素进行样式化。此属性的值必须是唯一的。
integrity <link>, <script>

指定 子资源完整性 值，该值允许浏览器验证它们获取的内容。
intrinsicsize <img> 此属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小。
inputmode <textarea>, contenteditable 提供有关用户编辑元素或其内容时可能输入的数据类型的提示。该属性可与表单控件（例如textarea元素的值）一起使用，或在编辑主机中的元素中使用（例如，使用contenteditable属性）。
ismap <img> 指示图像属于服务器端图像地图的一部分。
itemprop 全局属性
kind <track> 指定文本轨道的类型。
label <optgroup>，<option>，<track> 指定元素的用户可读标题。
lang 全局属性 定义元素中使用的语言。
language <script> 定义元素中使用的脚本语言。
loading <img>，<iframe> 指示元素是否应延迟加载 (loading="lazy") 或立即加载 (loading="eager")。
list <input> 标识一个预定义选项列表，以建议给用户。
loop <audio>，<marquee>，<video> 指示媒体在播放结束后是否应从头开始播放。
low <meter> 指示下限范围的上限。
max <input>，<meter>，<progress> 指示允许的最大值。
maxlength <input>, <textarea> 定义元素中允许的最大字符数。
minlength <input>, <textarea> 定义元素中允许的最小字符数。
media <a>，<area>，<link>，<source>，<style> 指定链接资源设计的媒体的提示。
method <form> 定义在提交表单时要使用的HTTP方法。可以是GET（默认）或POST。
min <input>，<meter> 指示允许的最小值。
multiple <input>，<select> 指示是否可以在email或file类型的输入中输入多个值。
muted <audio>, <video> 指示音频在页面加载时是否会最初静音。
name <button>，<form>，<fieldset>，<iframe>，<input>，<object>，<output>，<select>，<textarea>，<map>，<meta>，<param> 元素的名称。例如，服务器使用它来识别表单提交中的字段。
novalidate <form> 此属性指示在提交表单时不应验证表单。
open <details>，<dialog> 指示内容当前是否可见（对于<details>元素）或对话框是否处于活动状态并且可以交互（对于<dialog>元素）。
optimum <meter> 指示最佳数值。
pattern <input> 定义一个正则表达式，元素的值将针对该表达式进行验证。
ping <a>, <area> ping属性指定一个以空格分隔的 URL 列表，如果用户点击了超链接，则会通知这些 URL。
placeholder <input>, <textarea> 向用户提供有关可以在字段中输入内容的提示。
playsinline <video> 一个布尔属性，指示视频将“内联”播放；也就是说，在元素的播放区域内。请注意，没有此属性并不意味着视频始终将在全屏模式下播放。
poster <video> 一个 URL，指示一个海报帧，在用户播放或寻求之前显示该帧。
preload <audio>, <video> 指示应预加载整个资源、部分资源还是不预加载资源。
readonly <input>, <textarea> 指示元素是否可以编辑。
referrerpolicy <a>，<area>，<iframe>，<img>，<link>，<script> 指定在获取资源时发送哪个推荐者。
rel <a>，<area>，<link> 指定目标对象与链接对象之间的关系。
required <input>，<select>，<textarea> 指示此元素是否需要填写。
reversed <ol> 指示列表是否应按降序而不是升序显示。
role 全局属性 为辅助技术定义元素的显式角色。
rows <textarea> 定义文本区域中的行数。
rowspan <td>, <th> 定义表格单元格应跨越的行数。
sandbox <iframe> 阻止在 iframe 中加载的文档使用某些功能（例如提交表单或打开新窗口）。
scope <th> 定义标题测试（在th元素中定义）相关的单元格。
scoped <style>
selected <option> 定义页面加载时将选择的 value。
shape <a>, <area>
size <input>，<select> 定义元素的宽度（以像素为单位）。如果元素的type属性是text或password，那么它是字符数。
sizes <link>，<img>，<source>
slot 全局属性 将影子 DOM 影子树中的一个槽分配给一个元素。
span <col>，<colgroup>
spellcheck 全局属性 指示是否允许对元素进行拼写检查。
src <audio>，<embed>，<iframe>，<img>，<input>，<script>，<source>，<track>，<video> 可嵌入内容的 URL。
srcdoc <iframe>
srclang <track>
srcset <img>，<source> 一个或多个响应式图像候选者。
start <ol> 定义第一个数字（如果不同于 1）。
step <input>
style 全局属性 定义将覆盖先前设置的样式的 CSS 样式。
summary <table>
tabindex 全局属性 覆盖浏览器的默认选项卡顺序，并改为遵循指定的顺序。
target <a>，<area>，<base>，<form> 指定在何处打开链接文档（对于<a>元素）或在何处显示接收到的响应（对于<form>元素）。
title 全局属性 将鼠标悬停在元素上时在工具提示中显示的文本。
translate 全局属性 指定元素的属性值和其Text节点子节点的值在页面本地化时是否应被翻译，或者是否应保持不变。
type <button>，<input>，<embed>，<object>，<ol>，<script>，<source>，<style>，<menu>，<link> 定义元素的类型。
usemap <img>，<input>，<object>
value <button>，<data>，<input>，<li>，<meter>，<option>，<progress>，<param> 定义页面加载时将在元素中显示的默认值。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

对于此处列出的元素，这将确定元素的宽度。

注意：对于所有其他情况，例如<div>，这是一个遗留属性，在这种情况下，应使用 CSS width属性。
wrap <textarea> 指示文本是否应换行。

内容与 IDL 属性

在 HTML 中，大多数属性有两个方面：内容属性和IDL（接口定义语言）属性。

内容属性是您从内容（HTML 代码）中设置的属性，您可以通过 element.setAttribute() 或 element.getAttribute() 设置或获取它。内容属性始终是字符串，即使预期值为整数也是如此。例如，要使用内容属性将 <input> 元素的maxlength设置为 42，您必须在该元素上调用setAttribute("maxlength", "42")。

IDL 属性也称为 JavaScript 属性。这些是您可以使用 JavaScript 属性（如element.foo）读取或设置的属性。IDL 属性始终使用（但可能会转换）底层内容属性以在您获取它时返回一个值，并在您设置它时在内容属性中保存一些内容。换句话说，IDL 属性本质上反映了内容属性。

大多数情况下，IDL 属性会以其实际使用的方式返回其值。例如，<input> 元素的默认 type 为“text”，因此如果您设置 input.type="foobar"，<input> 元素将是 text 类型（在外观和行为方面），但“type”内容属性的值将为“foobar”。但是，type IDL 属性将返回字符串“text”。

IDL 属性并不总是字符串；例如，input.maxlength 是一个数字（一个有符号的 long）。使用 IDL 属性时，您读取或设置所需类型的 value，因此 input.maxlength 将始终返回一个数字，当您设置 input.maxlength 时，它需要一个数字。如果您传递其他类型，它将根据标准 JavaScript 类型转换规则自动转换为数字。

IDL 属性可以 反映其他类型，例如无符号 long、URL、布尔值等。不幸的是，没有明确的规则，IDL 属性与其对应的内容属性的行为方式取决于属性本身。大多数情况下，它将遵循 规范中规定的规则，但有时它不会。HTML 规范试图使它尽可能地对开发人员友好，但由于各种原因（主要是历史原因），一些属性的行为很奇怪（例如 select.size），您应该阅读规范以了解它们的行为方式。

布尔属性

某些内容属性（例如 required、readonly、disabled）被称为 布尔属性。如果布尔属性存在，其值为 true，如果不存在，其值为 false。

HTML 对布尔属性的允许值进行了限制：如果属性存在，其值必须是空字符串（等效地，属性可能具有未分配的值），或者是一个与属性的规范名称进行 ASCII 不区分大小写匹配的值，没有前导或尾随空格。以下示例是标记布尔属性的有效方法

html
<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

为了清楚起见，true 和 false 值不允许在布尔属性中使用。要表示 false 值，必须完全省略该属性。此限制消除了一些常见的误解：例如，对于 checked="false"，元素的 checked 属性将被解释为 true，因为该属性存在。

事件处理程序属性

警告： 不建议使用事件处理程序内容属性。HTML 和 JavaScript 的混合通常会产生难以维护的代码，并且事件处理程序属性的执行也可能会被内容安全策略阻止。

除了上表中列出的属性之外，全局 事件处理程序（例如 onclick）也可以作为 内容属性 指定给所有元素。

所有事件处理程序属性都接受一个字符串。该字符串将用于合成一个 JavaScript 函数，例如 function name(/*args*/) {body}，其中 name 是属性的名称，而 body 是属性的值。处理程序接收与其 JavaScript 事件处理程序对应项相同的参数——大多数处理程序仅接收一个 event 参数，而 onerror 接收五个：event、source、lineno、colno、error。这意味着您通常可以在属性中使用 event 变量。

html
<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

另请参阅