lang属性必须在首屏html中正确声明，js后期修改无法修复页面级语言信号，因浏览器和屏幕阅读器仅读取初始，后续更改不触发翻译、seo或语音引擎重载。
lang 属性不能靠“批量修改”来修复语义问题——它必须在首屏 HTML 中写对，JS 后期遍历改 document.querySelectorAll('[lang]') 只能补救局部混排内容，对页面级语言声明完全无效。
为什么 document.querySelectorAll('[lang]') 改不完根本问题
浏览器和屏幕阅读器只读取初始 HTML 的 ；后续 JS 修改所有带 lang 的元素，不会触发翻译按钮激活、SEO 重识别或语音引擎重载。你改了 100 个 <p lang="en"></p>，但 还是错的，整页语言信号就断了。
- 常见错误：用正则替换 HTML 文件里所有
lang="zh"→ 可能误改<meta name="description" content="lang=zh">或 JSON 字符串 - 真正要批量处理的，只有局部多语言节点（如引文、代码块），且必须保留其原始语言意图，不能一概替换成主语言
- SSR/静态站场景下，“批量修改”应发生在构建时（如模板循环注入），而非运行时
静态 HTML 文件如何安全批量替换 lang 值
适用于 Hugo/Jekyll 等静态生成器输出后、上线前的校验与修正。必须用支持 UTF-8 和 HTML 结构解析的工具，避免破坏嵌套或属性顺序。
- 推荐命令行工具：
sed -i '' 's/lang="zh"/lang="zh-CN"/g' *.html（macOS）或sed -i 's/lang="zh"/lang="zh-CN"/g' *.html（Linux），但仅限简单替换；含引号嵌套或换行时会失效 - 更稳妥做法：用 Python +
BeautifulSoup遍历并重设 —— 只改和显式带lang的语义元素（<p></p>、<blockquote></blockquote>、<pre class="brush:php;toolbar:false;"></pre>），跳过<script></script>、<textarea></textarea>内容 - 绝对禁止全局替换
lang=：可能误伤data-lang、aria-labelledby中的字符串或内联 JSON
SPA 中切换语言时如何同步更新所有 lang 属性
用户点按钮切语言，不能只改 document.documentElement.lang，还要确保已渲染的局部多语言内容不被“主语言覆盖”。关键在于区分“需随主语言变”的节点和“应保持原语言”的节点。
- 需更新的：
、<title></title>、所有带data-i18n的文案节点（它们语言随主语言走） - 应保留的：
<p lang="ja">こんにちは</p>、<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre>——这些是内容固有语言，切换成英文界面时，日文问候和 Bash 命令仍得是lang="ja"和lang="bash" - 实操建议：维护一个白名单数组，如
['html', 'title', '[data-i18n]']，用querySelectorAll()批量更新；对已带lang的节点，加逻辑判断是否属于白名单，否则跳过
容易被忽略的细节：lang 值大小写与分隔符
BCP 47 规范要求语言子标签小写、地区子标签大写、用短横线连接。写错不会报错，但等于没写——Chrome 静默降级，NVDA 拒绝加载对应语音库。
- ✅ 正确：
zh-CN、en-US、fr-FR、pt-BR - ❌ 典型错误：
zh_cn（下划线）、ZH-CN（语言码大写）、zh-Hans-CN（冗余三段式，IANA 不推荐）、Chinese（非标准字符串） - 注意：
lang="bash"是合法的——bash是注册的语言子标签（IANA），用于标记代码内容，不是“错别字”
最危险的操作，是以为“批量改完所有 lang 属性”就完成了多语言适配。实际上， 必须源头正确，局部 lang 必须语义真实，而两者之间没有自动继承或联动关系——它们各自承担不同层级的语言责任，混为一谈只会让无障碍和 SEO 同时掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
