lang属性不触发自动翻译但决定翻译模型选型；必须严格匹配bcp 47格式（如zh-cn），错误写法导致搜索引擎忽略、屏幕阅读器误读、:lang()失效；spa中需手动更新所有元素lang属性或整页刷新。
lang属性不触发自动翻译，但决定翻译模型选型
浏览器是否弹出“翻译成中文”菜单，取决于用户设置和 UA 行为，lang 属性本身不会开关翻译功能。但它直接影响翻译引擎用哪个语言模型处理文本——比如 <p lang="ja">こんにちは</p> 更可能被 Chrome 识别为日语并调用日语 NMT 模型，而不是当成乱码或误判为中文。
常见错误现象：
- 页面主体是英文，但
没改，用户点“翻译成中文”，结果浏览器先把英文原文用中文模型“翻译”一遍，再翻回英文，语义全毁 -
<pre class="brush:php;toolbar:false;" lang="bash"></pre>写成<pre class="brush:php;toolbar:false;" lang="en"></pre>，代码注释被强行翻译，变量名、命令全乱
实操建议：
- 根
的lang必须与当前渲染内容主语言严格一致；切换语言时，第一件事就是document.documentElement.lang = "en" - 局部多语言内容必须显式标注：
<blockquote lang="de"></blockquote>、<code lang="en">、<figcaption lang="fr"></figcaption> - 别用
lang="bash"这类非标准值——bash不是 BCP 47 语言标签，应改用lang="en"或留空（lang不是语法高亮开关）
BCP 47 格式写错，等于没写
写错 lang 值浏览器不报错，但等于没声明：搜索引擎忽略、屏幕阅读器朗读错、:lang(zh-CN) 样式完全不生效。
✅ 正确写法（区分大小写、短横线）：
-
zh-CN（不是zh_CN或Chinese） -
en-US（不是en-us或english） -
pt-BR（不是pt_br）
❌ 典型错误：
- 用下划线代替短横线：
zh_CN→ 浏览器静默降级为und（未知语言） - 大小写混用：
ZH-cn→ 部分 iOS VoiceOver 无法匹配语音引擎 - 三段式标签：
zh-Hans-CN→ IANA 不收录，Chrome 降级为zh
选 zh-CN 还是 zh-Hans？多数 SEO 工具、翻译插件只认 zh-CN；zh-Hans 仅当你需强调“简体字”且明确排除港澳台繁体场景时才用。
SPA 页面里只改根 lang，翻译和朗读全失效
在 React/Vue 等单页应用中，仅执行 document.documentElement.lang = "ko"，页面看起来变了，但已渲染的 DOM 不会重新触发翻译逻辑，屏幕阅读器仍用旧语言引擎朗读，:lang() CSS 也无效。
原因很直接：浏览器和辅助技术（如 NVDA、VoiceOver）在 DOM 解析初期就读取各节点自身的 lang 值，之后不再监听变更。
实操建议：
- 语言切换时，必须同时更新
document.documentElement.lang和所有含文本内容的元素上的lang属性 - 静态文案（
<h1></h1>、<p></p>、<button></button>）可批量重设lang；动态插入的内容（如 API 返回的提示语）必须在插入前就带上正确lang - 最稳妥方案仍是整页刷新：
window.location.reload()或跳转到带正确lang的 URL（如/en/页面自带）
:lang() 伪类匹配失败，常因变体不枚举
:lang(zh) 只匹配 lang="zh"，不匹配 lang="zh-CN" 或 lang="zh-Hans"；同理，:lang(en-US) 不匹配 lang="en-GB"。
这意味着你不能靠一个 :lang(zh) 覆盖所有中文变体——除非你把所有可能值都列出来：
code:lang(zh-CN), code:lang(zh-TW), code:lang(zh-HK), code:lang(zh-MO) {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
或者换更宽松策略：
- 用属性选择器替代：
[lang^="zh"]（匹配所有以zh开头的值，但注意zh-Hant也会命中） - 避免依赖
:lang()做关键字体 fallback，优先用触发浏览器默认中文字体链 - 对代码块等固定内容，直接用
lang="en"+ class 控制样式，不依赖:lang()
真正容易被忽略的点是：SPA 中即使你写了 :lang(zh-CN) { quotes: "「" "」"; }，只要对应元素没显式带 lang="zh-CN"，这条规则就永远不生效——继承来的值不参与 :lang() 匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
