lang属性必须写在<html>标签上且用BCP 47格式（如zh-CN），因浏览器和屏幕阅读器仅在解析初期读取该值以加载语音库、决定翻译与SEO，其他位置或非法值将导致语音误读、翻译按钮消失、SEO报错等问题。
必须写在 <html> 标签上，且值必须是像 zh-CN 或 en-US 这样的 BCP 47 合规格式；其他位置或非法值等于没设，还会引发语音误读、翻译按钮消失、SEO 报错等问题。
为什么只能写在 <html> 标签上
浏览器和屏幕阅读器（如 NVDA、VoiceOver）只在解析 HTML 字符串的最初几毫秒内读取 <html lang="zh-CN">，并据此加载中文语音库、切分音节、匹配词典、决定是否显示 Chrome 翻译按钮。这个时机早于 <body> 渲染、早于 JS 执行、早于任何 CSS 解析。
常见无效写法包括：
-
<body lang="zh-CN">：仅影响该元素内极少数 CSS:lang()匹配和断词，不改变页面级语言 -
<meta http-equiv="Content-Language" content="zh-CN">：HTML5 已废弃，所有现代浏览器完全忽略 -
document.documentElement.lang = "zh-CN"（JS 设置）：DOM 已挂载，语音引擎不重载，翻译按钮不刷新，CSS 伪类不重计算
lang 值怎么写才不被当成错误
BCP 47 规范对大小写、连字符、子标签顺序有严格语义要求；非法值（如 zh_china、Chinese、zh）会被静默忽略，等同于未声明语言。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- 简体中文页用
zh-CN（不是zh或zh-Hans）：兼容性最稳，拼音、声调、标点排版、搜索引擎识别全支持 - 繁体中文页按地区选
zh-TW（台湾）或zh-HK（香港），不能混用 - 英文页必须用
en-US或en-GB；english、en_US（下划线）、EN-us（大小写错位）全部非法 - 法语、葡萄牙语等小语种对大小写敏感：
fr-FR合法，FR-fr不合法 - 绝对避免
lang=""：明确告诉辅助工具“语言未知”，可能导致整页按英文规则朗读中文多音字
多语言混排时如何让 lang 真正起作用
主语言由 <html lang="zh-CN"> 决定，但嵌入的英文术语、日文引用、代码注释等内容，必须显式标注子元素的 lang，否则屏幕阅读器仍会用中文规则硬读。
正确做法：
- 单个外文词：
<span lang="en">API</span>→ 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” - 整段英文：
<p lang="en">This is a code example.</p> - 引文类语义更强：
<blockquote lang="fr">…</blockquote>、<q lang="ja">…</q> - 双向文本（如阿拉伯语）必须同时加
dir：<p lang="ar" dir="rtl">مرحبا</p>
注意：<title> 无法嵌套标签，若含多语言文本（如 title="English | 中文"），只能整体按 <html lang="zh-CN"> 处理，无完美解法。
动态页面（React/Vue/SSR）怎么安全设 lang
客户端渲染（CSR）无法靠 JS 补救——首屏 HTML 中 <html lang="en"> 是错的，后续所有链路（语音、翻译、SEO）都已失效。
必须在服务端或静态生成阶段注入真实语言值：
- Next.js：在
app/layout.tsx中通过localeprop 注入，确保 SSR 输出<html lang="en-US"> - Nuxt：用
useLocaleHead()，它会在 HTML 源头写入正确lang - 纯前端 SPA：若支持多语言，必须产出多个不同
lang的 HTML 入口文件（SSG），不能靠 JS patch
最容易被忽略的是：用户切换语言后，只改文案不改 <html lang>，会导致屏幕阅读器继续用旧语音引擎朗读，甚至触发 Chrome 把中文页强行翻成英文——它信了你写的 lang="en"，哪怕页面全是汉字。
