contenteditable需配合tabindex="0"才能键盘聚焦，title在ios不触发，hidden为布尔属性且data-*值恒为字符串。
contenteditable 不是“加了就能编辑”，tabindex 不是“写了就能聚焦”，title 在 iOS 上根本不会弹——全局属性看着通用，实则每一条都有明确生效边界和隐式前提。
contenteditable 必须配 tabindex="0" 才能键盘进入
设了 contenteditable="true" 却点不进去、按 Tab 也跳不过去？问题大概率出在没加 tabindex="0"。浏览器默认只让表单控件、链接等可交互元素参与焦点流，普通 div 或 span 即使可编辑，也不具备自然聚焦能力。
-
contenteditable="true"只控制内容是否可编辑，不控制能否获得焦点 -
tabindex="0"是让它加入 DOM 顺序的 tab 流的最小必要条件 -
tabindex="-1"允许 JS 调用el.focus()，但用户无法用键盘到达 - 若父容器有
pointer-events: none或子元素设了user-select: none，光标仍可能定位失败
id 和 class 的唯一性与空格陷阱真会影响运行结果
id 冲突不是“样式错一点”，而是 document.getElementById("x") 永远只返回第一个匹配项；class 中多一个空格，classList.contains("active") 就会返回 false。
-
id值必须以字母或下划线开头，不能含空格、冒号（除非转义），且全文档唯一 -
class="btn primary"是两个类；class="btn primary"（两个空格）会被解析为三个类：["btn", "", "primary"] - 动态拼接
className容易重复，优先用element.classList.add("active") -
data-user-id="123"→ JS 中读作dataset.userId，不是dataset.user-id或dataset.userid
title 属性在移动端完全不可靠，别当提示主通道
给 div 加 title="点击展开"，在桌面端可能偶尔弹出，在 iOS Safari 上永远没反应——它不支持 hover，长按也不保证触发。这不是 bug，是规范行为。
-
title仅对语义上“本就可交互”的元素合理有效：button、input、img、a -
div或span加title需配合tabindex="0"才可能被屏幕阅读器读出，但视觉端仍无提示 - 需要可靠提示时，优先用
aria-label（覆盖可访问名称）或aria-describedby（关联真实 DOM 提示节点） -
title内容超 120 字符、含换行或 HTML 实体，多数浏览器会截断或静默忽略
hidden 和 data-* 的值不是“写什么就是什么”
hidden="false" 依然隐藏，data-count="0" 取出来是字符串 "0"——全局属性的值类型和解析规则，由 HTML 规范硬性定义，不随开发者意愿改变。
-
hidden是布尔属性：存在即生效，hidden=""、hidden="hidden"、hidden="false"效果完全相同 -
data-*值永远是字符串，数字/布尔需手动转换：Number(el.dataset.count)、el.dataset.enabled === "true" -
data-1st-place这种数字开头的 key，JS 中只能通过dataset["1st-place"]访问 -
spellcheck="false"对contenteditable区域很实用，能关掉烦人的红色波浪线
真正难的不是记住哪些属性可用，而是理解每个属性在什么条件下才“真正起作用”：有没有焦点流接入、是否符合语义角色、是否被父级样式阻断、是否跨了平台限制——这些细节不验证，代码就只是看起来能跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
