HTML全局属性在实际项目中的完整应用教程-html教程-PHP中文网

contenteditable 元素必须设置 tabindex="0" 才能获得键盘焦点并输入，否则仅视觉可编辑；正确写法需搭配 spellcheck="false" 避免拼写红线干扰。

html全局属性在实际项目中的完整应用教程

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> —— 冗余且危险，<code>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></iframe>：它们会破坏编辑流，导致光标跳跃、撤销栈断裂、甚至触发 IE 遗留 bug。这类混合内容，必须用自定义 blot（如 Quill）或 Shadow DOM 隔离，而不是靠属性堆砌解决。