浏览器自动翻译HTML页面是因lang属性或Content-Language头缺失/不匹配导致误判；可通过html标签设translate="no"禁用整页翻译，或对局部元素设translate="no"控制，同时必须配合准确的lang值（如zh-CN）减少歧义。
为什么浏览器会自动翻译你的HTML页面
浏览器（尤其是Chrome）会根据页面语言与用户系统语言的差异，主动触发翻译提示。它主要依赖 lang 属性和 HTTP Content-Language 响应头判断页面语言。如果缺失或不匹配，就容易误判——比如中文页面没声明 lang="zh-CN"，而用户系统是英文，Chrome 就可能弹出“是否翻译此页”。
用 translate 属性禁用整页翻译
这是最直接、兼容性最好的方式，在 <html> 标签上加 translate="no" 即可：<html lang="zh-CN" translate="no">
这个属性被 Chrome、Edge、Firefox（117+）支持，且优先级高于 lang。注意：translate="no" 作用于整个文档，子元素即使显式设为 translate="yes" 也无效（除非 JS 动态覆盖）。
- 不要写成 translate="false" —— 只接受 "yes" 或 "no" 字符串
- 如果页面含多语言片段（如嵌入英文术语），又想局部启用翻译，得改用更细粒度控制（见下一条）
用 translate 属性控制局部内容
当只需屏蔽部分文本（如品牌名、代码块、日期格式），给对应元素加 translate="no"：<p>欢迎使用 <span translate="no">MyApp</span>！</p>
- <code>、<pre>、<kbd> 等语义化标签默认被浏览器视为不可翻译，但加 translate="no" 更稳妥
- 避免在 <meta> 或 <script> 中滥用该属性——它只对渲染文本生效，对属性值、JS 字符串无效
- 注意：若父元素设了 translate="no"，子元素设 translate="yes" 会被忽略（继承规则严格）
配合 lang 属性减少误判
单纯靠 translate 有时不够，尤其当页面语言和用户语言接近（如简体中文 vs 繁体中文用户）。必须显式声明准确语言：<html lang="zh-Hans">
- 用 zh-CN 或 zh-Hans 表示简体中文，zh-TW 或 zh-Hant 表示繁体中文
- 避免只写 lang="zh" —— 过于宽泛，浏览器可能无法精准匹配用户设置
- 如果页面实际混用中英文，且希望英文部分可译、中文部分不译，需分段标记：<div lang="zh-CN" translate="no">产品名称</div><div lang="en" translate="yes">Product Name</div>
translate 属性禁用整页翻译
这是最直接、兼容性最好的方式，在 <html> 标签上加 translate="no" 即可：<html lang="zh-CN" translate="no">这个属性被 Chrome、Edge、Firefox（117+）支持，且优先级高于
lang。注意：translate="no" 作用于整个文档，子元素即使显式设为 translate="yes" 也无效（除非 JS 动态覆盖）。
- 不要写成 translate="false" —— 只接受 "yes" 或 "no" 字符串
- 如果页面含多语言片段（如嵌入英文术语），又想局部启用翻译，得改用更细粒度控制（见下一条）
用 translate 属性控制局部内容
当只需屏蔽部分文本（如品牌名、代码块、日期格式），给对应元素加 translate="no"：<p>欢迎使用 <span translate="no">MyApp</span>！</p>
- <code>、<pre>、<kbd> 等语义化标签默认被浏览器视为不可翻译，但加 translate="no" 更稳妥
- 避免在 <meta> 或 <script> 中滥用该属性——它只对渲染文本生效，对属性值、JS 字符串无效
- 注意：若父元素设了 translate="no"，子元素设 translate="yes" 会被忽略（继承规则严格）
配合 lang 属性减少误判
单纯靠 translate 有时不够，尤其当页面语言和用户语言接近（如简体中文 vs 繁体中文用户）。必须显式声明准确语言：<html lang="zh-Hans">
- 用 zh-CN 或 zh-Hans 表示简体中文，zh-TW 或 zh-Hant 表示繁体中文
- 避免只写 lang="zh" —— 过于宽泛，浏览器可能无法精准匹配用户设置
- 如果页面实际混用中英文，且希望英文部分可译、中文部分不译，需分段标记：<div lang="zh-CN" translate="no">产品名称</div><div lang="en" translate="yes">Product Name</div>
lang 属性减少误判
单纯靠 translate 有时不够，尤其当页面语言和用户语言接近（如简体中文 vs 繁体中文用户）。必须显式声明准确语言：<html lang="zh-Hans">- 用
zh-CN 或 zh-Hans 表示简体中文，zh-TW 或 zh-Hant 表示繁体中文
- 避免只写 lang="zh" —— 过于宽泛，浏览器可能无法精准匹配用户设置
- 如果页面实际混用中英文，且希望英文部分可译、中文部分不译，需分段标记：<div lang="zh-CN" translate="no">产品名称</div><div lang="en" translate="yes">Product Name</div>
真正起效的关键不在“加一个属性”，而在 lang 和 translate 的组合是否明确、无歧义。很多开发者只加 translate="no" 却忽略 lang，结果在某些地区或旧版浏览器里仍被翻译——因为浏览器根本不确定这页到底是什么语言。
