lang属性必须正确设置bcp 47标准值（如zh-cn），错误写法如zh会导致浏览器降级为und而误译；嵌入外语需局部声明lang并配合translate="no"才可靠禁译。
lang 属性本身不阻止翻译，但写错或漏写，就会让 Chrome 翻译插件乱翻、误判、甚至跳过提示——问题根源不在“要不要翻”，而在“它以为你在说什么语言”。
为什么写了 lang="zh" 还被当成英文翻
Chrome 不分析文字内容，只信任 lang 值。写 lang="zh" 是非法 BCP 47 标签，浏览器静默降级为 und（未知语言），接着把整页当“语言不可信”处理：可能跳过翻译提示，也可能把中文当英文强行翻成“we chat”。
- ✅ 正确写法：
lang="zh-CN"（简体）、lang="zh-TW"（繁体）、lang="en-US" - ❌ 错误写法：
lang="zh"、lang="zh_CN"、lang="Chinese" - ⚠️ 特别注意：
lang="zh"在部分旧版插件中会 fallback 到粤语引擎，普通话内容被粤语朗读+翻译
双语混排时，lang 必须局部声明
根元素的 lang 只设默认值，对嵌入的外语片段无效。比如 <p>排序 sort</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，若没给 sort 单独加 lang="en"，Chrome 就按父级 lang="zh-CN" 处理整段，可能把 “sort” 当作待译中文词，翻成“排序”再翻回英文，形成死循环。
- 正确做法：
<p lang="zh-CN">排序 <span lang="en">sort</span></p> - 代码块必须显式标注：
<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre>（虽然bash非标准，但主流工具识别） <code>标签本身不带语言语义，需补lang="en"或lang="zh"才能隔离翻译上下文
translate="no" 必须和 lang 一起用才稳
只写 translate="no" 不够，只写 lang="en" 也不够。Chrome 要同时确认“这是什么语言”+“不准动”，才会真正跳过。比如按钮里写 React 18.3，单独加 translate="no" 可能因页面 lang 缺失而失效；单独写 lang="en" 又可能被翻成“反应 18.3”。
- ✅ 稳妥写法：
<button>Upgrade to <span lang="en" translate="no">React 18.3</span></button> -
<input value="v5.2.0">的value不继承父级translate，必须直接写：<input value="v5.2.0" translate="no"> - 动态插入的节点（如 React
map渲染后）必须手动调用el.setAttribute("translate", "no")，JS 后改lang对 Chrome 翻译无意义
验证是否真生效，不能只看页面渲染
右键菜单里“翻译成…”变灰、或没弹浮层，都不代表禁译成功——Chrome 可能延迟应用策略，也可能跳过检测。
- 打开 Chrome DevTools → Elements 面板，检查目标元素上是否真实存在
translate="no"属性，且没有被 JS 动态移除 - 在地址栏输入
chrome://settings/languages，关闭「提供网页翻译」再开回来，强制重载翻译策略缓存 - 服务端没输出正确
lang，JS 后续 patch 是徒劳的；动态语言切换必须从 SSR 或 HTML 模板层介入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
