必须同步更新带lang属性的普通语义元素、技术代码块（需加data-keep-lang跳过）、引用内容三类节点，且lang值须严格符合bcp 47规范（如zh-cn），动态插入dom需手动设置，未显式声明lang不继承父级。
只改document.documentElement.lang为什么没用
浏览器和屏幕阅读器在 DOM 初次解析时就锁定每个节点的 lang 值，后续 JS 修改 document.documentElement.lang 不会触发重解析。结果就是：文字换了，但语音引擎还在用旧语言朗读，:lang(zh-CN) CSS 不生效，Chrome 翻译按钮不出现，SEO 也收不到信号。
必须同步更新哪些元素的lang属性
不是所有元素都要改，但以下三类必须显式处理：
-
<p lang="en">API</p>这类带lang的普通语义元素——除非你明确想保留英文术语，否则要同步改为当前语言（如zh-CN） -
<pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">这类技术语种——通常应加data-keep-lang标记跳过更新，避免代码块被当成中文渲染 -
<blockquote lang="ja"></blockquote>这类引用内容——若为真实日文引文，保留原lang；若是用户生成内容，则需同步更新
注意：<script></script> 和 <style></style> 内部写 lang 属性完全无效，别浪费字符。
lang值必须严格符合 BCP 47 规范
写错格式等于没写，而且不报错，静默失效：
- ✅ 正确：
zh-CN、en-US、pt-BR、zh-Hans（短横线，小写） - ❌ 典型错误：
zh_CN（下划线）、Chinese（非标准标签）、zh-ch（大小写混用）、zh-hans-cn（IANA 不收录三段式，Chrome 会降级为zh）
选 zh-CN 还是 zh-Hans？多数 SEO 工具、CMS、翻译插件只认前者；后者仅当你需排除港澳台繁体且强调“简体字”时才用。
动态插入的 DOM 怎么处理lang
AJAX 加载的弹窗、分页表格新行、懒加载模块，里面的 lang 属性不会自动继承或更新：
- 插入后必须手动遍历其子节点，对每个带
lang的元素执行el.lang = nextLang - 不能依赖
MutationObserver自动监听——它无法区分“该保留原lang”还是“该同步更新”，容易把<pre class="brush:php;toolbar:false;" lang="bash"></pre>错改成zh-CN - 如果节点本身没写
lang，但父级有（比如<section lang="en"><p>Hello</p></section>），<p></p>不会继承，必须显式补上lang="en"才能被正确识别
最常被忽略的是局部混排内容的 lang 维护——一段本该是英文的技术术语，一旦被错误覆盖成 zh-CN，标点间距、字体回退、语音朗读全会出错，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
