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 规则或屏幕阅读器语种切换。
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 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 或局部文本 - 服务端渲染需动态插值：
，而非硬编码 - 回归测试断言点：
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></blockquote>、<code>、<pre class="brush:php;toolbar:false;"></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 响应、文件编码三者的脱节——单独验证任何一个都可能漏掉问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
