lang属性必须写在html标签上，其他位置无效；浏览器、屏幕阅读器、搜索引擎仅在初始html解析时读取html的lang值作为整页语言基调，后续js修改document.documentelement.lang只影响新创建元素。
lang属性只能写在html>上，其他位置基本无效
浏览器、屏幕阅读器、搜索引擎只在初始 HTML 解析阶段读取 html 标签的 lang 值，作为整页语言基调。写在 body、div 或任意子元素上的 lang，对页面级语言识别毫无作用。
常见错误包括：
-
→ 翻译按钮不出现，VoiceOver 仍用中文引擎朗读英文段落 -
<div lang="ar"><p>مرحبا</p></div>→ 搜索引擎抓取时忽略该语言声明，SEO 降权 - 后端模板中动态拼接
lang="{{ locale }}"却没落在上 → 实际输出是，等于白设
局部外文内容必须显式标注，不能依赖“继承”
lang 不继承，但浏览器在渲染或语音合成时会向上查找最近一个显式声明了 lang 的祖先（含 html）。所以局部多语言混排必须手动加 lang，否则读屏软件会用主语言规则硬读。
正确做法：
- 单个术语：
<span lang="en">API</span>→ 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” - 整段引文：
<blockquote lang="fr">Merci beaucoup.</blockquote> - 代码注释：
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>（注意不是lang="python"） - 避免过度包裹：
<div lang="en"> <p>...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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></p>仍按旧语言处理断词、字体回退 - 表单 placeholder、拼写检查、
<input type="search">的搜索图标等底层行为，均基于初始解析值，无法 runtime 切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
