真正影响运行时行为的全局属性仅有少数几个：id和class决定js选择与css匹配；data-*仅在js中通过dataset读写有效；tabindex需为0或正整数才参与焦点流；hidden和contenteditable为布尔属性，存在即生效，值无效。
全局属性不是“通用装饰”，而是有明确行为边界的控制开关——用错一个，JS选不到、CSS不生效、无障碍直接失效。
哪些全局属性真正影响运行时行为
别被“所有标签都能加”误导。真正起作用的只有少数几个，其余多数只是“语法合法但无实际效果”：
-
id和class：JS 用getElementById或querySelector依赖它们；CSS 选择器必须匹配才生效 -
data-*：只在 JS 中读写有意义（element.dataset.xxx），HTML 和 CSS 不解析 -
tabindex：值为0或正整数才参与 Tab 焦点流；负值仅禁用焦点，不改变顺序 -
hidden：布尔属性，写成hidden="false"依然隐藏——只要存在就生效，值无关 -
contenteditable同理：写contenteditable="0"或contenteditable="off"都无效，只能是"true"或"false"（字符串）
class 和 id 的常见误用场景
这两个看似最简单，恰恰是动态渲染和调试中最容易翻车的地方：
- 多个元素用了相同
id：JSgetElementById只返回第一个，后续逻辑全错；CSS 选择器仍会命中全部，造成样式覆盖混乱 -
class值含空格却没引号：<div class="btn" primary></div>实际只生效btn，primary被当作文本节点丢弃 - 动态拼接 class 时没做去重：
el.className += " active"多次执行导致active active active，CSS 仍生效但 JS 判断classList.contains("active")会出错 - 服务端模板中未转义 class 名：
class="{{ user.role }}"若user.role是"admin script"，会意外引入非法 class 并可能触发 XSS
data-* 属性的读写边界与兼容性
data- 看似自由，但浏览器对它的处理有隐式规则：
- 连字符自动转驼峰：
data-user-id="123"→ JS 中通过dataset.userId访问，不是dataset.user-id（语法错误） - 数字开头的 key 会被忽略：
data-1st-place="gold"在dataset中不可见 - IE11 支持
dataset，但不支持带大写字母的转换（data-MyKey→mykey，而非myKey） - 不要存大对象或函数：它只序列化为字符串，
JSON.stringify后再塞进去，取出来得自己JSON.parse - Vue/React 等框架中，
data-不会自动响应式更新，改了 DOM 属性，组件状态不会同步
title、lang、aria-* 这类“隐形属性”的真实作用
它们不改样式、不触发行内逻辑，但缺失会导致具体问题：
-
title：鼠标悬停显示提示，但**不保证一定出现**——移动端 Safari 完全不支持，部分屏幕阅读器默认忽略 -
lang：影响浏览器拼写检查、语音朗读语调，也影响某些 CSS 伪元素（如:lang(zh)），但设错（如lang="cn"）比不设更糟 -
aria-*：必须配合role或语义化标签使用，单独加aria-label给<div> 不如直接用 <code><button></button>；且不能覆盖原生语义（如给<input type="checkbox">加aria-role="button"会破坏可访问性） -
spellcheck：仅对可编辑元素（contenteditable、<textarea></textarea>、<input type="text">）有效，对<p></p>加了也没用
真正卡住人的从来不是“能不能加”，而是“加了之后谁在读、怎么读、读错了怎么办”。全局属性不是贴纸，是接口契约——写的时候得想清楚，下游的 JS、CSS、辅助技术、甚至搜索引擎，都按这个契约来解析。
