lang属性必须唯一设置在标签上，中文推荐使用zh-CN；嵌入外文需用lang="en"等显式标注子元素；JS动态修改无效，应通过SSR/SSG或整页刷新实现多语言切换。
必须写在 标签上，且只写一次；其他任何位置或写法都不可靠，屏幕阅读器、搜索引擎和浏览器翻译功能基本不会认。
lang 属性只能设在
浏览器和辅助技术（如 NVDA、VoiceOver）只在 DOM 解析初期读取 元素的 lang 值，作为整页默认语言依据。它影响发音规则、断词逻辑、标点朗读方式，甚至字体 fallback 行为。
常见错误现象：
-
→ 不被识别为文档语言，仅可能影响该内部极少数 CSS:lang()匹配 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已废弃，所有现代浏览器静默忽略 -
或（非法值）→ 被视为“未知语言”，部分读屏直接 fallback 到英文引擎
中文该用 zh-CN 还是 zh-Hans 或 zh
三者语义层级不同，实际兼容性差异明显：
立即学习“前端免费学习笔记（深入）”；
-
zh-CN：事实标准。明确“简体中文 + 中国大陆规范”，拼音方案、声调规则、词典匹配最全，NVDA/JAWS/VoiceOver 全部稳定支持 -
zh-Hans：强调“简体字”，但未绑定地域。适合港澳台用户也用简体的场景，但旧版 Safari 或某些翻译插件可能无法加载对应语音模型 -
zh：过于宽泛。不区分简繁、不指明区域，iOS VoiceOver 可能跳过中文 TTS 引擎，把“行”“长”等多音字硬读成英文音节
别写 zh_china、zh_CN、Chinese —— 全部非法，BCP 47 不认，会被静默忽略。
多语言混排时怎么让屏幕阅读器“切换语种”
主语言靠 确立，但嵌入的英文术语、日文引用、代码注释等，必须显式标注子元素的 lang，否则读屏仍用中文规则硬读：
- 单个外文词：
<span lang="en">API</span>→ 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” - 整段英文：
<p lang="en">This is a code example.</p> - 代码块注释：
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>（注意不是lang="bash"） - 避免滥用：
<div lang="en"> 包裹多个段落 —— <code><div> 无语义，读屏不把它当语言单元处理，且可能干扰父级 <code>:lang(zh)CSS 匹配JS 动态改
document.documentElement.lang几乎没用页面加载完成后修改
lang，对已激活的屏幕阅读器、已索引的搜索引擎、已解析的 CSS:lang()规则均无实际影响。SPA 多语言切换不能只靠 JS patch。真正可行的做法只有两种：
- 服务端渲染（SSR）或静态生成（SSG）：确保首屏 HTML 中
已存在，Next.js/Nuxt 需从路由或 i18n 上下文注入，而非客户端 hydrate 后补 - 整页刷新：最稳妥。哪怕只是 demo 页手动切换，也比强行 JS patch 更可靠
如果非要用 JS 改，至少同步做三件事：
document.documentElement.lang = "en-US"、遍历重设所有已渲染容器的lang属性、手动触发aria-live提示 —— 但组件内部逻辑（如日期格式、弹窗文案）不会因此响应，因为lang只管语义和可访问性，不管业务逻辑。 - 服务端渲染（SSR）或静态生成（SSG）：确保首屏 HTML 中
