translate属性用于禁用浏览器自动翻译，不影响i18n库或API；必须加translate="no"的包括code内容、品牌名、API路径、字段名、CSS类名等；该属性可继承，但textarea/input的value、script/style内部文本除外。
translate 属性该不该加，先看浏览器怎么处理
浏览器默认会对页面文本做自动翻译提示（比如 Chrome 右键弹出“翻译成中文”），translate 属性不是用来“触发翻译”的，而是用来“告诉浏览器别碰这段内容”。它只影响自动翻译工具的行为，对 i18n 库、手动调用的翻译 API 完全无感。
常见误用是以为加了 translate="no" 就能让 Vue/React 的多语言系统跳过渲染——其实完全不相关。
哪些内容必须加 translate="no"
以下几类文本一旦被自动翻译，会直接破坏功能或可读性，建议显式声明：
<code>标签内的变量名、函数名（如useEffect、props.children）- 品牌名、产品代号、API 路径（如
/api/v2/users/:id、Stripe） - 用户生成内容的原始字段名（如表单里的
user_email字段占位符） - HTML 中内联的 CSS 类名或 data 属性（如
class="btn-primary"、data-testid="submit-btn"）
translate="no" 的作用范围和继承规则
translate 是可继承属性：父元素设为 translate="no"，其所有子节点默认也不参与翻译，除非子节点显式写 translate="yes" 覆盖。
但注意两个边界情况：
-
<textarea></textarea>和<input>的value值不受父级translate影响，需单独加属性 -
<script></script>和<style></style>标签内部文本始终不被翻译，加translate属性无效 - 若用
v-html或dangerouslySetInnerHTML渲染富文本，其中的translate属性仍生效，但需确保 HTML 字符串里已写好
Vue/React 项目中怎么批量控制
纯 HTML 写死 translate 属性没问题，但在组件化场景下容易漏。推荐策略：
- 全局文案组件（如
<i18ntext key="login.title"></i18ntext>）内部自动包裹一层<span translate="no"></span>—— 因为翻译结果已是目标语言，无需再被浏览器二次翻译 - 代码块高亮区域（如
<pre class="brush:php;toolbar:false;"><code class="js"></code>）在框架封装的 <code><codeblock></codeblock></code> 组件上直接绑定 <code>translate="no"</code></pre> - 避免在 layout 根节点写
translate="no"，否则整个页面都禁用了自动翻译，对纯静态多语言页反而有害
最常被忽略的是 SVG 内的 <text></text> 元素——它属于普通 HTML 子树，一样受 translate 控制，国际化图标旁的说明文字如果固定不变，也得加。
