translate="no"是Chrome、Edge等浏览器唯一真正识别的禁译指令，必须显式写在具体元素上并配合准确lang值；需锁定fetch()、API路径、版本号、CSS类名、日期容器等语义固定内容，且<input>和<textarea>的value值须单独加该属性。
translate="no" 是唯一被 Chrome、Edge 等主流浏览器内置翻译引擎真正识别的禁译指令，不是建议，也不依赖 JS 控制；它必须写在具体元素上（或初始 标签），且需配合可信的 lang 值才可靠生效。
哪些内容必须加 translate="no" 才防得住误译
不是所有英文都要锁，只拦那些「语义固定、大小写/符号/顺序一变就失效」的内容：
-
fetch()、useState、props.children——括号、点号、大小写错一个，代码就报错 -
/api/v1/users/:id、X-Auth-Token、user_email——斜杠、冒号、下划线是协议或字段语义，不能动 -
v5.2.0、React 18.3、XZ-3000——数字+点一旦变成“五点二零”，机器就无法识别 -
class="btn-primary"、data-testid="submit-btn"——CSS 类名和测试 ID 是运行时关键字符串 -
<time datetime="2024-06-15"></time>外层容器——避免日期被转成本地格式如“2024年6月15日”
<input> 和 <textarea> 的 value 为什么总被翻
它们的 value 值完全不继承父级 translate 设置，是硬性例外。哪怕整个 <form translate="no"> 都包住了，下面这行仍可能被 Chrome 错译：
<input value="API_KEY">
必须显式补上：
立即学习“前端免费学习笔记（深入）”；
<input value="API_KEY" translate="no">
若 value 是 JS 动态赋值（如 el.value = "v5.2.0"），还得同步调用：
el.setAttribute("translate", "no");
为什么写了 translate="no" 还被 Chrome 翻了
常见失效不是属性没写，而是三处硬伤没对齐：
-
lang值缺失、写错或矛盾：比如中文页写lang="en"，或只写lang="zh"（缺区域码），Chrome 会判定语言不可信，直接忽略translate="no" - 动态插入节点未手动补：用
innerHTML或appendChild()新增的 DOM，不会自动继承，必须逐个调用setAttribute("translate", "no") - 第三方组件输出的 DOM 没 inspect：Ant Design、MUI 等库渲染后可能自带
translate属性，你模板里写的会被覆盖——得打开 DevTools → Elements 面板，查最终渲染出的元素上有没有该属性
translate 和 lang 必须一起用，但各管各的事
lang 只告诉浏览器“这段当前是什么语言”，影响拼写检查、语音朗读；translate 才是告诉翻译工具“别碰它”。两者不能互换，也不能省略其中一个：
错：<div lang="en">React</div> → Chrome 在中文页中仍可能把它译成“反应”
对：<div lang="en" translate="no">React</div> → 语言归属 + 禁译指令都到位
最稳的整页控制组合是：<html lang="zh-CN" translate="no">，但仅限初始 HTML 中声明；JS 后续赋值无效。
