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 是运行时依赖 -
<time datetime="2024-06-15"></time>外层容器——避免机器把2024-06-15转成本地日期格式
div 上设 translate="no" 的继承陷阱
translate="no" 会继承，但有硬性例外：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
-
<input value="XZ-3000">和<textarea></textarea>的value完全不继承——哪怕父div加了，也得单独在标签上写translate="no" -
<script></script>和<style></style>内部文本天然不参与翻译，加该属性纯属冗余 - 用
v-html或dangerouslySetInnerHTML渲染富文本时，translate属性仍生效，但前提是原始 HTML 字符串里已包含它——模板里写的没用 - JS 动态插入的节点（如
innerHTML或appendChild()）不会自动继承，必须手动补translate="no"
别给整个页面加 translate="no"
看似省事，实则埋 UX 雷：
立即学习“前端免费学习笔记（深入）”；
- 按钮文字如
Submit、提示文案如Invalid email全部跳过翻译，用户看到的是中文界面混着英文操作词 - 第三方组件库（如 Ant Design）输出的 DOM 可能自带
translate策略，你全局覆盖后行为不可控 - 旧版 Edge 或某些翻译插件对
支持不稳定，局部精准控制更可靠
真正该禁译的是极少数技术字符串，不是整页——先打开 Chrome DevTools → Elements 面板，查目标元素是否真被误译，再加，别预防性滥用。最容易被忽略的是动态插入内容，验证是否生效，别靠肉眼，直接看属性是否存在。
