Intl.getCanonicalLocales()可快速校验BCP 47格式：输入如"zh-CN"返回["zh-CN"]即合法；若报错或返回空数组（如zh_CN、chinese）则非法；注意它仅做语法标准化，不判断语义冗余或合理性。
用 Intl.getCanonicalLocales() 快速校验 BCP 47 格式
浏览器控制台一行命令就能验证语言标签是否合法，比肉眼检查快得多。直接运行：Intl.getCanonicalLocales("zh-CN")，如果返回 ["zh-CN"]，说明格式正确；若抛错或返回空数组，就是非法值（如 zh_CN、chinese、en-us）。
注意：该 API 只做标准化转换，不判断语义合理性。比如 Intl.getCanonicalLocales("zh-Hans-CN") 会返回 ["zh-Hans-CN"]，但它仍是冗余写法——BCP 47 不推荐地区子标签与文字变体同时出现，应简化为 zh-CN 或 zh-Hans。
-
zh→ 返回["zh"]，但太宽泛，不建议用于根标签 -
es_ES→ 报错，下划线非法 -
EN-US→ 返回["en-US"]，大小写自动归一化，但推荐全小写主标签 + 首字母大写地区标签
检查控制台是否报“lang attribute value is invalid”警告
Chrome 和 Firefox 在解析 HTML 时会对 lang 值做轻量级语法校验。如果写了 lang="zh_CN" 或 lang="en us"（含空格），DevTools 控制台会直接输出警告，但页面仍能渲染——这种“静默失败”最危险，因为开发者容易忽略。
常见触发警告的写法：
立即学习“前端免费学习笔记（深入）”；
-
lang="zh_CN"（下划线） -
lang="en-us"（连字符小写，虽不报错但非推荐写法） -
lang=" Chinese "（前后空格 + 非标准值） -
lang="ja-JP-variant"（过度扩展，超出 IANA 注册范围）
只要控制台没警告，且 Intl.getCanonicalLocales() 能返回结果，基本可判定语法合规。
验证 :lang() CSS 选择器是否生效
CSS 的 :lang(zh) 是最灵敏的“运行时探针”。它只匹配 lang 属性值能被浏览器识别为该语言的元素，且严格依赖 BCP 47 解析逻辑。如果写了 ，但 document.querySelector(':lang(zh)') 返回 null，大概率是值未被识别（例如用了 zh-hans 全小写，某些旧版 Safari 不匹配）。
实操建议：
- 在页面中插入测试元素：
<p lang="zh-CN">测试</p>和<p lang="en-US">test</p> - 加样式：
p:lang(zh-CN) { color: red; }，看是否生效 - 若
:lang(zh)生效但:lang(zh-CN)不生效，说明浏览器只认主语言标签，需降级使用
用 axe 或 Lighthouse 扫描 a11y 问题
lang 缺失或错误是 axe 工具标记为“严重（critical）”的问题，Lighthouse 的“无障碍”分项也会明确扣分。运行 axe(document) 后，检查返回结果中是否有 landmark-no-main 或 html-has-lang 类型的失败项。
关键点：
- 必须检测
document.documentElement（即<html>元素），其他位置的lang不影响此规则 - axe 不校验值是否符合 BCP 47，只检查是否存在且非空；所以要配合
Intl.getCanonicalLocales()补充验证 - 若扫描通过但屏幕阅读器仍读错，问题大概率出在局部
lang漏标（如英文代码块没加lang="en"），而非根标签
真正难校验的是“该标没标”——比如中英混排段落里夹了一句日文，<html lang="zh-CN"> 合法，但那句日文没加 lang="ja"，所有自动化工具都检测不到，只能靠人工走查或 DOM 遍历脚本辅助发现。
