translate属性有什么用？HTML阻止自动翻译功能解析-html教程-PHP中文网

chrome仅识别字面值translate="no"，它是html5枚举属性（合法值仅"yes"/"no"），作用是阻止翻译器提取该元素及子节点文本，不改变dom或js执行；需在初始html的标签声明，动态插入内容须手动添加，且需配合精确lang值（如lang="zh-cn"）才能可靠生效。

translate属性有什么用？html阻止自动翻译功能解析

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

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

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

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

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

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

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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

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

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

比如 <div class="c-button--primary" translate="no">Submit</div> 能保 class 不变；而仅靠 class="notranslate"，Chrome 仍可能把 c-button--primary 当作英文单词尝试翻译成 “提交按钮--主要”。