translate属性是明确禁译指令，仅对Chrome、Edge等内置翻译引擎生效，禁止翻译指定内容且不影响DOM、重排和JS执行；默认所有文本可译，仅当代码标识符、路径字段名、版本号、HTML属性值等技术字符串被误译时才需添加translate="no"。
translate属性不是“建议翻译”，而是明确禁译指令
它只对 Chrome、Edge 等内置翻译引擎生效，告诉浏览器“这段内容不准动”，不改变 DOM、不触发重排、也不影响 JS 执行。默认所有文本都是 translate="yes"，所以绝大多数情况根本不用写——只有当你确认某段内容被误译了（比如 fetch() 变成“获取”、/api/v1/users/:id 被拆成中文路径），才需要加 translate="no"。
哪些元素必须手动加 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"这类 HTML 属性值——CSS 类名和测试 ID 是运行时依赖 -
外层容器——避免机器把2024-06-15转成本地日期格式
div 上设 translate="no" 的继承陷阱
translate="no" 会继承，但有硬性例外：
-
和的value完全不继承——哪怕父div加了，也得单独在标签上写translate="no" -
<script></script>和内部文本天然不参与翻译，加该属性纯属冗余 - 用
v-html或dangerouslySetInnerHTML渲染富文本时，translate属性仍生效，但前提是原始 HTML 字符串里已包含它——模板里写的没用 - JS 动态插入的节点（如
innerHTML或appendChild()）不会自动继承，必须手动补translate="no"
别给整个页面加 translate="no"
看似省事，实则埋 UX 雷：
- 按钮文字如
Submit、提示文案如Invalid email全部跳过翻译，用户看到的是中文界面混着英文操作词 - 第三方组件库（如 Ant Design）输出的 DOM 可能自带
translate策略，你全局覆盖后行为不可控 - 旧版 Edge 或某些翻译插件对
支持不稳定，局部精准控制更可靠
真正该禁译的是极少数技术字符串，不是整页——先打开 Chrome DevTools → Elements 面板，查目标元素是否真被误译，再加，别预防性滥用。最容易被忽略的是动态插入内容，验证是否生效，别靠肉眼，直接看属性是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
