translate="no"在现代浏览器中已基本失效，主流翻译服务完全忽略该属性；真正有效的是CSS样式干扰、data-notranslate约定、零宽空格拆分等非标准但实测可用的绕过手段。
translate 属性在现代浏览器中已基本失效
HTML 的 translate 属性（如 translate="no"）曾被部分浏览器用于提示翻译工具跳过该元素，但如今主流翻译服务（Google Translate、Edge 内置翻译、Chrome 翻译弹层）**完全忽略该属性**。它既不触发标准行为，也不受 HTML 规范强制约束——W3C 仅将其列为“可选提示”，且未定义任何实现义务。
实际生效的替代方案只有 CSS + data-* 组合
真正能稳定阻止自动翻译的，是让翻译引擎“认不出这是可翻译文本”。常见有效做法包括：
- 对需忽略翻译的文本容器添加
style="display: inline-block; unicode-bidi: embed;"—— 部分翻译器会因样式复杂化而跳过 - 用
data-notranslate属性配合内联文本包裹（如<span data-notranslate="">API_KEY</span>），虽非标准，但 Google Translate 和 Edge 当前会识别该约定 - 将关键字符串拆成多个
<span>并插入零宽空格（），例如API，干扰词边界识别 - 避免在
<meta name="description">或<title>中放需保留原文的内容——这些标签几乎总会被翻译，且无可靠屏蔽手段
Vue/React 等框架中动态内容要额外处理
框架渲染的文本节点不受静态 translate 属性影响，因为 DOM 构建后属性可能已被剥离或未同步到真实节点。更可靠的方式是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在 Vue 模板中使用
v-html渲染带data-notranslate的字符串（注意 XSS 风险） - React 中用
dangerouslySetInnerHTML注入含data-notranslate的片段 - 服务端渲染时，对敏感字段直接输出为
<code class="notranslate">{{ value }}</code>，再配合 CSS.notranslate { font-family: monospace; }强化语义暗示
Chrome 浏览器翻译弹层无法通过前端完全禁用
用户手动点击「翻译此页」时，浏览器会无视所有前端标记，强制翻译整个文档流。唯一可控点是：
立即学习“前端免费学习笔记（深入）”；
- 在
<html>标签上设置translate="no"（尽管无效），再配合lang="zh-CN"明确声明页面语言——这能降低自动触发翻译的概率，但不能阻止用户主动操作 - 检测
navigator.language与document.documentElement.lang不一致时，提示用户“当前页面为技术文档，建议关闭翻译”（纯 UI 提示，无技术拦截能力）
真正需要 100% 防翻译的场景（如密钥、命令行示例），只能靠服务端生成图片或 SVG 文本——但会牺牲可访问性与 SEO。权衡永远存在，没有银弹。
