直接改document.documentelement.lang无效，因浏览器和辅助技术在html解析完成时已锁定语言上下文，js后续赋值不触发重解析、语音重载、翻译按钮激活或:lang()样式重计算。
直接改 document.documentElement.lang 不会让屏幕阅读器重读、浏览器翻译按钮激活，也不会触发 :lang() 样式重新匹配——它只是个属性值，DOM 已渲染完成，没人重解析。
为什么 document.documentElement.lang = 'en-US' 无效
浏览器和辅助技术（如 NVDA、VoiceOver）只读取首屏 HTML 中的 。JS 后续赋值不会触发语音引擎重载、拼写检查切换或 SEO 信号更新。Chrome 翻译按钮不出现、:lang(zh) 规则不生效、搜索引擎忽略语言声明，都是因为这个原因。
- SSR/服务端渲染项目：必须在模板中根据
Accept-Language请求头或用户登录态注入正确值，不能等 JS 执行 - 静态站点（Hugo/Jekyll/Eleventy）：每个语言版本生成独立 HTML 文件，
lang硬编码进模板，不可 JS 动态补 - 纯前端 SPA：语言切换时应整页刷新（
window.location.href = '/en/about'），而非仅改根节点属性
lang 属性值必须严格符合 BCP 47 规范
写错不报错，但等于没写。搜索引擎跳过、屏幕阅读器误读、:lang() 完全不匹配，都源于非法格式。
- ✅ 正确：
zh-CN、en-US、pt-BR、zh-Hans（注意是短横线-，不是下划线_） - ❌ 典型错误：
zh_CN、Chinese、zh-ch、cn、zh-hans-cn（IANA 不收录三段式，Chrome 静默降级为zh） - 选
zh-CN还是zh-Hans？多数 CMS、SEO 工具、翻译插件只认zh-CN；zh-Hans仅当你需强调“简体字”且明确排除港澳台繁体场景时才用
局部多语言内容必须显式标注 lang，不能靠继承
只定义主语言，不影响内部英文引文、代码块、法语术语的识别。这些节点必须单独加 lang 属性，否则屏幕阅读器会用中文引擎硬读 API 或 curl。
-
<p lang="en">API</p>→ 不会被中文语音引擎读成“阿皮” -
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>→ 语法高亮工具和翻译功能才能正确识别（别用lang="bash"，那不是合法语言码） -
<blockquote lang="ja">ありがとう</blockquote>→ 屏幕阅读器用日语发音引擎读 - 语言切换时，必须遍历所有已带
lang属性的元素（如<p lang="en"></p>），同步更新它们的lang值，除非你明确想保留原语言（比如一段日文引用始终该是日语）
字符编码集（charset）和 lang 属性完全无关
<meta charset="UTF-8"> 是告诉浏览器用什么编码解码字节流，跟语言无关。UTF-8 能覆盖所有语言文字，不需要也不应该按语言切换 charset。
- 错误做法：
<meta charset="GBK">专用于中文 → 实际上会崩掉 emoji、日文假名、阿拉伯字母 - 正确做法：所有页面统一用
<meta charset="UTF-8">，一劳永逸
最易被忽略的一点：即使你用 JS 改了 document.documentElement.lang，也必须同步更新所有已有 lang 属性的子元素——否则辅助技术会陷入语言上下文混乱，比如父级切到英文，子元素仍带 lang="zh"，屏幕阅读器可能一半英文一半中文地读出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
