translate属性用于控制浏览器是否对元素内容进行自动翻译。在HTML中，可以通过设置translate="no"来禁止浏览器对某个元素的内容进行自动翻译。用途：防止敏感内容被翻译：如品牌名称、专有名词、代码片段等。保持语言一致性：确保某些特定文本不被翻译，以维持页面风格或语义。提升用户体验：避免用户看到被错误翻译的术语或专业词汇。禁用自动翻译的方法：方法一：使用translate="no"属

HTML的`translate="no"`属性是Chrome浏览器唯一真正识别的禁用自动翻译方案，作为HTML5枚举属性，它仅接受字面值“yes”或“no”，作用是明确指示翻译引擎跳过该元素及其所有子节点的文本内容提取，且不影响DOM结构、布局或JavaScript执行；但其生效高度依赖三大前提：必须在初始HTML中直接声明（动态添加无效）、父级需同步设置以避免继承失效、并严格配合精确的`lang`属性（如`lang="zh-CN"`），而`meta name="google" content="notranslate"`和`class="notranslate"`仅作为兼容性补充，无法替代`translate="no"`的核心地位——掌握这些细节，才能彻底告别网页关键文本被误译的困扰。

translate="no" 是唯一被 Chrome 真正识别的禁译开关

Chrome 只认字面值 translate="no"，写成 translate="false"、translate="" 或 translate="off" 都无效。它不是布尔属性，而是 HTML5 枚举属性，合法值仅有 "yes" 和 "no" 两个字符串。

这个属性的作用很直接：告诉 Chrome 的内置翻译引擎“跳过这个元素及其所有子节点的内容”。它不改变 DOM 结构，不触发重排，也不影响 JS 执行——只影响翻译器对文本的提取逻辑。

• 覆盖整页，但要求必须写在初始 HTML 的 标签上；JS 后续修改 document.documentElement.translate 不生效
• 局部禁译时，API_KEY 比套个 更可靠——后者只是约定俗成的 class，浏览器根本不看
• 若父级已设 translate="no"，子级即使显式写 translate="yes" 也可能被忽略（Chrome 继承策略较保守）

为什么加了 translate="no" 还被翻译？检查这三处硬伤

常见失效不是属性没写，而是被更高优先级信号覆盖或漏掉关键依赖。

• 父容器没同步设 translate="no"：比如 下的
  有效，但若 没设，而

  单独设了，Chrome 仍可能因上下文语言混杂而降级处理
• 动态插入内容没补属性：用 innerHTML 或 appendChild() 加的节点，必须手动加 translate="no"，不能指望继承——DOM 插入后不自动继承父级 translate 状态
• lang 值矛盾或缺失：Chrome 先看 lang 再看 translate。若页面是中文却写 lang="en"，或只写 lang="zh"（不带区域码），它可能判定“语言不可信”，转而忽略 translate="no"

meta name="google" content="notranslate" 只管 Google 生态

这个 标签对 Chrome 浏览器内置翻译功能完全无效，它只影响：Google 搜索结果页里的“网页翻译”按钮、Google 翻译插件、以及部分第三方基于 Google API 的工具。

它必须放在 最前面，且不能写错 name：name="google" 是唯一合法值，写成 name="robots" 或 name="viewport" 就彻底失效。

• 和 translate="no" 同时存在时，Chrome 以 translate 属性为准，但 Google 插件可能只认
• 不要把它当主力方案——现代项目里， + 显式 lang="zh-CN" 已足够覆盖 95% 场景
• 服务端渲染时注意：如果 lang 是 JS 动态注入的（比如 i18n 库改 document.documentElement.lang），Chrome 读不到，等于白设

class="notranslate" 是兼容性兜底，不是首选方案

这个 class 名是历史遗留产物，源于早期 Google 工具栏时代，Chrome 内置翻译至今仍支持它，但属于“尽力而为”级别：它只阻止文本内容被翻译，对 class、id、data-* 等属性值完全无效。

比如

• 适合快速修复老项目，或作为 translate="no" 的辅助标记（便于 CSS 定义样式）
• 别在关键命名（如 BEM、CSS-in-JS 生成类名）上只依赖它——属性值污染风险真实存在
• Safari 对 class="notranslate" 支持不稳定，iOS 上尤其容易失效，必须搭配 translate="no" 使用

真正要稳，就两件事：初始 HTML 的 标签上同时写死 translate="no" 和精确 lang 值；所有动态插入的敏感文本节点，手动补 translate="no"。别省那几行 JS，浏览器不替你记这个事。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《translate属性用于控制浏览器是否对元素内容进行自动翻译。在HTML中，可以通过设置translate="no"来禁止浏览器对某个元素的内容进行自动翻译。用途：防止敏感内容被翻译：如品牌名称、专有名词、代码片段等。保持语言一致性：确保某些特定文本不被翻译，以维持页面风格或语义。提升用户体验：避免用户看到被错误翻译的术语或专业词汇。禁用自动翻译的方法：方法一：使用translate="no"属性这是一段不会被翻译的文字