translate="no" 是 w3c 标准属性，向主流翻译工具发出不译提示，但非强制；chrome 等通过遍历 dom 识别并跳过该元素及其子节点文本，不生效于 script、data- 属性及 css 伪元素。
translate="no" 属性不能阻止机翻，只能向翻译工具发出“建议不译”的信号；它对 Chrome 内置翻译、Google 翻译 API、DeepL 等多数主流工具有效，但效果取决于工具是否尊重该提示。
translate="no" 是怎么被翻译工具识别的
Chrome 浏览器在右键“翻译成中文”或自动触发翻译时，会遍历 DOM，检查每个元素是否带有 translate="no"。如果命中，就跳过该元素及其所有子节点的文本内容（包括 textContent 和 alt、title 等可翻译属性值）。
注意：它不修改 HTML 结构，也不加密文本，只是提供语义提示。部分轻量级爬虫式翻译服务（如某些 Python + BeautifulSoup 的简易脚本）可能完全忽略该属性。
- 生效范围：仅对支持 W3C HTML5 规范的翻译工具起作用
- 不生效场景：
<script></script>里的字符串、data-自定义属性、CSScontent伪元素生成的内容 - 继承行为：子元素默认继承父元素的
translate值，除非显式覆盖
与 class="notranslate" 的实际差异
class="notranslate" 是 Google 翻译服务（包括 Chrome 和 translate.google.com）专有的约定，不是标准 HTML 属性。它的优先级略低于 translate="no"，但兼容性更广——部分旧版 Chrome 或第三方插件只认这个 class。
-
<p translate="no">React.useState</p>：W3C 标准，现代浏览器和主流翻译服务都支持 -
<span class="notranslate">v1.2.0</span>：Google 系统级识别，但其他工具（如 Microsoft Edge 翻译）可能无视 - 两者可共存：
<code translate="no" class="notranslate">fetch()是稳妥写法 - 不要只依赖 class：某些 SSR 框架（如 Next.js）在服务端预渲染时不会处理 class 逻辑，但会保留
translate属性
常见失效原因和绕过陷阱
即使写了 translate="no"，仍可能被翻，问题往往出在 DOM 构建时机或属性位置上。
- 动态插入的元素没带该属性：用 JS 创建的
document.createElement('p')后，必须手动el.setAttribute('translate', 'no') - 写在错误标签上：比如给
<pre class="brush:php;toolbar:false;"></pre>加了translate="no"，但里面嵌套的<code>子元素含英文注释，而注释在textContent中——只要父级设了translate="no"，整段都会跳过，这点没问题；但若误写成<code translate="no"><span>API</span>，则<span></span>会继承，依然安全 - lang 属性冲突：如果某段文字同时有
lang="en"又加了translate="no"，Chrome 仍会跳过翻译；但若lang值非法（如lang="english"），部分工具可能降级为按页面根语言处理，导致translate="no"被忽略 - SSR/ hydration 不一致：React/Vue 服务端渲染时未同步输出
translate属性，客户端 hydrate 后才补上，中间窗口期可能被翻译工具抓取原始 DOM
比 translate="no" 更可靠的替代方案
当内容极其敏感（如密钥、内部版本号、法律条款原文），单靠 translate="no" 不够稳。需要组合手段：
- 用
<pre class="brush:php;toolbar:false;" lang="bash">curl -H "X-Key: abc123"</pre>配合正确的lang值，比纯translate="no"多一层语义锚定 - 把关键字符串从 HTML 移到 JS 变量中，再用
textContent注入，避免静态文本出现在源码里 - 对极小片段（如图标旁的 “Beta” 文字），改用 SVG
<text></text>或 base64 编码的图片，彻底脱离文本范畴 - 服务器端根据 User-Agent 或 Accept-Language 头，直接不返回需保护的字段（适用于 API 驱动的页面）
真正容易被忽略的是：translate 属性本身不解决“翻译工具是否可信”的问题。它只是个提示，不是门禁。如果你的内容一旦被译错就会引发法律风险，就得把关键文本从客户端交付链路里摘出去——而不是在 HTML 里打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
