translate="no" 是向浏览器翻译引擎发出的明确禁令，禁止翻译该节点内容，不触发API、不改DOM；但需确保属性值为小写"no"、lang配置正确，且动态插入节点须手动设置。
translate 属性不是“翻译开关”，而是向 Chrome、Edge 等浏览器内置翻译引擎发明确禁令：“这段内容不准动”。它不触发任何 API，不改 DOM，只让翻译工具跳过该节点——写错位置、漏掉动态内容、lang 配置不匹配，都会让它失效。
哪些元素必须加 translate="no" 才算真正防住
不是所有英文都要锁。真正需要保护的是语义固定、大小写/符号/顺序一变就失效的内容：
-
fetch()、useState、props.children——括号、点号、大小写错一个，JS 就报错 -
/api/v1/users/:id、X-Auth-Token、user_email——斜杠、冒号、下划线是协议或字段定义的一部分 -
v5.2.0、React 18.3、TPM2.0——数字+点被译成“五点二零”后，开发者无法识别 -
class="btn-primary"、data-testid="submit-btn"——CSS 类名和测试 ID 是运行时关键字符串 -
<time datetime="2024-06-15" translate="no">2024/06/15</time>——外层加translate="no"，避免被转成本地日期格式（如“2024年6月15日”）干扰机器解析
<input> 和 <textarea> 的 value 为什么加了父级 translate="no" 还被翻
因为它们的 value 值完全不继承父级 translate 设置——这是硬性例外，Chrome 明确不继承。
-
<input value="v5.2.0" translate="no">必须显式加在标签上 -
<textarea translate="no">npm install -D vite</textarea>同理，不能靠外层容器兜底 - Vue 的
v-model或 React 的valueprop 绑定后，仍需确保原生<input>标签上有该属性
为什么写了 translate="no" 还被 Chrome 翻了
Chrome 只在首次解析 HTML 时读取该属性，且依赖上下文可信度。常见失效原因：
立即学习“前端免费学习笔记（深入）”；
- 写了
translate="false"或translate=""——Chrome 只认字面值"no"，大小写敏感，不能是NO或No -
lang缺失、写错或矛盾：比如中文页只写lang="zh"（缺区域码），或写成lang="en"，Chrome 会判定语言不可信，直接忽略translate="no" - JS 动态插入的节点（如
el.innerHTML = "fetch()"）不会自动继承，必须手动调用el.setAttribute("translate", "no") - 第三方组件库（如 Ant Design）输出的 DOM 可能自带
translate属性，得 inspect 实际渲染结果，不能只看模板源码
动态内容和第三方组件最容易漏掉的三个地方
你模板里写了 translate="no"，不代表最终 DOM 里还有。尤其以下三类场景必须手动补全：
- JS 用
innerHTML或appendChild()新增的节点 → 不继承，得显式设置 - Vue 的
v-html或 React 的dangerouslySetInnerHTML→ 原始 HTML 字符串里必须已含translate="no"，模板里写的没用 - SVG 内的
<text>元素 → 它属于普通 HTML 子树，一样受translate控制；国际化图标旁的说明文字如果固定不变，也得加
验证是否生效，别靠肉眼——打开 Chrome DevTools → Elements 面板，直接查目标元素上是否存在 translate="no" 属性。最常被忽略的，是 lang 值缺失与动态插入节点的手动补全。
