结合HTML全局属性translate与后端多语言接口的自动翻译-html教程-PHP中文网

translate="no"仅控制浏览器自动翻译引擎是否处理文本，与后端接口、i18n库、api响应完全无关；它必须与lang属性共用、显式写在目标元素上，且和的value值不继承该属性，需单独设置。

结合html全局属性translate与后端多语言接口的自动翻译

translate 属性和后端多语言接口完全不打交道——它只管浏览器自动翻译引擎要不要动这段文本，对任何 API、i18n 库、服务端返回的 JSON 或模板渲染都毫无影响。

为什么`translate="no"`对后端接口返回的文案无效

后端接口（比如 /api/i18n?lang=zh-CN）返回的是原始文案字符串，前端拿到后插入 DOM 时，那段文本就“裸奔”在页面上。此时浏览器才开始扫描：有没有 translate="no"？有没有 lang？它不管这串文字是从 fetch 来的、还是 SSR 直出的、还是 localStorage 读的。

你用 el.textContent = response.message 插入 “Invalid email”，没加 translate 属性 → Chrome 看到英文 + 页面是中文环境，大概率会弹翻译提示
你手动补上 el.setAttribute('translate', 'no') → 有效，但必须在插入后立刻执行，且仅对这个元素生效
你指望后端在 JSON 里返回 {"message": "<span translate='\"no\"'>Invalid email</span>"} → 可行，但前提是前端用 innerHTML 渲染，且信任该字段内容（有 XSS 风险）

`translate` 和 `lang` 必须同时出现在同一元素上才可靠

只设 lang="en"，Chrome 仍可能把 React 翻成“反应”；只设 translate="no" 而不声明语言，某些旧版 Edge 会因语言上下文模糊而忽略指令。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

正确写法：<span lang="en" translate="no">useState</span>
动态插入时别漏掉 lang：el.lang = 'en'; el.translate = 'no';
后端若返回带语言标记的 HTML 片段（如 CMS 富文本），需确保原始字符串里已含这两个属性，前端 runtime 补不了

`<input>` 和 `<textarea></textarea>` 的 value 值不继承 `translate`，必须单独处理

这是最容易翻车的地方：父容器加了 translate="no"，里面一个 <input value="v5.2.0"> 依然可能被 Chrome 错译成“五点二零”，因为 value 是属性值，不是子节点文本，不走继承逻辑。

必须显式写：<input value="v5.2.0" translate="no">
JS 动态设置时：inputEl.value = 'X-Auth-Token'; inputEl.translate = 'no';
后端若控制表单字段占位符（如 placeholder），返回的 JSON 里不能只给字符串，得带结构：{"placeholder": {"text": "user_email", "lang": "en", "noTranslate": true}}，前端渲染时据此补属性

真正要对接后端多语言，靠的是 data-i18n、i18next 或服务端模板变量，而不是 translate。这个属性只解决一个具体问题：防止浏览器把技术字符串当自然语言乱翻。它不参与任何翻译流程，也不触发任何网络请求——写错位置、漏掉 lang、或误以为它能替代 i18n，都是线上真实发生过的故障点。