translate="no"仅在HTML初始解析时生效，JS动态插入内容不继承该属性；必须与lang配对使用且值符合BCP 47；仅保护代码标识符、版本号、路径等机器可读文本，UI文案不应添加；动态生成节点需手动设置translate="no"。
translate="no" 为什么没生效
不是属性写错了，而是 Chrome 只在初始 HTML 解析时读一次 translate，后续 JS 动态插入的节点完全不继承父级设置。常见失效场景包括：
• 用 innerHTML 插入含英文标识符的代码块，比如 <pre><code>npm install -D vite</code></pre>，即使外层 div 有 translate="no"，新插入的 code 仍会被提取翻译
• input 或 textarea 的 value 属性从不继承，哪怕整个表单都加了 translate="no"，el.value = "v5.2.0" 还是可能变成“五点二零”
• translate="false"、translate="" 或 translate="off" 全无效，必须字面值写成 translate="no"
lang 和 translate 必须配对出现
lang 告诉浏览器“这是什么语言”，translate 告诉它“别动这段”。两者缺一不可，且必须写在同一元素上：
• 错误写法：<div lang="en">React</div> → Chrome 仍可能把它翻成“反应”
• 正确写法：<div lang="en" translate="no">React</div>
• <html> 标签上的 lang 是全局锚点，必须存在且值符合 BCP 47（如 zh-Hans，不是 zh），否则 translate="no" 在子元素上可能被忽略
• 第三方组件库（如 Ant Design）输出的 DOM 可能自带 translate，覆盖前务必 inspect 实际渲染结果，不能只看模板源码
哪些内容真该加 translate="no"
不是所有英文都要锁死，重点保护的是机器可读优先、大小写/符号敏感、语义固定的文本：
• 代码标识符：useState、fetch()、npm install -D vite
• 版本号与 ID：v5.2.0、React 18.3、XZ-3000
• 路径与 token：/api/v1/users/:id、abc123-token、base64 片段
• 时间属性值：datetime="2024-06-15" 外层建议套 translate="no"
• 按钮文字（Submit）、提示文案（Invalid email）这类面向用户的 UI 文本，**不该加** —— 加了反而导致中文化界面混入英文残留
动态内容必须手动补 translate="no"
所有 JS 动态生成的内容，无论用 appendChild()、insertAdjacentHTML() 还是框架的响应式更新，都不会自动带上 translate="no"：
• 创建新元素后，必须显式调用 el.setAttribute("translate", "no")
• 给 input 赋值后，得同步设属性：el.value = "XZ-3000"; el.setAttribute("translate", "no");
• 使用 textContent 更新时，不影响 translate 状态；但若用 innerHTML 替换整段，新插入的子节点需重新设置
• 最容易被忽略的，是第三方 SDK 注入的 DOM（如埋点脚本、客服 widget），它们往往绕过你的初始化逻辑，需要单独 patch
立即学习“前端免费学习笔记（深入）”；
