data-*属性必须全小写加连字符命名（如data-user-id），dataset自动转驼峰但值恒为字符串；读取优先用getattribute()，写入必须用setattribute()，混用会导致数据不一致。
HTML全局属性不是装饰品，用错地方或忽略细节，轻则样式/行为异常，重则破坏可访问性、拖慢渲染、引发兼容性问题。
data-* 属性怎么读写才不丢数据
很多人以为 dataset 是唯一入口，但实际它会自动转换连字符、过滤非法命名，且不支持动态添加后立即反射——比如 data-user-id 变成 dataset.userId，而 data-123 或 data-@key 根本进不了 dataset。
- 读取优先用
getAttribute('data-xxx')：稳定、原样返回，兼容所有合法命名 - 写入用
setAttribute('data-xxx', value)：避免驼峰转换陷阱，也绕过dataset的内部缓存延迟 - 不要混用：
dataset.xxx = 'a'后再getAttribute('data-xxx')可能还是旧值（尤其在 Shadow DOM 中） - 敏感信息别塞进去：
data-token、data-user-id会暴露在 HTML 源码里，前端日志或爬虫一抓就走
contenteditable 在真实表单中为什么总出问题
contenteditable 看似能快速实现富文本输入，但它和原生 input/textarea 不共享表单提交逻辑、不触发 change 事件、不参与 form.checkValidity()，更麻烦的是它默认允许粘贴任意 HTML，带来 XSS 风险。
- 表单提交前必须手动提取内容：
el.innerText（纯文本）或el.innerHTML（需 sanitize） - 禁用默认粘贴行为：
el.addEventListener('paste', e => { e.preventDefault(); ... }) - 聚焦管理要自己补：
el.tabIndex = 0才能被键盘 tab 到，否则屏幕阅读器可能跳过 - 移动端输入法体验差：iOS Safari 对
contenteditable的 autocorrect/autocapitalize 支持不稳定，经常失效
hidden 属性比 display: none 更“重”吗
是的。hidden 不只是隐藏，它让元素退出可访问树、不参与焦点流、不触发 resize 或 scroll 监听，而且浏览器会做 layout skip 优化——但这也意味着它不能替代 CSS 控制的显隐切换。
-
hidden适合「永久性移除」或「条件性不可见」场景，比如未登录时隐藏用户菜单 - 别用它做动画过渡：没有 transition 支持，
hidden一加就消失，无法 fade out -
hidden="until-found"是个例外：它保留布局空间，只在无障碍技术访问时才显示，适合 SEO 友好型折叠内容 - JS 动态控制时，用
el.hidden = true/false比toggleAttribute('hidden')更直接，也更易与布尔状态同步
autofocus 和 enterkeyhint 在移动端的实际表现
autofocus 在 iOS Safari 中基本无效（除非用户主动点击），而 enterkeyhint 虽然能改回车键图标，但不会改变实际行为——按下去仍是换行或提交，得靠 JS 拦截 keydown 自己处理。
-
autofocus只建议用在单页首次加载、且无弹窗/遮罩的页面顶部输入框；其他情况一律用 JSel.focus()+setTimeout延迟触发 -
enterkeyhint="next"配合inputmode="text"才有效果，单独用没意义 -
enterkeyhint="send"在聊天输入框里有用，但必须监听Enter键并e.preventDefault()，否则仍会换行 - 安卓 WebView 对
enterkeyhint支持参差不齐，测试时务必真机验证，别信模拟器
最常被忽略的其实是属性组合副作用：比如 contenteditable + hidden 会让元素既不可见又可编辑（焦点仍在），或者 data-* 属性名含大写字母导致 dataset 读不到——这些都不是浏览器 bug，而是规范里白纸黑字的行为。写之前，先查 MDN 上对应属性的 “Notes” 和 “Browser compatibility” 栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
