lang属性必须写在html标签上，其他位置无效；浏览器、屏幕阅读器、搜索引擎仅在初始HTML解析时读取html的lang值作为整页语言基调，后续JS修改document.documentElement.lang只影响新创建元素。
lang属性只能写在上，其他位置基本无效
浏览器、屏幕阅读器、搜索引擎只在初始 HTML 解析阶段读取 html 标签的 lang 值，作为整页语言基调。写在 body、div 或任意子元素上的 lang，对页面级语言识别毫无作用。
常见错误包括：
-
<body lang="en">→ 翻译按钮不出现，VoiceOver 仍用中文引擎朗读英文段落 -
<div lang="ar"><p>مرحبا</p></div>→ 搜索引擎抓取时忽略该语言声明，SEO 降权 - 后端模板中动态拼接
lang="{{ locale }}"却没落在<html>上 → 实际输出是<html><body lang="fr">，等于白设
局部外文内容必须显式标注，不能依赖“继承”
lang 不继承，但浏览器在渲染或语音合成时会向上查找最近一个显式声明了 lang 的祖先（含 html）。所以局部多语言混排必须手动加 lang，否则读屏软件会用主语言规则硬读。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 单个术语：
<span lang="en">API</span>→ 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” - 整段引文：
<blockquote lang="fr">Merci beaucoup.</blockquote> - 代码注释：
<pre lang="en"># Initialize counter</pre>（注意不是lang="python"） - 避免过度包裹：
<div lang="en"><p>...</p><p>...</p></div>→ 语义模糊，干扰 CSS 的:lang(zh)选择器匹配
值必须符合 BCP 47 规范，大小写和分隔符不能错
浏览器对 lang 值校验极严：非法格式直接静默忽略，等同于没写。
必须遵守：
- 小写字母 + 连字符：
zh-CN✅，ZH-cn❌，zh_CN❌（下划线非法） - 优先用
zh-CN：全链路兼容最稳；zh-Hans适合港澳台简体场景，但旧版 Safari 可能匹配不准；zh过于宽泛，iOS VoiceOver 可能跳过中文 TTS - 禁用非标准写法：
Chinese、zh-china、cn-zh→ 全部被忽略 - SPA 切换语言时，仅改 React state 或 Vue data 不够，必须同步执行：
document.documentElement.lang = "he-IL"
动态设置 lang 后，已挂载元素不会自动更新语言行为
HTML 解析完成之后再用 JS 修改 document.documentElement.lang，只影响后续新创建的元素（如 document.createElement("p")），对已存在的 DOM 节点无效果——它们的语言上下文在首次渲染时就已锁定。
这意味着：
- 首屏 HTML 中未设
lang，JS 后续补上也救不回 SEO 和初始语音合成 - SSR 页面若漏传 locale，客户端 hydration 后改
lang，已渲染的<p>仍按旧语言处理断词、字体回退 - 表单 placeholder、拼写检查、
<input type="search">的搜索图标等底层行为，均基于初始解析值，无法 runtime 切换
