真正跨元素、跨浏览器、跨场景稳定可用的全局属性仅有：id、class、data-*、title、lang、dir、style、tabindex（需显式写为tabindex="0"）。
哪些全局属性真能无脑用在任何标签上
真正跨元素、跨浏览器、跨场景稳定可用的，就这几个：id、class、data-*、title、lang、dir、style、tabindex（注意必须显式写tabindex="0"才可聚焦）。其他看似通用的属性，实际都有隐性限制。
比如contenteditable加了也不可编辑？大概率缺tabindex="0"，或者子元素有user-select: none；draggable默认是auto，不是true；<p></p>默认不可拖，得写draggable="true"；hidden在<meta>或<script></script>上无效，浏览器直接忽略，不报错也不渲染。
data-* 属性读写时最常踩的命名坑
HTML 里写data-user-id="123"，JS 里必须用dataset.userId访问——连字符自动转驼峰、首字母小写。大小写错一点就拿不到值：dataset.userid → undefined；dataset.Userid → undefined；dataset["user-id"] → ✅ 可用，但绕过驼峰转换。
更隐蔽的是命名非法：data-1st-place，JS 无法写成dataset.1stPlace（变量名不能数字开头），只能用dataset["1st-place"]；data-user:name中的冒号会被浏览器静默丢弃，值根本存不进去。
contenteditable 必须配 tabindex="0" 才能键盘聚焦
contenteditable是唯一能让任意 HTML 元素变成可编辑区域的全局属性，但它不是“开关即用”——开错位置、漏掉tabindex="0"、忽略默认样式干扰，都会导致行为异常。
- 设为
contenteditable="true"后，元素默认不可聚焦 —— 必须同时加tabindex="0"，否则键盘无法进入 -
contenteditable="plaintext-only"并不被任何浏览器支持；合法值只有true、false、空字符串（等价于true） - 嵌套子元素若自带
user-select: none或pointer-events: none，会阻断光标定位和文本选择
hidden 和 tabindex 的布尔逻辑容易误判
hidden是布尔属性，写成hidden="false"无效——浏览器只检测是否**存在该属性名**，而不是它的值。所以hidden、hidden=""、hidden="hidden"效果一致，都等效于display: none。
tabindex设为-1仅支持 JS 聚焦（el.focus()），不参与 tab 流；正数值（如5）会打乱自然焦点顺序，损害屏幕阅读器体验；设为0才让元素按 DOM 顺序加入 tab 流。
语义容器如<header></header>、<nav></nav>本身没有专属属性，所有可写的都来自全局属性列表，但滥用role或aria-*反而会破坏原生语义——这点比兼容性问题更难调试，也更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
