跳到主要内容

HTML 全局属性（Global Attributes）有哪些？

面试速答（30 秒版 TL;DR）​

  • 全局属性（global attribute）：语法上可以写在任何 HTML 元素上（但有些只在特定元素/场景下才会产生实际效果）。
  • 最常用必背：id、class、style、title、data-*、role、aria-*、tabindex、lang、dir、hidden、contenteditable。
  • 工程实践：事件处理尽量用 addEventListener，少写 onclick="..."；tabindex 尽量只用 0 / -1，避免正整数；移动端键盘体验相关属性（inputmode、enterkeyhint 等）要标注兼容性。

心智模型：全局 ≠ 一定生效​

全局属性的两层含义：

  1. 语法上允许：HTML 规范允许你把它写到任意元素上。
  2. 语义上生效：浏览器只有在相关元素/场景下才会读取并产生行为。

典型例子：

  • autofocus 写在不可聚焦元素上通常不会有任何效果（或需要配合 tabindex 让元素可聚焦）。
  • nonce 基本只在 <script> / <style> 这类需要配合 CSP 的元素上有意义。
  • slot/part/exportparts 只有在 Web Components/Shadow DOM 场景才有意义。

全局属性清单（按功能分组）​

1）标识、样式、通用元信息​

属性常见值作用/要点
id唯一字符串文档内唯一标识；用于 CSS、JS、锚点跳转
class空格分隔类名CSS 选择器、JS 批量选取
styleCSS 声明内联样式；工程上通常更推荐 class + CSS
title文本悬浮提示；也常被辅助技术读取（但不应作为唯一信息来源）

2）自定义数据（给 JS/埋点用）​

属性常见值作用/要点
data-*data-user-id="123"自定义数据属性；JS 可用 el.dataset.userId 读取

3）国际化与文本方向​

属性常见值作用/要点
langzh-Hans、en指定语言；影响分词、朗读、拼写检查等
dirltr/rtl/auto文本方向（从左到右/从右到左/自动）
translateyes/no是否允许翻译工具翻译该元素内容

4）交互与焦点（键盘可达性）​

属性常见值作用/要点
tabindex0、-1、正整数（不推荐）控制 Tab 聚焦与顺序：0 进入自然顺序；-1 可程序聚焦但不进 Tab
accesskey单字符/组合定义快捷键；不同浏览器/OS 触发方式不一致，慎用
autofocus布尔页面加载后尝试自动聚焦；可能受浏览器策略影响
hidden布尔 / until-found隐藏元素（不渲染）；until-found 常用于“查找后显示”等场景
inert布尔使元素及其子树不可交互、不可聚焦；常用于模态对话框背景

5）编辑与输入体验（尤其移动端）​

属性常见值作用/要点
contenteditabletrue/false/plaintext-only使元素可编辑；注意 XSS 与粘贴内容清洗
spellchecktrue/false拼写检查开关
autocapitalizeoff/none/on/sentences/words/characters虚拟键盘自动大写提示（支持度不一致）
autocorrecton/off自动纠错提示（支持度不一致）
enterkeyhintsearch/send/done 等虚拟键盘回车键文案/图标提示
inputmodetext/numeric/decimal/email 等虚拟键盘类型提示（不等于校验）
writingsuggestionstrue/false写作建议开关（实验性，支持度不一致）
virtualkeyboardpolicyauto/manual控制虚拟键盘策略（实验性，支持度不一致）

6）拖拽​

属性常见值作用/要点
draggabletrue/false是否可被 Drag and Drop API 拖拽

7）Web Components / Shadow DOM​

属性常见值作用/要点
slot名称将元素分发到组件的指定 slot
parttoken 列表暴露 shadow 内部可被外部样式化的部件
exportpartsinner:outer 映射将嵌套组件的 part 透传到外层

8）自定义内建元素（Customized built-in elements）​

属性常见值作用/要点
isis="x-btn"让内建元素使用自定义元素定义（支持度与使用场景有限）

9）微数据（Microdata，结构化数据）​

属性常见值作用/要点
itemscope布尔声明一个 item 范围
itemtypeURLitem 类型
itemidURLitem 的全局标识
itemprop名称/token属性名
itemref元素 id 列表关联额外属性来源

10）安全（CSP）​

属性常见值作用/要点
nonce随机字符串CSP nonce；多用于 <script>/<style>

11）Popover API​

属性常见值作用/要点
popoverauto/manual/hint声明元素为 popover；部分值可能是实验性

12）文档结构（标题层级控制）​

属性常见值作用/要点
headingoffset0-8 的非负整数对后代标题层级做偏移（用于大纲层级计算）
headingreset布尔阻止标题层级偏移继续向上“穿透”祖先元素

13）可访问性（ARIA）​

  • role：声明语义角色（例如 button、dialog）。
  • aria-*：ARIA 状态与属性（例如 aria-label、aria-expanded 等）。

14）事件处理属性（Event handler content attributes）​

形如 on* 的属性都属于这一类，例如：

  • 鼠标：onclick、ondblclick、onmousedown、onmouseup、onmousemove...
  • 键盘：onkeydown、onkeyup...
  • 表单：oninput、onchange、onsubmit...

工程上更推荐 addEventListener()，减少内联脚本与 CSP 风险。

15）XHTML 兼容（不推荐但可能见到）​

  • xml:lang、xml:base：来自 XHTML 的遗留属性，出于兼容性仍可见到，但现代 HTML 页面通常不建议使用它们。

最小示例（把“常用全局属性”串起来）​

<div
  id="app"
  class="card"
  title="提示"
  lang="zh-Hans"
  dir="ltr"
  tabindex="0"
  role="button"
  aria-label="关闭"
  data-track-id="close"
  contenteditable="true"
  spellcheck="false"
  hidden
></div>

常见追问​

1）“全局属性”和“所有元素都有意义”是一回事吗？​

不是。全局属性强调“可以写”，是否生效取决于元素类型与浏览器实现。

2）tabindex 为什么不推荐正整数？​

正整数会制造“自定义 Tab 顺序”，可维护性差，也更容易破坏无障碍键盘导航。工程上通常只用 0 / -1。

易错点/坑​

  • 把 inputmode 当成校验：它只影响虚拟键盘提示，不等同于约束输入。
  • 滥用 title：对触屏不友好；可访问性上也不应作为唯一信息来源。
  • 用 onclick="..."：会和 CSP（unsafe-inline）冲突，也更难维护。