lang属性值必须严格符合BCP 47标准(如zh-CN、ja-JP),写错、拼错、用下划线/大写/空格/非标准标签(如zh_CN、Chinese、zh)会导致浏览器和辅助技术静默忽略,等效于未声明。

lang 属性值是否符合 BCP 47 标准
浏览器和辅助技术只认 lang 值是否合法,不认“过期”——但写错、拼错、用旧码就等于失效。比如 zh-CN 合法,zh_CN、chinese、zh(无区域)在部分场景下会 fallback 或被忽略;en-US 正确,en_US 或 english 直接不触发 :lang(en) CSS 规则或屏幕阅读器语种切换。
实操建议:
立即学习“前端免费学习笔记(深入)”;
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用正则快速筛查非法格式:
/^([a-z]{2,3})(-[A-Z][a-z]{3})?(-([A-Z]{2}|[0-9]{3}))?$/—— 匹配 BCP 47 基础结构(如zh-Hans、sr-Latn-RS),不匹配zh-hans(小写区域)、zh_Hans(下划线) - 检查常见错误值:
document.querySelectorAll('[lang]').forEach(el => { if (!/^[a-z]{2,3}(-[A-Z][a-z]{3})?(-[A-Z]{2}|-[0-9]{3})?$/.test(el.lang)) console.warn('Invalid lang:', el.lang, 'on', el.outerHTML) }) - 注意大小写:BCP 47 要求语言子标签小写、地区/脚本子标签首字母大写(
ja-JP✅,ja-jp❌)
lang 值是否与当前实际语言一致
静态写死的 lang="en" 在用户切到日语后仍存在,就是“逻辑过期”——DOM 没更新,屏幕阅读器照读英文,input[type="date"] 在 Safari 下直接不渲染。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 前端切换语言时,必须同步更新:
document.documentElement.lang = 'ja-JP',不能只改 URL 或局部文本 - 服务端渲染需动态插值:
<html lang="">,而非硬编码<html lang="en"> - 回归测试断言点:
expect(document.documentElement.lang).toBe('ja-JP'),不能只查文案是否变
lang 是否被新插入 DOM 继承或覆盖
JS 动态插入节点(如弹窗、懒加载模块)若没显式设 lang,会继承 document.documentElement.lang —— 如果根节点还卡在旧语言,新内容就“自动过期”。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 所有动态创建元素都应带
lang:const el = document.createElement('p'); el.lang = 'ja-JP'; el.textContent = 'こんにちは'; - 避免依赖继承:对关键语义元素(
<blockquote>、<code>、<pre>)始终显式声明,不靠父级 - 用 MutationObserver 监听新增节点:
new MutationObserver(mutations => mutations.forEach(m => m.addedNodes.forEach(n => n.lang || (n.lang = document.documentElement.lang))))(仅作兜底,不替代主动设置)
lang 和 charset 是否耦合失效
即使 lang="zh-Hans" 写得完全正确,若 <meta charset="utf-8"> 缺失、文件真实编码是 GBK、或响应头返回 charset=gbk,中文照样显示为乱码——此时 lang 再准也没用,属于“隐性过期”。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- CI 中强制校验:
if (document.charset !== 'UTF-8' || !/charset=utf-8/i.test(document.querySelector('meta[http-equiv="Content-Type"]').content)) throw new Error('charset/lang mismatch') - 本地验证:用
file -i yourfile.html看磁盘文件真实编码,别信编辑器右下角状态栏 - Network 面板确认响应头
Content-Type: text/html; charset=utf-8存在且值正确
lang 的“过期”往往不来自标准本身变更,而来自它和 DOM 状态、HTTP 响应、文件编码三者的脱节——单独验证任何一个都可能漏掉问题。


















