translate属性仅控制浏览器是否启用自动翻译，不能实现多语言自动化翻译；真正实现需i18n框架+翻译数据驱动；translate="no"是禁译指令，明确指示浏览器跳过该节点，不触发API、不调用服务、不改DOM。
translate 属性根本不能实现“多语言自动化翻译”，它只控制浏览器是否对某段文本启用自动翻译功能；真要自动翻译，得靠 i18n 框架 + 翻译数据驱动，而不是靠这个 HTML 属性。
translate="no" 是禁译指令，不是翻译开关
它向 Chrome、Edge 等浏览器的内置翻译引擎发明确指令：“这段不准动”，不触发任何 API、不调用服务、不改 DOM 结构，只是让翻译工具跳过该节点。常见误操作包括：
- 给
<button>Submit</button>加translate="no"，结果用户看到中文界面里混着英文按钮 - 以为设了
translate="yes"就能自动把 “Cancel” 变成 “取消”，实际毫无反应 - 在 Vue/React 中动态切换
translate值，发现界面语言完全不变
哪些内容必须加 translate="no"，哪些加了反而坏事
真正需要锁定的是语义固定、大小写/符号/顺序不可变的技术字符串：
-
fetch()、useState、props.children—— 括号、点号、大小写一变就失效 -
/api/v1/users/:id、X-Auth-Token、user_email—— 斜杠、冒号、下划线是协议或字段语义 -
v5.2.0、React 18.3、XZ-3000—— 数字和点一旦被译成“五点二零”就失去机器可读性 -
<time datetime="2024-06-15"></time>外层容器 —— 避免日期被转成本地格式如“2024年6月15日”
但以下内容不该加：Submit、Invalid email、Settings —— 它们本该随用户语言切换，加了反而导致中文化界面残留英文。
立即学习“前端免费学习笔记（深入）”；
继承规则和最常漏掉的三个地方
translate 可继承，父元素设了 translate="no"，子元素默认也禁译；但有硬性例外：
-
<input value="v5.2.0">和<textarea>的value值完全不继承，必须单独加translate="no" -
<script>和<style>内部文本天然不参与翻译，加该属性纯属冗余 - JS 动态插入的节点（如
el.innerHTML = "<span>fetch()</span>"）不会继承，必须手动补translate="no"，否则 Chrome 仍可能乱翻
验证是否生效，别靠肉眼——打开 Chrome DevTools → Elements 面板，直接查目标元素上是否存在该属性。
lang 和 translate 混用时的致命误区
lang 只声明当前文本的语言归属，不控制是否翻译；translate 才是真正的开关。两者必须显式并存才可靠：
- 错：
<div lang="en">React</div>→ Chrome 仍可能译成“反应” - 对：
<div lang="en" translate="no">React</div> - 第三方组件库（如 Ant Design）输出的 DOM 可能自带
translate，覆盖前务必 inspect 实际渲染结构，不能只看模板源码
最容易被忽略的是：初始 HTML 中的 <html translate="no"> 必须配合可信的 lang（如 lang="zh-CN"）才能稳定触发；JS 后续设置 document.documentElement.translate = "no" 完全无效。
