必须在标签上写lang属性，其他位置无效；浏览器、屏幕阅读器、搜索引擎和Chrome翻译按钮仅识别此位置的声明，用于加载语音库、切分音节、触发翻译等，且必须符合BCP 47标准（如zh-CN）。
必须在 标签上写 lang 属性，其他位置无效——这是浏览器、屏幕阅读器、搜索引擎和 Chrome 翻译按钮唯一认的页面语言声明方式。
为什么只改
浏览器和辅助技术（如 NVDA、VoiceOver）在解析 HTML 的第一个字节时就提取 值，用于加载对应语音库、切分音节、匹配词典、触发翻译入口。这个时机早于 DOM 构建、JS 执行、甚至 内大部分标签的处理。
常见错误现象：
-
<meta http-equiv="Content-Language" content="zh-CN">：HTML5 已废弃，完全被忽略 -
：只影响:lang()CSS 匹配和局部断词，不改变页面级语言 -
document.documentElement.lang = "zh-TW"（JS 动态设置）：对已激活的屏幕阅读器无效，它只读初始 HTML 字符串
lang 值怎么填才不被当成错误
必须严格遵循 BCP 47 规范，大小写、连字符、子标签顺序都有语义含义；非法值（如 zh_china、Chinese、zh）会被静默忽略或识别为“未知语言”。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- 中文简体大陆用户：
zh-CN（不是zh或zh-Hans） - 繁体中文台湾用户：
zh-TW；香港用户：zh-HK - 英文美式：
en-US（不能用english、en_US、EN-us） - 法语法国：
fr-FR（FR-fr或fr_fr都非法）
特别注意：lang="" 比不写还糟——明确告诉辅助工具“语言未知”，可能导致整页按英文规则朗读中文多音字。
多语言内容怎么局部覆盖
主语言由 决定，局部切换靠子元素加 lang，无需 JS 或额外 <meta>。
典型场景：
- 英文引文：
<blockquote lang="en">The quick brown fox</blockquote> - 日文术语嵌入中文段落：
<p>中文说明中出现日本語</p>（此时<p></p>不需额外加lang，因继承自；若需单独控制，可显式写<p lang="ja"></p>） - 阿拉伯语等双向文本：
<p lang="ar" dir="rtl">مرحبا</p>（dir必须同步加）
<title></title> 里无法嵌套标签，若含多语言文本（如 title="English | 中文"），只能整体按 处理，无完美解法。
动态页面（React/Vue/SSR）怎么安全设 lang
客户端渲染（CSR）无法靠 JS 补救，必须在服务端或静态生成阶段注入真实语言值——否则首屏 HTML 里 lang 就是错的，后续所有链路都失效。
实操建议：
- Next.js：在
app/layout.tsx中通过注入，确保 SSR 输出正确值 - Nuxt：用
useLocaleHead()，保证出现在首屏 HTML 中 - 纯前端 SPA：若支持多语言，必须产出不同
lang的 HTML 入口文件（SSG），不能依赖 JS patch
最容易被忽略的是：即使页面显示正常，lang 缺失或错误也会导致屏幕阅读器读错音节、Chrome 翻译按钮消失、Google Search Console 报告“未指定语言”，且这些故障往往没有视觉提示。
