必须在<html>标签上写lang属性，因为浏览器和屏幕阅读器（如VoiceOver、NVDA、JAWS）仅在HTML解析第一刻读取该值以初始化语音引擎；其他位置（如<body>、<meta>或JS动态设置）均无效，且lang值须严格符合BCP 47标准（如zh-CN），否则导致发音错误、SEO降权及翻译混乱。
必须在 <html> 标签上写 lang，否则屏幕阅读器根本不会按你期望的语言读页面。
为什么只认 <html lang="zh-CN">？
浏览器和 VoiceOver/NVDA/JAWS 这些辅助技术，在解析 HTML 的第一刻就锁定 <html> 的 lang 值，用它初始化语音引擎。之后任何修改都无效：
-
<body lang="zh-CN">→ 不影响整页语言，只对极少数子元素断词有微弱作用 -
document.documentElement.lang = "en-US"（JS 执行）→ 语音引擎不重载，:lang()CSS 不重算，翻译按钮不刷新 -
<meta http-equiv="Content-Language">→ HTML5 已弃用，所有现代浏览器忽略
lang 值怎么写才不翻车？
错标比不标更危险：中文被逐字拼读、英文单词读成“阿皮”、SEO 降权、翻译推荐错乱。关键点：
- 主语言优先用
zh-CN，不是zh、zh-Hans或zh_CN（下划线非法） -
zh-CN隐含简体，且被所有主流读屏、Chrome、Google 全链路识别最稳 - 混排外文时，必须显式标注子元素：
<p lang="en">API</p>、<blockquote lang="fr">…</blockquote> - 代码块里的注释不是代码语言，是自然语言：
<pre lang="en"># Initialize counter</pre>，不是lang="bash"
多语言混排时，lang 怎么嵌套才真起作用？
局部语言切换靠的是继承与覆盖，不是 JS 模拟。VoiceOver 读到 lang="en" 区域时会自动切英文语音引擎：
立即学习“前端免费学习笔记（深入）”；
- 中英术语对照表：每个单元格单独加
lang，<td lang="zh">辅助技术</td><td lang="en">Assistive Technology</td> - 避免用
<div lang="en">包一大段内容——语义不清，干扰父级:lang(zh)CSS 匹配 -
<q lang="ja">、<cite lang="de">等语义化标签比<span>更可靠，读屏能结合上下文判断用途 - 别用
aria-label覆盖双语文本——它会吞掉原始内容，导致信息丢失
动态页面里 lang 容易被忽略的硬伤
React/Vue/Next.js 项目最容易在这里栽跟头：JS 渲染完才改 lang，但读屏早已完成初始化。
- SSR/SSG 必须在首屏 HTML 中输出真实
lang，比如 Next.js 的app/layout.tsx里用<html lang={locale}> - 用户切换语言后，不仅要更新文案，还必须同步更新
document.documentElement.lang和所有已渲染的子元素lang属性 -
hreflang和lang完全无关：hreflang是给搜索引擎看的链接关系，lang是给浏览器和读屏看的内容语言，两者需独立维护、保持一致
真正难的不是写对 lang，而是在组件化、国际化、服务端渲染交织的场景里，让每一个 lang 值都在正确的时间、正确的节点上出现——漏掉一个，就可能让某段英文被中文引擎硬读成“P-I”。
