contenteditable是唯一能让<p>、<span>、<div>等纯文本元素直接可编辑的全局属性，但必须配tabindex="0"才能键盘聚焦，否则光标无法进入；spellcheck="false"可消除拼写下划线干扰，user-select:none等CSS会阻断输入。
contenteditable 是唯一能让 <p>、<span>、<div> 这类纯文本元素直接变可编辑的全局属性，但它不是设了就灵——漏掉 tabindex、忽略拼写干扰、嵌套样式冲突，都会让光标进不去、选不了、输不了。
为什么 contenteditable 必须配 tabindex="0"
浏览器默认不把 <p contenteditable="true"> 当作焦点目标，键盘根本无法进入。只加 contenteditable 等于只开了门但没留钥匙孔。
-
tabindex="-1"：可用 JavaScript 调用.focus()编程聚焦，但用户按 Tab 键扫不到 -
tabindex="0"：按 DOM 顺序加入自然 tab 流，最稳妥的选择 -
tabindex="5"或其他正数：会打乱屏幕阅读器的阅读顺序，WCAG 不推荐 -
disabled属性会让tabindex完全失效，哪怕写了tabindex="0"也没用
spellcheck 和 autocorrect 在文本编辑中的实际影响
移动端或桌面端输入时，拼写下划线和自动更正常干扰 UI 布局或误改内容，尤其在表单字段外的自由编辑区。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
spellcheck="false"：隐藏红色波浪线，不影响输入逻辑，推荐所有非写作场景使用 -
autocorrect="off"：禁用自动更正（如 “teh” → “the”），仅对<input>和<textarea>有效；对contenteditable元素，部分浏览器仍可能生效，需实测 -
autocapitalize值为"none"或"off"可关闭首字母大写，避免在用户名、代码片段等场景出错
哪些全局属性对文本元素最常用且零风险
不需要交互增强时，这几个属性几乎不会出问题，语义清晰、兼容性好、无副作用：
立即学习“前端免费学习笔记（深入）”；
-
id：唯一标识，方便 CSS 选中或 JS 获取，注意整个页面不能重复 -
class：批量控制样式或行为，支持多值空格分隔，如class="note editable highlight" -
title：鼠标悬停提示，适合补充说明，但别放长文本（截断不可控） -
lang：明确语言类型，影响语音朗读、字体回退、引号样式，如lang="zh-CN"或lang="en" -
data-开头的自定义属性：存业务数据，完全安全，JS 用dataset读取
真正容易被忽略的是：全局属性不是“贴上就起效”，而是和元素渲染上下文强耦合。比如 contenteditable 遇到 user-select: none 的子元素，光标就卡住；title 在触摸设备上基本不触发；lang 不写，某些字体渲染或 hyphenation 就会出错。细节不在文档里，而在真实交互中。
