真正触发浏览器行为的全局属性仅有少数几个：id和class决定js定位与css匹配；hidden和contenteditable为布尔属性，存在即生效；tabindex需为0或正整数才参与焦点流；data-*值通过dataset读取时连字符转驼峰且数字开头需用方括号访问。
HTML全局属性不是“随便加的装饰”，而是有明确行为边界、影响运行时逻辑和无障碍体验的关键开关——用错一个，getElementById就选不到元素，dataset读不出值，屏幕阅读器会跳过整段内容。
哪些全局属性真正触发浏览器行为
别被“所有标签都能加”误导。真正改变 DOM 行为或渲染逻辑的只有少数几个：
-
id和class：JS 依赖document.getElementById或querySelector定位；CSS 选择器必须匹配才生效 -
hidden是布尔属性：写成hidden="false"或hidden="0"依然隐藏——只要属性存在，就等价于display: none -
contenteditable同样是布尔语义：只认"true"或"false"字符串；contenteditable="off"无效，浏览器直接忽略 -
tabindex值必须是数字：0 或正整数才进入 Tab 焦点流；负值（如tabindex="-1"）仅禁用默认焦点，不参与顺序 -
data-*不影响 HTML 渲染，但 JS 中通过element.dataset.xxx读取时，连字符自动转驼峰（data-user-id→dataset.userId），且数字开头的 key（如data-1st-place）在 dataset 中不可见
class 和 id 的硬性约束与常见翻车点
这两个看似最基础的属性，恰恰是服务端模板、动态渲染和调试中最容易出问题的地方：
- 多个元素用了相同
id：document.getElementById只返回第一个，后续 JS 逻辑全崩；CSS 选择器却仍会命中全部，导致样式覆盖混乱 -
class值含空格但没引号：<div class="btn" primary></div>实际只解析出class="btn"，primary被当作文本节点丢弃 - 动态拼接
class时没去重：el.className += " active"执行三次，结果是class="active active active"，CSS 仍生效，但el.classList.contains("active")返回true——表面没问题，实则埋下判断逻辑隐患 - 服务端模板未转义：
class="{{ user.role }}"若user.role是"admin script"，会意外注入非法 class，甚至触发 XSS
lang、dir、title 这些“隐形属性”的真实影响
它们不改样式、不触发行内 JS，但缺失或写错，会导致具体可复现的问题：
-
lang="zh-CN"不是摆设：Chrome 地址栏翻译按钮、屏幕阅读器发音规则、Google 爬虫语种识别全依赖它；写成lang="cn"或留空，翻译失败率直线上升 -
dir控制文本方向：dir="rtl"不只是视觉翻转，还影响textarea光标行为、表单输入法逻辑；多语言站点若漏设，阿拉伯语或希伯来语用户输入体验直接降级 -
title在桌面端显示为 tooltip，但移动端 Safari 完全不支持；部分屏幕阅读器默认忽略它——不能当关键信息载体，只能作补充提示 -
accesskey慎用：值为单字符（如accesskey="s"），但极易与浏览器/系统快捷键冲突（Ctrl+S保存），实际可用性极低
hidden="until-found" 这个新值容易被忽略
HTML 5.3 新增了 hidden="until-found"，它和传统 hidden 行为完全不同：
- 普通
hidden：元素不渲染、不占布局空间、不可聚焦、不参与可访问性树 -
hidden="until-found"：元素仍参与布局（保留内外边距、尺寸），但内容不可见；当被findInPage（浏览器 Ctrl+F 查找）命中时，会自动显示——适合做“搜索高亮前先隐藏”的场景 - 兼容性注意：目前仅 Chromium 120+ 和 Safari 17.4+ 支持，Firefox 尚未实现；不要用它替代 JS 控制显隐逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
