lang属性必须写在<html>标签上，其他位置全无效；应选zh-CN，因其明确简体中文与中国大陆规范，兼容屏幕阅读器、SEO及翻译工具最佳。
lang属性必须写在标签上，其他位置全无效
浏览器、屏幕阅读器、搜索引擎只读取 <html> 标签上的 lang 属性，这是唯一被标准认可的位置。写在 <body>、<div>、<p> 甚至 <head> 里，对页面主语言声明毫无作用。
常见错误现象：
-
<body lang="zh-CN">→ 页面仍被识别为“无语言”或系统默认语言 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已弃用，所有现代浏览器直接忽略 -
<html lang="">或<html lang="zh">→ 空值被视为“未知语言”，zh过于宽泛，部分读屏软件 fallback 到英文 TTS 引擎
中文该选 zh-CN、zh-Hans 还是 zh？
三者语义和兼容性差异明显，不能混用。多数场景下，zh-CN 是最稳妥的选择。
-
zh-CN：明确“简体中文 + 中国大陆规范”，NVDA、JAWS、VoiceOver、Chrome 翻译、Google SEO 全链路支持最稳 -
zh-Hans：只声明“简体字”，不绑定地域，适合港澳台用户也用简体的场景，但部分旧翻译插件或 CMS 可能无法匹配正确语音库 -
zh：BCP 47 合法但不推荐，iOS VoiceOver 可能跳过中文引擎，把“长”读成 /tʃæŋ/ 而非 /cháng/ - 绝对避免：
zh_china、zh_CN（下划线非法）、Chinese（非标准码）——全部静默失效
:lang() CSS 选择器为什么有时不生效？
根本原因常是 lang 值没设对，或选择器写法与实际属性值不匹配。
立即学习“前端免费学习笔记（深入）”；
-
[lang="zh"]只匹配lang="zh"，不匹配lang="zh-CN"或lang="zh-Hans" -
[lang|="zh"]匹配所有以zh开头的值（如zh-CN、zh-Hans），但需注意短横线分隔规则 -
:lang(zh)最灵活：它基于语言继承机制，即使父元素设了lang="zh-CN"，子元素没显式声明也能命中 —— 但前提是根<html lang="zh-CN">存在且合法 - 若
:lang(zh)完全不触发，先检查控制台是否报错，再确认<html>上的lang值是否拼写正确、有无空格、是否用了下划线
动态页面中改 lang，JS 为什么经常白忙活？
关键点在于：辅助技术（尤其是屏幕阅读器）只读取初始 HTML 中的 lang，DOM 加载后 JS 修改 document.documentElement.lang 对已激活的朗读会话基本无效。
- 纯前端 SPA 切换语言时，仅执行
document.documentElement.lang = "en-US"不够，必须配合整页刷新，或至少强制重载关键 ARIA-live 区域 - 服务端渲染（Next.js/Nuxt/PHP）务必在首屏 HTML 响应中就输出正确值，不能等 JS 执行后再 patch
- 若必须用 JS 动态更新，要加兜底操作：
document.title = document.title（空赋值）可触发部分读屏软件重新读取根节点 - 永远过滤用户输入：
lang值必须来自白名单（如['zh-CN', 'en-US', 'ja-JP']），禁止直接拼接未校验变量，防 XSS
