必须写在具体元素上，不能依赖父级继承；translate="no"仅识别小写字面值“no”，需显式加在fetch()、v5.2.0等语义固定内容的标签上，且必须配合可信lang值，动态插入节点和input/textarea的value须手动补全。
translate="no" 必须写在具体元素上，不能靠父级继承搞定
浏览器只认字面值 no，且必须显式写在目标元素上——比如 fetch()、v5.2.0 这类内容，得直接包在带 translate="no" 的标签里。父元素设了 translate="no"，子元素虽会继承，但有硬性例外：<input> 和 <textarea></textarea> 的 value 完全不继承，必须单独加属性；<script></script> 和 <style></style> 里文本天生不参与翻译，加了纯属冗余。
哪些内容必须加 translate="no" 才算真正防住
不是所有英文都要锁，关键看是否「语义固定、不可替换」。一旦被译错，就会导致功能异常或技术歧义：
-
fetch()、useState、props.children—— 括号、点号、大小写一变就失效 -
/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"，避免日期被转成本地格式
lang 和 translate 必须配合，但各管各的事
lang 告诉浏览器“这段内容当前是什么语言”，影响拼写检查、语音朗读；translate 才是告诉翻译工具“这段要不要动”。两者不能互换，也不能省略其中一个：
- 只写
<div lang="en">React</div>→ Chrome 在中文页中仍可能把它当待译内容处理 - 只写
<div translate="no">React</div>→ 若页面lang缺失或错配（如写成lang="zh"而非lang="zh-CN"），Chrome 可能降级处理，照样翻 - 正确写法：
<div lang="en" translate="no">React</div>，语言归属 + 禁译指令都到位
动态内容和第三方组件最容易漏掉 translate="no"
你模板里写了 translate="no"，不代表最终 DOM 里还有。尤其以下三类场景必须手动补：
- JS 动态插入节点（
el.innerHTML = "fetch()"或document.body.appendChild(newEl)）→ 不继承，得调用el.setAttribute("translate", "no") - Vue 的
v-html或 React 的dangerouslySetInnerHTML→ 原始 HTML 字符串里必须已含translate="no"，模板里写的没用 - 第三方组件库（如 Ant Design、MUI）输出的 DOM → 可能自带
translate策略，得 inspect 实际渲染结果，不能只看源码
验证是否生效，别靠肉眼判断文字有没有变——打开 Chrome DevTools → Elements 面板，直接查目标元素上是否存在 translate="no" 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
