网页多语言切换必须在服务端或首屏HTML中正确设置lang属性，JS动态修改无效；lang值须符合BCP 47规范（如zh-CN），区分大小写和短横线；局部混排需显式标注lang；:lang()样式需枚举所有可能变体或简化策略。
网页支持多语言切换，不能只靠 JS 改 document.documentElement.lang —— 那只是改了根标签的值，已渲染的文本、屏幕阅读器、浏览器翻译和 CSS :lang() 伪类都不会重新响应。
必须在服务端或首次 HTML 中写对 lang 值
浏览器和辅助技术（如 NVDA、JAWS）只读取初始 HTML 的 <html lang="zh-CN">，后续用 JS 赋值不会触发语音引擎重载或翻译按钮激活。动态站点（React/Vue SSR）必须在服务端吐出的首屏 HTML 里就带正确 lang，否则无障碍功能从一开始就是错的。
- SSR 页面：根据请求头
Accept-Language或用户登录态，在模板中注入<html lang="ja-JP"> - 静态生成站点（Hugo/Jekyll）：每个语言版本生成独立 HTML 文件，
lang硬编码进模板，不依赖 JS - 纯前端 SPA：语言切换时强制整页刷新（
window.location.href），或至少触发document.documentElement.outerHTML重写并清空 ARIA 缓存（但兼容性差，不推荐）
lang 值必须符合 BCP 47，且区分大小写和分隔符
写错 lang 不报错，但等于没写——搜索引擎忽略、屏幕阅读器朗读错、:lang(zh) { quotes: "「" "」"; } 样式完全不生效。
- ✅ 正确写法：
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，不能靠继承
<html lang="zh-CN"> 只定义主语言，不影响内部英文引文、代码块、法语术语的识别。屏幕阅读器、Chrome 翻译、拼写检查都依赖具体元素上的 lang 属性。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 英文代码注释：
<pre lang="en"># Initialize counter</pre>（别用lang="bash"，那不是合法语言码） - 日文引用：
<blockquote lang="ja">ありがとう</blockquote> - 中英混排段落里，英文部分单独包裹：
<p>我们使用 <span lang="en">React Router</span> 实现路由</p> - 避免给
<div>批量加lang覆盖子元素——语义不清，且可能干扰父级:lang()样式匹配
:lang() 伪类样式要小心匹配逻辑
CSS 的 :lang(zh) 只匹配 lang="zh"，不匹配 lang="zh-CN"；而 :lang(zh-CN) 也不匹配 lang="zh-Hans"。想覆盖所有中文变体，得写全：
/* 这样才能覆盖 zh, zh-CN, zh-TW, zh-Hans, zh-Hant */
:lang(zh), :lang(zh-CN), :lang(zh-TW), :lang(zh-Hans), :lang(zh-Hant) {
font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif;
}更稳妥的做法是：主语言用 zh-CN，局部切换只用 en、ja、ko 这类无地域后缀的通用码，降低 CSS 维护成本。
最容易被忽略的是：页面加载后，即使你用 JS 把所有 lang 属性都改了，已激活的屏幕阅读器也不会重读——它只认初始 DOM。所以语言切换不是“换皮肤”，而是“换语境”，得从 HTML 根上重建。
