浏览器自动翻译html页面是因lang属性或content-language头缺失/不匹配导致误判；可通过html标签设translate="no"禁用整页翻译，或对局部元素设translate="no"控制，同时必须配合准确的lang值（如zh-cn）减少歧义。

为什么浏览器会自动翻译你的HTML页面 浏览器（尤其是Chrome）会根据页面语言与用户系统语言的差异，主动触发翻译提示。它主要依赖 lang 属性和 HTTP Content-Language 响应头判断页面语言。如果缺失或不匹配，就容易误判——比如中文页面没声明 lang="zh-CN"，而用户系统是英文，Chrome 就可能弹出“是否翻译此页”。

用 translate 属性禁用整页翻译 这是最直接、兼容性最好的方式，在 标签上加 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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
														src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
													<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

- <code>、<pre class="brush:php;toolbar:false;"></pre>、<kbd></kbd> 等语义化标签默认被浏览器视为不可翻译，但加 translate="no" 更稳妥 - 避免在 <meta> 或 <script></script> 中滥用该属性——它只对渲染文本生效，对属性值、JS 字符串无效 - 注意：若父元素设了 translate="no"，子元素设 translate="yes" 会被忽略（继承规则严格）

配合 lang 属性减少误判 单纯靠 translate 有时不够，尤其当页面语言和用户语言接近（如简体中文 vs 繁体中文用户）。必须显式声明准确语言：

- 用 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，结果在某些地区或旧版浏览器里仍被翻译——因为浏览器根本不确定这页到底是什么语言。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！