lang属性必须写在<html>标签上才有效，其他位置如<body>、<div>或<meta>均无效；值需符合BCP 47规范（如zh-CN），错误格式将被静默忽略；动态修改document.documentElement.lang无法更新已加载页面的语言上下文。
lang属性写在或里为什么无效浏览器、屏幕阅读器（NVDA/VoiceOver）、搜索引擎只在解析初始 HTML 时读取 <html> 标签上的 lang 属性，作为整页语言依据。其他位置的声明等于没写：
-
<body lang="zh-CN"> → 不被识别为文档语言，CSS 的 :lang(zh) 不匹配，Chrome 翻译按钮不出现
-
<div lang="en"> → 语义缺失，读屏软件不把它当语言单元，可能硬用中文规则朗读英文词
-
<meta http-equiv="Content-Language" content="zh-CN"> → HTML5 已弃用，所有现代浏览器忽略
检查方式：打开开发者工具，直接看 document.documentElement.lang 的值；若为空、错位或非法，就说明根标签没设对。
lang值写成zh_CN、Chinese、cn会怎样
BCP 47 规范要求小写字母 + 短横线（-），且必须是 IANA 注册的合法子标签。写错不会报错，但等于白写：
-
zh_CN、zh-china、Chinese → 静默忽略，Google Search Console 可能报“未指定语言”
-
zh-hans-cn → 三段式不被 IANA 收录，Chrome 会静默降级为 zh，导致断词、字体 fallback 失效
-
zh → 过于宽泛，iOS VoiceOver 可能跳过中文 TTS 引擎，把“长”读成 /tʃæŋ/
✅ 正确写法只有：zh-CN（推荐，默认兼容性最佳）、en-US、ja-JP、pt-BR、zh-Hans（仅当你需强调简体字且明确排除繁体场景）。
立即学习“前端免费学习笔记（深入）”；
动态切换语言时只改document.documentElement.lang = "en-US"不够
JS 修改 lang 属性只是改了个 DOM 属性值，但辅助技术已在首屏解析阶段锁定了语言上下文，后续修改基本无效：
- 已激活的 VoiceOver/NVDA 会继续用原语言引擎朗读
- Chrome 翻译按钮不会刷新或重新激活
- CSS
:lang(en) 规则不会重计算，样式不生效
- SEO 和可访问性树不会更新
真正有效的做法分场景：
- SSR（如 Next.js）：在服务端模板中注入，例如
<html lang={locale}>
- 静态站（Hugo/Jekyll）：每个语言版本生成独立 HTML，
lang 硬编码进模板
- 纯前端 SPA：语言切换后必须整页刷新（
window.location.href = "/en/"），或重写 document.documentElement.outerHTML（但 ARIA 缓存清不干净，慎用）
局部多语言内容不显式标注lang，屏幕阅读器照样硬读错
<html lang="zh-CN"> 只定义主语言，不影响内部外文内容的语音引擎选择。不标注，就会出现：
-
<p>API</p> → 被中文引擎硬读成“阿皮”
-
<pre>curl -X POST</pre> → 语法高亮工具无法识别上下文，翻译功能失效
-
<blockquote>Bonjour</blockquote> → 读作中文音，不是法语发音
正确做法是为有明确语义的外文节点显式加 lang：
<p lang="en">This is a code example.</p>-
<pre lang="en"># Initialize counter</pre>（注意不是 lang="bash"）
<blockquote lang="fr">Je suis français.</blockquote><code lang="en">useState</code>
别给每个单词都加 lang，DOM 体积增大，可访问性树构建变慢；只标注语义清晰、需特殊处理的片段。
浏览器、屏幕阅读器（NVDA/VoiceOver）、搜索引擎只在解析初始 HTML 时读取 <html> 标签上的 lang 属性，作为整页语言依据。其他位置的声明等于没写：
-
<body lang="zh-CN">→ 不被识别为文档语言，CSS 的:lang(zh)不匹配，Chrome 翻译按钮不出现 -
<div lang="en">→ 语义缺失，读屏软件不把它当语言单元，可能硬用中文规则朗读英文词 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已弃用，所有现代浏览器忽略
检查方式：打开开发者工具，直接看 document.documentElement.lang 的值；若为空、错位或非法，就说明根标签没设对。
lang值写成zh_CN、Chinese、cn会怎样
BCP 47 规范要求小写字母 + 短横线（-），且必须是 IANA 注册的合法子标签。写错不会报错，但等于白写：
-
zh_CN、zh-china、Chinese→ 静默忽略，Google Search Console 可能报“未指定语言” -
zh-hans-cn→ 三段式不被 IANA 收录，Chrome 会静默降级为zh，导致断词、字体 fallback 失效 -
zh→ 过于宽泛，iOS VoiceOver 可能跳过中文 TTS 引擎，把“长”读成 /tʃæŋ/
✅ 正确写法只有：zh-CN（推荐，默认兼容性最佳）、en-US、ja-JP、pt-BR、zh-Hans（仅当你需强调简体字且明确排除繁体场景）。
立即学习“前端免费学习笔记（深入）”；
动态切换语言时只改document.documentElement.lang = "en-US"不够
JS 修改 lang 属性只是改了个 DOM 属性值，但辅助技术已在首屏解析阶段锁定了语言上下文，后续修改基本无效：
- 已激活的 VoiceOver/NVDA 会继续用原语言引擎朗读
- Chrome 翻译按钮不会刷新或重新激活
- CSS
:lang(en)规则不会重计算，样式不生效 - SEO 和可访问性树不会更新
真正有效的做法分场景：
- SSR（如 Next.js）：在服务端模板中注入，例如
<html lang={locale}> - 静态站（Hugo/Jekyll）：每个语言版本生成独立 HTML，
lang硬编码进模板 - 纯前端 SPA：语言切换后必须整页刷新（
window.location.href = "/en/"），或重写document.documentElement.outerHTML（但 ARIA 缓存清不干净，慎用）
局部多语言内容不显式标注lang，屏幕阅读器照样硬读错
<html lang="zh-CN"> 只定义主语言，不影响内部外文内容的语音引擎选择。不标注，就会出现：
-
<p>API</p>→ 被中文引擎硬读成“阿皮” -
<pre>curl -X POST</pre>→ 语法高亮工具无法识别上下文，翻译功能失效 -
<blockquote>Bonjour</blockquote>→ 读作中文音，不是法语发音
正确做法是为有明确语义的外文节点显式加 lang：
<p lang="en">This is a code example.</p>-
<pre lang="en"># Initialize counter</pre>（注意不是lang="bash"） <blockquote lang="fr">Je suis français.</blockquote><code lang="en">useState</code>
别给每个单词都加 lang，DOM 体积增大，可访问性树构建变慢；只标注语义清晰、需特殊处理的片段。
