translate="no" 是 html5 中唯一有效的禁译属性值，用于明确禁止浏览器自动翻译特定内容，必须显式写在目标元素上且大小写敏感；它仅影响自动翻译行为，不改变 dom 或干扰 js 执行。
translate 属性不是“让浏览器翻译”，而是明确告诉 Chrome、Edge 等浏览器的内置翻译引擎：“这段内容不准动”。它只影响自动翻译行为，不改变 DOM、不触发重排、也不干扰 JS 执行——用错地方，反而会让按钮文字、提示文案全变成英文残留。
translate="no" 是唯一有效的禁译值，大小写敏感且必须显式写
Chrome 只识别字面值 translate="no"，写成 translate="false"、translate="off"、translate="" 或 class="notranslate" 都无效。它是 HTML5 枚举属性，合法值只有 "yes" 和 "no" 两个字符串，其中 "yes" 是默认行为，不写等价于写了。
-
translate="no"必须写在目标元素上，不能靠 JS 后续赋值生效（如document.documentElement.translate = "no"无效） - 大小写必须小写：
NO、No、no（尾部空格）均不被识别 - 它不是布尔属性，不能简写为
translate（像disabled那样）
哪些内容必须加 translate="no" 才真正防住误译
不是所有英文都要拦。真正需要保护的是语义固定、大小写/符号/顺序一变就失效的内容：
- 代码标识符：
fetch()、useState、props.children—— 括号、点号、大小写错一个，JS 就报错 - API 路径与字段：
/api/v1/users/:id、X-Auth-Token、user_email—— 斜杠、冒号、下划线是协议或字段语义 - 版本号与型号：
v5.2.0、React 18.3、XZ-3000—— 数字+点一旦变成“五点二零”，就失去机器可读性 - CSS 类名与测试 ID：
class="btn-primary"、data-testid="submit-btn"—— 运行时关键字符串，改了就找不到元素 -
<time datetime="2024-06-15"></time>外层容器 —— 避免日期被转成本地格式（如“2024年6月15日”），破坏机器解析
继承规则和最容易漏掉的三个地方
translate 可继承：父元素设了 translate="no"，子元素默认也禁译；但以下三类完全不继承，必须手动补：
-
<input value="API_KEY">和<textarea>npm install -D vite</textarea>的value内容 —— 即使父级加了，也得单独加translate="no" -
<script></script>和<style></style>内部文本 —— 天然不参与翻译，加该属性纯属冗余 - JS 动态插入的节点（如
el.innerHTML = "fetch()"或document.body.appendChild(newEl)）—— 不继承，必须调用newEl.setAttribute("translate", "no")
验证是否生效，别靠肉眼：打开 Chrome DevTools → Elements 面板，直接查目标元素上是否存在 translate="no" 属性。
lang 和 translate 必须同时显式声明才可靠
lang 告诉浏览器“这是什么语言”，translate 告诉翻译工具“别碰它”——两者职责分离，不能互换，也不能省略其中一个。
- 只写
<div lang="en">React</div>→ Chrome 在中文页中仍可能把它译成“反应” - 只写
<div translate="no">React</div>→ 若页面lang缺失或错配（如lang="zh"而非lang="zh-CN"），Chrome 可能降级处理，照样翻 - 正确写法：
<div lang="en" translate="no">React</div>，语言归属 + 禁译指令都到位 -
是整页禁译最稳组合，但仅限初始 HTML 中声明；JS 后续修改无效
真正容易被忽略的，是动态内容生成路径和第三方组件输出的真实 DOM 结构——你模板里写的 translate="no"，不代表最终渲染出来的节点上还有它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
