💡HTML 属性一览表

内容属性和 IDL 属性（两面）、全局属性和非全局属性

HTML 元素的属性有的用来配置该元素，有的是让元素能灵活调整其行为以满足用户的需求。

大部分属性都有两个方面，即内容属性和 IDL 属性。

• 内容属性，content attribute

• IDL 属性，Interface Definition Language attribute，接口定义语言属性

一. 属性的两个方面

1. 内容属性

内容属性就是从内容（HTML 代码）里设置的属性。

我们可以通过 element.setAttribute() 和 element.getAttribute() 来设置和获取内容属性。内容属性的类型始终是字符串，即使它的预期值是个整数，比如：

• <input maxlength="34">

• setAttribute("maxlength", "34")

2. IDL 属性

IDL 属性也称 JavaScript 属性（JavaScript property），它可以通过 element.foo 来读取和设置，本质上反映的也是内容属性。

大多数情况下，IDL 属性都会返回元素真正使用的值。比如 <input type="foo"> 虽然我们指定了内容属性 type="foo"，但因为它是无效的，所以 <input> 元素会按照默认值显示为 type="text"（在外观和行为上）。此时读取内容属性依然是 foo，而读取 IDL 属性是当前实际使用的 text，如下：

IDL 属性的类型不总是字符串。当我们使用 IDL 属性的时候，读取和设置的值类型都是元素属性所需要的类型。 比如 <input type="text" maxlength="150">，input.maxLength 总是返回一个数字， 当我们给它设置值的时候也应该是个数字，如果传的是非数值类型那么 JavaScript 会自动进行类型转换。

IDL 属性可以反映（reflect）其它类型，比如无符号长整数、URL、布尔值等。但不幸的是，并没有明确的规则和方式列出 IDL 属性和内容属性的行为对应关系，具体的行为表现还是取决于相关的属性。不过除去有历史包袱的个别属性（比如 select.size）之外，大多数属性的行为还是符合标准的，详见 Reflecting content attributes in IDL attributes。

当 IDL 属性是 URL 类型时，比如 href。内容属性会返回 HTML 里写的值，而 IDL 属性会返回完整的 URL，如下：

当 IDL 属性是布尔类型时，比如 checked。如果元素上存在该属性那么值就是 true，如果不存在则值就是 false。布尔属性要表示 false 只能是完全省略该属性，一旦存在该属性那么值就是 true，哪怕它没值或值为空字符串或值为'false'字符串。如下：

当 IDL 属性是枚举类型时，比如 <input> 元素的 type 属性。一般会给出两种默认状态，缺失值默认值和无效值默认值，如下：

3. 小结

至此，我们介绍了以下内容：

1. 内容属性

   • 始终是字符串类型

   • 读取和设置 element.setAttribute() 和 element.getAttribute()

2. IDL 属性，也称 JavaScript property

   • 类型可以是字符串、数值、URL、布尔等

   • 读取和设置 element.foo

   • IDL 属性都会返回元素真正使用的值，比如：

     • 数值类型、URL 类型

     • 布尔属性、枚举属性

接下来，让我们看看 HTML 里都有哪些属性。

二. 全局属性（28个）

全局属性是所有 HTML 元素的共有属性，即便它们可能对某些元素没有影响。

我们可以在所有的 HTML 元素（即便是非标准的 HTML 元素）上指定全局属性，因为现代浏览器会自动处理那些全局属性，比如带有 hidden 属性的元素会被隐藏。

1. 最常用（8个）

属性名	说明
id, class, style title, tabindex data-*
lang
dir	枚举属性

2. 交互相关（7个）

属性名	说明
hidden, autofocus	布尔属性
draggable, contenteditable	枚举属性
spellcheck, translate, autocapitalize	枚举属性

3. 键盘相关（3个）

属性名	说明
accesskey	快捷键
inputmode, enterkeyhint	虚拟键盘，枚举属性

4. Web Components（4个）

属性名	说明
is, slot
part, exportparts	Shadow DOM 相关

5. 内容安全（1个）

属性名	说明
nonce

6. 微数据（5个）

属性名	说明
itemid, itemprop itemref itemscope, itemtype

// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
$0.querySelectorAll("dt").forEach(item => console.log(item.innerText));

contextmenu 已废弃

7. 三类

除了以上基本的全局属性之外，还有 3 类全局属性：

1. aria-* 系列属性：可访问性相关。此部分比较独立，后面会单独讨论，这里暂不展开了。

2. on* 系列属性：事件处理器相关，比如 onclick。此部分也暂不展开了，原因同上。

