contenteditable 元素必须设置 tabindex="0" 才能获得键盘焦点并输入，否则仅视觉可编辑；正确写法需搭配 spellcheck="false" 避免拼写红线干扰。
contenteditable 必须配 tabindex="0" 才能键盘聚焦，否则只是“看起来可编辑”，实则无法输入——这是实际项目里最常踩的坑。
为什么 contenteditable 加了却不能打字？
它不是开关式属性，而是依赖完整焦点链的行为控制机制：
-
contenteditable="true"只启用编辑能力，不赋予焦点能力 - 没
tabindex→ 浏览器不把它纳入 tab 流 → 键盘进不去 → 光标点不进去 - 即使用鼠标点击，若子元素有
user-select: none或pointer-events: none，也会拦截光标定位 - 移动端更敏感：部分 Android WebView 对
tabindex缺失直接忽略整个编辑行为
正确写法：
<div contenteditable="true" tabindex="0" spellcheck="false">可编辑文本</div>其中
spellcheck="false" 能避免拼写红线干扰 UI，尤其在表单类场景中很关键。
autocapitalize 和 autocorrect 在输入框里的真实表现
这两个属性专为移动虚拟键盘优化，但浏览器支持差异大，不能只看 MDN 列表：
-
autocapitalize值为"sentences"时，iOS Safari 会句首大写，Android Chrome 多数只响应"words"；"off"和"none"等效，但写autocapitalize="off"更稳妥（Safari 某些旧版对none解析不稳定） -
autocorrect在<input type="password">上永远无效，且 Firefox for Android 已弃用该属性，仅 iOS Safari 和部分 Chromium 移动版还生效 - 它们只作用于“可编辑内容”，对
contenteditable元素也有效，但需确保父容器未设spellcheck="false"（后者会覆盖前者）
实操建议：登录页邮箱/密码输入框统一加 autocapitalize="off" autocorrect="off"；评论区 textarea 可用 autocapitalize="sentences" 提升输入体验。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
inert 和 hidden 别混用，语义和渲染行为完全不同
两者都“让内容不可见”，但底层机制和可访问性影响截然不同：
-
hidden是纯展示控制：等价于display: none，元素不占布局、不被屏幕阅读器读取，但 DOM 仍在，JS 可随时操作 -
inert是交互封锁：元素保留布局位置、仍可被 CSS 选中，但所有事件监听失效、焦点无法进入、屏幕阅读器跳过其子树 —— 它是为模态框遮罩层、临时禁用区域设计的 -
inert在 Chrome 122+ / Firefox 125+ 才稳定支持，Safari 仍无原生实现；旧环境必须用aria-hidden="true"+tabindex="-1"+ 手动移除焦点逻辑模拟
典型误用：<div hidden inert> —— 冗余且危险，hidden 已让元素完全退出渲染树，inert 失去作用对象。该用哪个，取决于你要封的是“眼睛”还是“手和耳朵”。
data- 属性传值时，JS 读取要小心驼峰转换
dataset API 会自动把连字符转成驼峰，但规则有边界：
-
data-user-id="123"→element.dataset.userId === "123" -
data-api-url="https://api.example.com"→element.dataset.apiUrl === "https://api.example.com" - 但
data-123-id这种以数字开头的，会被 dataset 忽略（不暴露到对象上），只能用getAttribute("data-123-id") - 带大写字母的如
data-UserID不会被标准化，必须用getAttribute读取，否则返回undefined
工程建议：团队约定 data- 全小写 + 连字符分隔；敏感数据（如 token、用户 ID）别走 data-，改用服务端渲染或加密上下文传递 —— 它本质是明文挂载在 DOM 上的。
contenteditable 元素里嵌套的 <img> 或 <iframe>：它们会破坏编辑流，导致光标跳跃、撤销栈断裂、甚至触发 IE 遗留 bug。这类混合内容，必须用自定义 blot（如 Quill）或 Shadow DOM 隔离，而不是靠属性堆砌解决。 
