HTML 全局属性
全局属性可以写在任意 HTML 元素上,用来做标识、样式、无障碍、编辑和拖放等通用行为。写了不等于一定生效:同一个属性在控件上和在普通 div 上的表现可以不同。
非标准元素也能带全局属性。例如 foo 不是合法 HTML 元素,兼容 HTML5 的浏览器仍会隐藏带 hidden 的 foo 元素;文档因此不再符合 HTML5。
<foo hidden>...</foo>
基本全局属性
lang
帮助定义元素的语言:不可编辑元素当前所用的语言,或可编辑元素期望用户写入的语言。属性值是「语言标记」,由连字符分隔的「语言子标记」组成,例如 zh-CN、en。
title
与所属元素相关的提示文本。浏览器通常把它显示成工具提示,但不强制。
id
定义文档内必须唯一的标识符(ID)。用来做片段链接、脚本选取和 CSS 选择。
class
以空格分隔的类名列表。CSS 类选择器和 document.getElementsByClassName() 都靠它选取元素。
style
写在元素上的 CSS 声明。主样式应放在独立样式表里;style 更适合临时调试。
tabindex
整数属性,决定元素能否获得输入焦点、是否参与顺序键盘导航,以及导航时排在哪。
可取值如下:
- 负值:元素可聚焦,但不进入顺序键盘导航(脚本可以
.focus()) 0:元素可聚焦,并进入顺序键盘导航;同一档里按文档顺序排列(排在正值元素之后)- 正值:元素可聚焦并进入顺序键盘导航;焦点顺序按
tabindex从小到大,值相同则按文档中的先后位置
省略时:原生可聚焦控件(链接、按钮、表单控件等)进入导航,普通元素不进入。正值会打乱自然顺序,实务里优先用 0 和负值。
accesskey
给当前元素提供键盘快捷键的提示。值为空格分隔的字符列表,浏览器应选用当前键盘布局上存在的第一个字符。
autocapitalize
控制用户输入是否自动大写,以及如何大写。常见于虚拟键盘。可取值:
off或none:不自动大写(字母默认小写)on或sentences:每个句子的首字母默认大写,其余默认小写words:每个单词的首字母默认大写,其余默认小写characters:所有字母默认大写
contenteditable
枚举属性,表示元素是否可由用户编辑。若可编辑,浏览器会调整该元素的交互,以允许编辑。未写时继承父元素。
true或空字符串:可编辑false:不可编辑plaintext-only:可编辑纯文本,不允许富文本格式
data-*
一类自定义数据属性,用来在 HTML 和脚本之间交换页面私有数据。
这些属性通过所属元素的 HTMLElement.dataset 访问。data-user-id 对应 dataset.userId(连字符转成驼峰)。
dir
指示元素中文本方向的枚举属性。
可取值如下:
ltr:从左到右,用于从左向右书写的语言(例如英语)rtl:从右到左,用于从右向左书写的语言(例如阿拉伯语)auto:由用户代理决定。解析元素内字符,直到遇到一个具有强方向性的字符,再把该方向应用到整个元素
draggable
枚举属性,指示是否可用 Drag and Drop API 拖动元素。
可取值如下:
true:可以拖动false:不可以拖动
未写时相当于 auto:带 href 的链接和图片默认可拖,其它元素默认不可拖。作为放下目标时,用 dragover、drop 事件处理。
hidden
表示该元素尚未或不再相关。例如可用来隐藏登录完成前不能用的页面区域。浏览器默认不展示这类元素。不得用它隐藏本来就可以合法显示的内容。
现行规范把它做成枚举属性,写成布尔仍有效:
- 空字符串或
hidden:隐藏 until-found:默认不显示,但「在页面中查找」可以把它揭开并滚到匹配处
inputmode
向浏览器提示:编辑此元素或其内容时,虚拟键盘该用哪种配置。主要用于 <input>,在 contenteditable 模式下也可用于任意元素。
常见取值:none、text、decimal、numeric、tel、search、email、url。
is
让标准 HTML 元素按已注册的 customized built-in 自定义元素来表现。
slot
把元素分配到 Shadow DOM 里的插槽:带 slot 属性的元素,会进到 <slot> 上 name 与之相同的那个槽。
itemid
微数据(Microdata)里 item 的唯一全局标识符。
itemprop
用来给 item 添加属性。每个 HTML 元素都可以指定 itemprop,一项由名称和值组成。
itemref
不是 itemscope 元素后代的节点,也可以把属性挂到这个 item 上。itemref 提供的是其它元素的 ID 列表(不是 itemid),指向文档中别处的附加属性。
itemscope
通常与 itemtype 一起用,标明这块 HTML 描述的是某一个 item。itemscope 创建该 item,并划定与之关联的 itemtype 的范围。
itemtype
指定用来定义 itemprop(项属性)的词汇表 URL。
part
元素部件名的空格分隔列表。有了部件名,CSS 才能用 ::part() 伪元素选取并设置 Shadow 树里的特定元素。
与之配套的是 exportparts:把内层 Shadow 树里的 part 导出到外层,供更外层的 ::part() 使用。
spellcheck
枚举属性,定义是否检查元素里的拼写错误。
可取值如下:
true或空字符串:在支持时检查拼写false:不检查拼写
translate
枚举属性,指定页面本地化时,是否翻译该元素的属性值及其文本子节点,或保持原样。
可取值如下:
- 空字符串和
yes:翻译 no:不翻译
autofocus
布尔属性。页面加载完成时,或所属对话框显示时,让该元素获得焦点。同一文档里应只标一个;在 <dialog> 里则相对于该对话框。
enterkeyhint
向虚拟键盘提示回车键应显示的动作标签或图标,例如 enter、done、go、next、previous、search、send。
inert
布尔属性。浏览器忽略该元素上的用户输入(点击、焦点、编辑等),也把它从无障碍树里拿掉。适合做模态背后的衬底。
nonce
一次性加密数(number used once)。内容安全策略(CSP)用它判断是否允许执行对应的脚本或样式。
popover
把元素标成弹出层(Popover API)。默认以不展示处理,直到被带 popovertarget 的按钮调用,或脚本调用 HTMLElement.showPopover()。
其他全局属性
除了上面这些 HTML 全局属性,还有:
role和aria-*:来自 WAI-ARIA,用来改善无障碍。- 事件处理程序属性(属性式写法不推荐,优先用
addEventListener)。同一套名字可以写在任意元素上,但不表示每个元素都会触发对应事件,例如onvolumechange主要由媒体元素触发。
onclick、onchange、ondblclick
oninput、onblur、onfocus、onselect、onsubmit、onreset
oncanplay、oncanplaythrough、onloadeddata、onloadedmetadata、onpause、onplay、onplaying、onprogress、onratechange、onseeking、onvolumechange、ondurationchange、onended、onseeked
ondrag、ondragend、ondragenter、ondragleave、ondragover、ondragstart、ondrop
onkeydown、onkeyup
onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseout、onmouseover、onmouseup、onwheel
onerror、onscroll、onresize、onload、onloadstart
onabort、oncancel、onclose、oncontextmenu、oncuechange、onemptied、oninvalid、onstalled、onsuspend、ontimeupdate、ontoggle、onwaiting
结语
标识、语言、隐藏、编辑、拖放,这些跨元素的需求都走全局属性。事件监听优先用脚本 API。