必须写在<html>标签上且值严格符合BCP 47规范（如zh-CN），因浏览器、屏幕阅读器、Chrome翻译按钮和Google搜索引擎仅在HTML解析最初阶段读取该值，<body>、<meta>或JS修改均无效；中文首选zh-CN以保障全链路兼容性。
必须写在 <html> 标签上，且值要严格符合 BCP 47 规范（如 zh-CN），其他位置或写法基本无效。
为什么只认 <html lang="xxx">？
浏览器、屏幕阅读器（NVDA/VoiceOver）、Chrome 翻译按钮、Google 搜索引擎，全部只在 HTML 解析最初阶段读取 <html> 的 lang 值。这个时机一过，后续任何修改都“晚了”。
常见错误现象包括：
-
<body lang="zh-CN">：对页面级语言声明完全无效，<title>和<meta name="description">不继承它 -
<meta http-equiv="Content-Language" content="zh-CN">：HTML5 已废弃，所有现代浏览器静默忽略 -
document.documentElement.lang = "en-US"（JS 执行）：已激活的语音朗读不会切换，CSS:lang()不重匹配，翻译按钮不出现
zh-CN、zh-Hans、zh 到底该用哪个？
优先选 zh-CN——它是事实标准，覆盖拼音、声调、词典、标点排版最全，NVDA/JAWS/VoiceOver/Chrome 全链路兼容性最稳。
立即学习“前端免费学习笔记（深入）”；
其他选项的问题：
-
zh-Hans：只声明“简体字”，未绑定地域，部分旧版 Edge 或翻译插件可能无法加载对应语音库 -
zh：太宽泛，iOS VoiceOver 可能 fallback 到英文 TTS 引擎，把“行”读成 /hæŋ/；Google Search Console 可能报“未指定语言” -
zh_china、zh-CN（大写 C/N）、Chinese：全部非法，BCP 47 要求小写+短横线，这些会被静默忽略
多语言混排时怎么加 lang？
<html lang="zh-CN"> 只管主语言，嵌入的外文内容必须显式标注子元素 lang，否则屏幕阅读器仍用中文规则硬读。
正确做法：
- 单个术语：
<p>调用 <code lang="en">API→ 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” - 整段英文：
<p lang="en">This is a code example.</p> - 代码注释：
<pre lang="en"># Initialize counter</pre>（注意不是lang="bash"） - 引文类语义更可靠：
<blockquote lang="ja">こんにちは</blockquote>
避免滥用：<div lang="en"> 包裹多个段落会破坏语义层级，也干扰父级 :lang(zh) 的 CSS 匹配范围。
动态页面（React/Vue/SSR）怎么安全设 lang？
关键原则：不能靠 JS 补救，必须在首屏 HTML 字符串中就写对。
实操建议：
- Next.js：在
app/layout.tsx中用<html lang={locale}>，locale来自路由参数或配置，确保 SSR 输出真实值 - Nuxt：用
useLocaleHead()，它会在<head>注入<html lang="xx">，但必须确认输出在首屏 HTML 中 - 纯前端 SPA：语言切换时，强制整页刷新（
window.location.href）是最稳妥的；重写document.documentElement.outerHTML有 ARIA 缓存残留风险，不推荐
容易被忽略的一点：语言切换后，不仅要改 <html lang>，还要同步更新所有已带 lang 的子元素（比如 <p lang="en">），除非你明确想保留原语言（如一段日文引用始终该是日语）。
