HTML全局属性是影响可访问性、语义化和运行时行为的关键开关：contenteditable需配tabindex="0"才可键盘聚焦；data-*命名须小写+连字符，否则dataset读不到；hidden语义化隐藏且不被辅助技术读取，display:none仅为样式隐藏。
HTML全局属性不是“能用就行”的装饰品，而是影响可访问性、语义化和运行时行为的关键开关。漏掉tabindex会让contenteditable失效；写错data-命名会导致dataset读不到值；把hidden当display: none用，可能破坏内容可见性逻辑。
为什么contenteditable加了还是不能编辑
它不是独立生效的属性，必须配合tabindex才能被键盘聚焦，否则用户按Tab进不去、屏幕阅读器也识别为非交互元素。
-
contenteditable="true"本身不赋予焦点能力，只是开启编辑模式 - 必须显式添加
tabindex="0"（或tabindex="-1"用于脚本聚焦） - 若父容器有
pointer-events: none或子元素设了user-select: none，光标会无法定位 - 建议同步加
spellcheck="false"，避免拼写红线干扰UI
正确写法：
<div contenteditable="true" tabindex="0" spellcheck="false">可编辑文本</div>
data-属性取值时为什么dataset读不到
浏览器对data-名到dataset键名的转换有严格规则：连字符自动转驼峰，且只支持小写字母+数字+连字符，首字符不能是数字。
立即学习“前端免费学习笔记（深入）”；
- 合法：
data-user-id="123"→el.dataset.userId - 非法：
data-User-ID="123"（含大写）→ 不进入dataset - 非法：
data-1id="123"（数字开头）→ 被忽略 - 非法：
data-id-123="x"（数字在中间）→ 会被解析但键名变成id123，易误判
检查方法：
console.log(Object.keys(el.dataset)); // 只显示合法转换后的键
hidden和display: none到底差在哪
两者都隐藏内容，但语义和渲染行为完全不同：hidden是HTML原生语义控制，display: none是CSS样式覆盖。
-
hidden属性存在时，元素不参与渲染流，也不被辅助技术读取（WCAG要求） -
hidden="until-found"是2026年新增值，表示“暂不显示，但准备就绪”，等同于content-visibility: hidden，仍占布局空间 -
display: none纯样式控制，不影响HTML语义，JS仍可通过getComputedStyle读到，且可能被CSS重置意外暴露 - 用
hidden更利于服务端渲染（SSR）中做条件输出，无需内联style污染HTML
推荐优先用hidden做状态控制，仅当需要动画或过渡时才用CSS切换display。
tabindex数值设成正数会出什么问题
正数值（如tabindex="5"）会强行插入tab顺序，破坏DOM自然流，对屏幕阅读器用户尤其危险。
-
tabindex="0"最安全：按DOM顺序加入焦点流，语义清晰 -
tabindex="-1"只允许脚本聚焦（el.focus()），不进tab流，适合弹窗/临时控件 - 正数会打乱阅读顺序，导致键盘用户跳过关键导航或表单字段
- Chrome和Firefox已对正数
tabindex发出Lighthouse警告，影响无障碍评分
真实项目里，95%的场景只需tabindex="0"或tabindex="-1"。
真正容易被忽略的是lang和dir——它们不显眼，但决定屏幕阅读器发音、文本换行、甚至表单自动填充行为。多语言站点上线前，务必检查根html标签的lang是否准确，RTL内容是否配了dir="rtl"。
