lang属性必须写在标签上,其他位置全无效;应选zh-cn,因其明确简体中文与中国大陆规范,兼容屏幕阅读器、seo及翻译工具最佳。

lang属性必须写在html>标签上,其他位置全无效
浏览器、屏幕阅读器、搜索引擎只读取 标签上的 lang 属性,这是唯一被标准认可的位置。写在 、<div>、<code><p></p> 甚至 里,对页面主语言声明毫无作用。
常见错误现象:
-
→ 页面仍被识别为“无语言”或系统默认语言 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已弃用,所有现代浏览器直接忽略 -
或→ 空值被视为“未知语言”,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",子元素没显式声明也能命中 —— 但前提是根存在且合法 - 若
:lang(zh)完全不触发,先检查控制台是否报错,再确认上的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











