lang属性仅为语义标记，不自动触发行为；JS需手动读取document.documentElement.lang或element.lang获取语言值，getAttribute("lang")返回显式声明值；浏览器不校验lang合法性，但WCAG、Chrome翻译及CSS :lang()仅认标准BCP 47格式。
lang 属性的识别机制依赖浏览器解析，不是 JS 自动读取
HTML 中的 lang 属性本身不触发任何行为，它只是语义标记，供浏览器、屏幕阅读器、搜索引擎等外部系统使用。浏览器不会因为写了 lang="zh-CN" 就自动切换字体或翻译页面——除非你手动用 JS 读取并响应它。
常见误解是以为设了 lang 就能“让页面按语言生效”，其实它只是个信号源，真正起作用得靠后续逻辑配合。
如何用 JavaScript 获取当前页面或元素的语言值
最直接的方式是访问 document.documentElement.lang 获取根语言，或对任意元素调用 element.lang（注意：这是 DOM 属性，不是 getAttribute("lang")）。
-
document.documentElement.lang返回根元素的lang值，未设置时为空字符串 -
element.lang对于没有显式lang的元素，会沿父链向上查找，直到html标签；但 JS 不会自动继承，需手动实现回溯逻辑 - 若需精确获取某元素声明的原始值（含继承缺失情况），用
element.getAttribute("lang")更可靠
const htmlLang = document.documentElement.lang;
const pEl = document.querySelector("p");
const pDeclaredLang = pEl.getAttribute("lang"); // null 表示没写
const pInheritedLang = pEl.lang; // 自动向上找，可能返回 "zh-CN"
lang 属性值是否合法，浏览器并不校验
浏览器完全接受任意字符串作为 lang 值，比如 lang="xyz" 或 lang="en-GB-oxendict" 都能通过解析，也不会报错。但实际有效性取决于下游消费者：
立即学习“前端免费学习笔记（深入）”；
- WCAG 辅助技术通常只识别标准 BCP 47 格式（如
zh-Hans、en-US、fr） - Chrome 翻译功能对非标准值（如
lang="chinese"）大概率忽略 - CSS 的
:lang()伪类匹配也只认规范格式，:lang(zh-Hans)可以匹配，但:lang(zh_cn)不行（下划线无效）
:lang() 伪类和 getAttribute("lang") 的行为差异
CSS :lang() 是唯一原生支持语言“继承”和“子匹配”的机制，而 JS 的 getAttribute 只看字面值。例如：
<html lang="zh-Hans">
<body>
<p>这段文字会被 :lang(zh) 匹配到</p>
</body>
</html>
上面的 p 元素没写 lang，但 :lang(zh) 仍能命中，因为 CSS 引擎会向上查并做子标签匹配（zh-Hans 属于 zh）。JS 则不会这样推断——p.getAttribute("lang") 是 null，p.lang 是 "zh-Hans"，但你不能靠它反推出它是否属于某个语言族。
所以别指望用 JS 模拟 :lang() 的匹配逻辑，真有需要就用 Element.matches(":lang(...)")，它走的是浏览器原生匹配路径。
lang 的价值不在“设了就能用”，而在“设对了才能被正确消费”。最容易被忽略的是：BCP 47 大小写不敏感但惯例推荐小写（zh-hans），而像 zh-CN 和 zh-cn 在 CSS 和辅助技术中通常等效，但某些老旧工具可能区分大小写——统一用小写更稳妥。
