能用在任意HTML元素上的属性是W3C规范定义的global attribute，如class、id、data-、title、lang、dir、tabindex、aria-、hidden、contenteditable、draggable；style虽为全局属性但部分元素无渲染意义；局部属性如src、href、alt挪用会被浏览器忽略或无效。
哪些属性能用在任意 HTML 元素上
只要 W3C 规范里标记为 global attribute 的，就能无条件加在任何元素上——哪怕语义上看起来“不合理”，比如给 <script> 加 hidden 或 contenteditable，浏览器也不会报错，只是部分行为无效（hidden 仍会隐藏，但 contenteditable 在 <script> 上不触发编辑态）。
判断依据不是“有没有效果”，而是“是否被规范定义为全局”。常见可无差别使用的有：class、id、data-*、title、lang、dir、tabindex、aria-*、hidden、contenteditable、draggable。
容易误判的是 style：它确实是全局属性，但某些自闭合元素（如 <meta>、<link>）加了也无渲染意义；tabindex 在不可聚焦元素（如 <div> 默认）上设值后才获得键盘焦点能力——这属于“有效但需配合条件”，不是“不能用”。
局部属性为什么不能随便挪到其他标签上
局部属性是和元素语义强绑定的，挪用会导致解析失败或静默忽略。例如：
立即学习“前端免费学习笔记（深入）”；
-
src是<img>、<script>、<iframe>的局部属性，写在<div src="x">上，浏览器完全忽略该属性，DOM 中也查不到src（element.getAttribute('src')返回null） -
href只对<a>、<area>、<base>、<link>有效；加在<p href="x">上，HTML 解析器不报错，但不会生成链接行为，也不会出现在 DOM 属性列表中 -
alt仅对<img>和<input type="image">有意义；加在<span alt="x">上，属性存在但无任何作用，且可能干扰无障碍检测工具的逻辑
关键点：局部属性不是“禁止使用”，而是“未定义行为”——浏览器没义务处理，也不保证未来兼容。
data-* 属性是全局属性里最安全的“扩展槽”
当你想给某个元素附带自定义元数据，又不确定它是否该归为局部语义时，data-* 是唯一被规范明确定义为“可自由扩展”的全局通道。
它必须满足两个硬性格式要求：
- 前缀严格为
data-（全小写，连字符后至少一个字符） - 后续名称只能含 ASCII 字母、数字、连字符、下划线、冒号（但冒号易与命名空间混淆，建议避开）
例如合法写法：data-user-id="123"、data-api-endpoint="/v1/users"、data-is-pending="true"；非法写法：data_abc（缺连字符）、DATA-ID（大小写敏感）、data-（无后续名）。
JS 中读取统一用 dataset API：el.dataset.userId 自动转驼峰（连字符后首字母大写），比 getAttribute('data-user-id') 更简洁且兼容。
局部属性转全局的唯一可行路径：通过 data-* 封装
没有标准方式能把 placeholder 这类局部属性“升级”为全局，但你可以用 data-placeholder 模拟其意图，并由 JS 主动接管行为。
比如想让一个 <div contenteditable> 显示占位提示：
<div contenteditable data-placeholder="请输入内容..."></div>
然后用 JS 监听 input 和 blur 事件来控制显隐，而不是指望浏览器自动识别 placeholder ——因为规范没允许它出现在 <div> 上。
这种模式在组件库中很常见，但要注意：它不替代原生局部属性的语义和无障碍支持。若真需要输入语义，就该用 <input> 或 <textarea>，而非强行“复刻”属性名。
真正容易被忽略的是 aria-* 属性的边界：它们虽属全局，但只有搭配正确角色（role）和状态（aria-expanded、aria-checked）才有意义；单独加 aria-label 到无交互元素上，可能反而破坏屏幕阅读器流式阅读顺序。
