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