最准确方式是在需保护元素上直接加 translate="no"；适用于技术术语、品牌名、版本号、代码块、时间字符串等不需翻译的内容，注意避免全页设置、勿冗余写 yes、区分 lang 与 translate 作用。
直接在需要保护的元素上加 translate="no" 即可，这是最准确、语义最清晰的方式。
哪些内容该标 translate="no"
专有名词本身不随语言变化，翻译反而会破坏准确性或可读性。典型包括：
- 技术术语和 API 名称：
<code translate="no">fetch()</code>、<code translate="no">useState</code> - 品牌名与产品名：
<span translate="no">React</span>、<span translate="no">Vite</span> - 版本号与标识符：
v5.2.0、abc123-token、/api/v1/users/:id - 代码块与命令行：
<pre translate="no"><code>npm install -D vite</code></pre> - 时间字符串（避免被转成本地格式）：
<time datetime="2024-06-15" translate="no">2024/06/15</time>
怎么写才有效又不踩坑
关键不是“标得全”，而是“标得准”。注意以下几点：
- 不用给整个页面加 translate="no"——否则按钮文字、提示文案等本该本地化的内容也会被跳过
- translate="yes" 不用显式写——浏览器默认就是 yes，加了纯属冗余
-
lang 和 translate 各管各的事：
lang="zh-CN"表示当前语言是中文，translate="no"才表示“别翻这个词”，两者不能互相替代 - 第三方组件可能自带 translate 属性——要检查实际渲染出的 DOM，不能只看模板源码
它真的能阻止翻译吗
对主流浏览器内置翻译（如 Chrome、Edge 翻译栏）和多数翻译插件来说，translate="no" 是被尊重的信号，效果稳定。但需注意：
立即学习“前端免费学习笔记（深入）”；
- 它不是强制指令，而是建议；极少数轻量级翻译工具可能忽略
- 若内容被包裹在未设 translate 的父容器中，子元素单独设 no 依然生效
- 如果父元素设了
translate="no"，子元素想破例可译，才需要显式写translate="yes"（极少用到）
