真正能立刻用起来、不踩坑的全局属性只有id、class、data-*、title、tabindex、contenteditable、lang、style；其他如contextmenu、hidden、accesskey因兼容性或行为不一致应暂缓使用。
真正能立刻用起来、不踩坑的全局属性，就那几个：id、class、data-*、title、tabindex、contenteditable、lang、style。 其他标着“全局”的，比如 contextmenu（没浏览器支持）、hidden（在 里静默失效）、accesskey（跨平台行为不一致），新手先别碰。
为什么 contenteditable 加了还是点不进去？
它不是开关，是组合技。单独写 contenteditable="true"，视觉上像可编辑，但键盘根本进不去——因为没焦点入口。
- 必须显式加
tabindex="0"，否则 Tab 键跳不过去，JS 调el.focus()也无效 - 中文输入法卡顿或符号不显示？检查子元素是否被
user-select: none或pointer-events: none拦截 - 拼写下划线干扰排版？补上
spellcheck="false" - 值只认三个：
"true"、"false"、空字符串；"on"或"1"都被忽略
推荐写法：
<div contenteditable="true" tabindex="0" spellcheck="false">编辑我</div>
data- 属性读不到？十有八九是命名或访问方式错了
HTML 里写 data-user-id="123"，JS 里得用 el.dataset.userId，不是 el.dataset.userid，也不是 el.dataset["user-id"]（后者能取到，但绕过了驼峰转换规则）。
- 连字符自动转驼峰，首字母小写：
data-api-key→dataset.apiKey - 数字开头不行：
data-1st-place不能写成dataset.1stPlace（语法错误），得用dataset["1st-place"] - 值永远是字符串，
data-count="0"取出来是"0"，要数字得手动Number(el.dataset.count) - 非法字符如冒号
:、空格会被浏览器静默丢弃，data-user:name直接无效
id 和 class 在 JS 中查得慢？真不是错觉
document.getElementById("x") 是 O(1) 哈希查找，快得几乎无感；而 document.querySelector(".x") 或 document.getElementsByClassName("x") 要走 CSS 选择器引擎，节点一多、嵌套一深，延迟就出来了。
-
id必须全局唯一，重复时getElementById只返回第一个，不报错但结果不可靠 -
class支持多值，但空格敏感：class="btn primary"和class="btn primary"（两个空格）解析出的类名数组分别是["btn", "primary"]和["btn", "", "primary"]，导致classList.contains("primary")返回false - 改类名优先用
classList.add()/classList.toggle()，别直接拼className += " active"，容易引入多余空格或重复
最容易被忽略的不是语法，而是上下文：比如 tabindex="5" 看似只是调个序，实则打乱屏幕阅读器逻辑；data- 名里混了大写字母，JS 里就拿不到值；contenteditable 缺 tabindex，功能在真实键盘用户面前直接归零——这些都不报错，但功能就是不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
