lang 属性必须写在 <html> 标签上且仅一次，因其决定整页语言基准，影响语音朗读、翻译、CSS 匹配等；优先用 zh-CN，局部外语内容需显式标注 lang。
必须直接写在 <html> 标签上，且只能写一次；其他位置（<body>、<meta>、JS 动态设置）全无效。
为什么非得写在 <html> 上
浏览器、屏幕阅读器（NVDA/VoiceOver）、搜索引擎和翻译工具，只在 HTML 解析第一遍时读取 <html lang="..."> 的值，作为整页语言依据。它决定：
- 中文“行”被读成 /ʃəŋ/ 还是 /hæŋ/
- Chrome 地址栏是否出现翻译按钮
-
:lang(zh-CN)CSS 选择器能否匹配到<title>和<meta name="description">
写成 <body lang="zh-CN"> 看似合理，但 <head> 里的内容根本不继承它——<title> 就会“失语”，朗读错乱。
lang 值该填 zh-CN 还是 zh 或 zh-Hans
优先用 zh-CN：
立即学习“前端免费学习笔记（深入）”；
- 它是事实标准：拼音方案、声调模型、词典匹配最全，NVDA/JAWS/VoiceOver 全链路支持最稳
-
zh太宽泛，iOS VoiceOver 可能 fallback 到英文 TTS 引擎处理多音字 -
zh-Hans仅表示“简体字”，不绑定地域，旧版 EdgeHTML 或某些翻译插件可能加载不了对应语音库 - 非法写法：
zh_china（下划线）、Chinese（非 BCP 47）、zh-CN混用大小写（虽不报错但易引发模板不一致）
局部多语言内容怎么加 lang
根元素定主语言，嵌入的外语内容必须显式标注，否则屏幕阅读器仍用中文规则硬读：
- 单个术语：
<code lang="en">useState</code>→ 正确读作 /ˈjuːz.steɪt/ - 整段英文：
<p lang="en">This is a code example.</p> - 代码块注释：
<pre lang="en"># Initialize counter</pre>（不是lang="bash"） - 避免滥用：
<div lang="en">包裹多个段落会破坏语义层级，也干扰父级:lang(zh)的 CSS 匹配范围
动态页面里改 lang 为什么经常白忙活
辅助技术在 HTML 解析初期就读取 document.documentElement.lang，JS 后期修改对已激活的朗读会话基本无效：
- SPA 切换语言时，仅执行
document.documentElement.lang = "ja-JP"不够 - 必须同步触发
document.title = document.title（空赋值）来强制重读根节点 - 更稳妥的做法是服务端渲染时就输出正确值，比如 Next.js 在
app/layout.tsx里用<html lang={locale}>
真正难的不是设对一个 lang="zh-CN"，而是让每个动态插入、跨框架、第三方脚本生成的文本节点，都带着准确的语言上下文被解析。