3. xml:lang 和 xml:base：已弃用，继承自 XHTML，为了向前兼容而保留着。

三. 与特定元素关联的属性（95个）

1. 元数据（10个）

属性名	关联元素
charset http-equiv content	<meta>
async defer	<script>
rel	<link> <a>, <area>
media	<link>, <style> <a>, <area> <source>
crossorigin	<script>, <link> <img>, <audio>, <video>
referrerpolicy	<script>, <link> <img>, <area> <iframe> <a>
integrity	<script>, <link>

2. 状态相关（5个）

属性名	关联元素
disabled	<input>, <textarea>, <select> <optgroup>, <option> <button> <fieldset>
required	<input>, <textarea>, <select>
readonly	<input>, <textarea>
checked	<input>
selected	<option>

3. 最常用（7个）

属性名	关联元素	元素说明
name	<meta>	元数据
	<form> <input>, <textarea>, <select> <button> <output>, <fieldset>	表单控件
	<iframe>, <object>, <param>	内嵌内容
	<map>	多媒体资源
form	<input>, <textarea>, <select>, <button> <label>, <fieldset>, <output> <progress>, <meter>	表单控件
	<object>	内嵌内容
src	<script>	脚本
	<img> <audio>, <video> <source>, <track>	多媒体
	<iframe>, <embed>	内嵌内容
	<input>
type	<script> <link>, <style>	元数据
	<input>, <button>	表单控件
	<source>	多媒体
	<embed>, <object>	内嵌内容
	<menu>	交互
value	<input>, <button>, <option> <progress>, <meter>	表单控件
	<param>	内嵌
	<li>, <data>
width height	<img>, <video>	多媒体
	<canvas>	脚本画布
	<iframe> <embed>, <object>	内嵌内容
	<input>

4. 链接相关（5个）

属性名	关联元素
href	<a>, <area> <link>, <base>
hreflang	<a>, <area> <link>
target	<a>, <area> <base> <form>
ping download	<a>, <area>

5. 多媒体（18个）

属性名	关联元素	元素说明
alt	<img>, <area> <input>
decoding ismap	<img>	图片
usemap	<img> <object> <input>
coords shape	<area>	图片
srcset	<img>, <source>	图片
sizes	<img>, <source> <link>
controls loop muted autoplay preload buffered	<audio>, <video>	音频+视频
poster	<video>	视频
kind srclang default	<track>	字幕

6. 表单（32个）

属性名	关联元素	元素说明
action method enctype accept-charset novalidate	<form>
autocomplete	<form> <input>, <select>, <textarea>
accept	<input>	文件类型
placeholder maxlength minlength dirname	<input>, <textarea>
size multiple	<input>, <select>
rows cols wrap	<textarea>
max	<input>, <meter>, <progress>
min	<input>, <meter>
low high optimum	<meter>
step capture list pattern	<input>
for	<label>, <output>
label	<optgroup>, <option>, <track>
formaction formenctype formmethod formnovalidate formtarget	<input>, <button>

7. 表格（5个）

属性名	关联元素
span	<colgroup>, <col>
scope	<th>
rowspan colspan headers	<th>, <td>

8. iframe（3个）

属性名	关联元素	元素说明
sandbox srcdoc allow	<iframe>	内嵌网页

9. 其它（6个）

属性名	关联元素	元素说明
cite	<blockquote>, <q>	文本引用
	<del>, <ins>	文本编辑
datetime	<del>, <ins>
	<time>
reversed start	<ol>
open	<details>, <dialog>	交互
data	<object>	内嵌内容

10. 实验中（4个）

属性名	关联元素
importance	<script>, <link>
	<img>, <iframe>
loading	<img>, <iframe>
csp	<iframe>
enterkeyhint	<textarea> contenteditable

11. 已废弃

分类	属性名	关联元素
已过时 建议用 CSS	align	<table> <caption> <colgroup>, <col> <thead>, <tbody>, <tfoot> <tr>, <th>, <td>
	bgcolor	<body> <table>, <tbody>, <tfoot> <colgroup>, <col> <tr>, <th>, <td>
		<img>
		<iframe>
		<hr>
	background	<body>, <table>, <th>, <td>
	border	<table>, <img>, <object>
	color	<hr>
已废弃	manifest	<html>
	language	<script>
	scoped	<style>
	summary	<table>
	intrinsicsize	<img>

说明：以上表格均未列出“已废弃” HTML 元素及其属性。

// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
document.querySelectorAll("tbody td:first-child").forEach(td => console.log(td.innerText));