必须为代码标识符、api路径、版本号、html属性值等关键字符串添加 translate="no"，且仅小写"no"有效；全局设置会破坏ui翻译，需局部精准控制并手动补动态内容。
Chrome 和 Edge 的内置翻译功能会把 fetch()、/api/v1/users/:id、v5.2.0 这类内容错译成中文，导致技术文档失效或 API 示例无法复制。直接在对应元素上写 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 是运行时关键字符串 -
<time datetime="2024-06-15"></time>外层容器——避免机器把2024-06-15转成本地日期格式
translate="no" 怎么写才真正生效
它不是“建议”，而是 Chrome 和 Edge 明确识别的指令，但必须写对位置、大小写和上下文：
- 只认字面值
"no"：写成translate="false"、translate=""或translate="off"全无效 - 大小写敏感：必须小写
no，NO或No不起作用 - 不继承到
<input>和<textarea></textarea>的value：哪怕父级加了，也得单独在标签上写translate="no" -
<script></script>和<style></style>内部文本天生不参与翻译，加该属性纯属冗余 - 用
v-html或dangerouslySetInnerHTML渲染富文本时，translate仍生效，但前提是原始 HTML 字符串里已包含它——模板里写的没用
为什么不能直接给
看似省事，实则埋 UX 雷：
- 按钮文字如
Submit、提示文案如Invalid email全部跳过翻译，用户看到的是中文界面混着英文操作词 - 第三方组件库（如 Ant Design）输出的 DOM 可能自带
translate策略，你全局覆盖后行为不可控 - 旧版 Edge 或某些翻译插件对全局
translate="no"支持不稳定，局部精准控制更可靠 -
lang和translate不是一回事：lang="zh-CN"表示当前语言是中文，translate="no"才表示“别翻这个词”——两者必须配合，不能互相替代
最容易被忽略的是动态插入内容：JS 用 innerHTML 或 appendChild() 新增的节点，必须手动补 translate="no"，否则继承无效。验证是否生效，别靠肉眼，直接打开 Chrome DevTools → Elements 面板，查目标元素上是否存在该属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
