必须为每个中英文内容节点显式设置lang属性,因为屏幕阅读器和浏览器翻译依赖逐元素语言声明,根元素lang无法继承;需严格遵循BCP 47标准(如zh-CN、en-US),表格/列表/代码块等须单独标注,CSS应使用[lang]属性选择器并按语言配置断行与字体。

必须在每个中英文内容节点上显式写 lang 属性,不能只靠 <html lang="zh-CN"> 继承——否则屏幕阅读器会把英文单词读成中文拼音,浏览器翻译会把整段英文误判为中文。
为什么只设根元素 lang 不够用
浏览器和辅助技术(如 VoiceOver、NVDA)对语言的识别是“按元素逐个查”的,不是“全局推断”。<html lang="zh-CN"> 只告诉系统“这页主语言是简体中文”,但不会让里面所有 <p>API</p> 自动变成英文语境。
常见错误现象:
-
<p>We use React Router</p>被 VoiceOver 读作“维尤 优斯 瑞克特 路由器” - Chrome 翻译按钮不出现,或点了之后把英文段落当成中文乱翻
- 拼写检查始终用中文词典,
<textarea>里输function被标红
根本原因:这些元素没声明自己的语言,浏览器只能沿用根语言,而根语言不是它们的真实语言。
立即学习“前端免费学习笔记(深入)”;
中英文混排时 lang 值怎么写才合法
必须严格遵循 BCP 47 标准,大小写敏感、用短横线分隔。写错等于没写。
✅ 正确写法:
- 简体中文:
lang="zh-CN"(CMS/SEO 工具兼容性最好)或lang="zh-Hans"(强调字形,适合需排除繁体场景) - 英文:
lang="en"(通用)、lang="en-US"(美式拼写/标点)、lang="en-GB"(英式) - 代码术语、缩写、URL:
lang="en",不是lang="bash"或lang="code"(非标准值)
❌ 典型错误:
-
lang="zh_CN"(下划线 → 被 Chrome 静默忽略) -
lang="Chinese"(非 IANA 注册码) -
lang="zh"(太宽泛,可能匹配非法值如lang="zhx")
表格、列表、代码块里的 lang 必须单独加
表格单元格、列表项、<pre>、<code> 这些元素不继承父级 lang,必须直接写在自己标签上。
例如一个产品对比表:
<table>
<tr>
<th lang="zh-CN">功能</th>
<th lang="en">Feature</th>
</tr>
<tr>
<td lang="zh-CN">路由管理</td>
<td lang="en">Routing</td>
</tr>
<tr>
<td lang="zh-CN">状态持久化</td>
<td lang="en">State persistence</td>
</tr>
</table>
注意:<th lang="en">Feature</th> 不能省略 lang,哪怕它在 <table lang="en"> 里——浏览器根本不认这个继承。
同理,<pre lang="bash">curl -X POST</pre> 应改为 <pre lang="en">curl -X POST</pre>;<code>useState</code> 建议包一层:<code lang="en">useState</code>。
CSS 里用 [lang] 属性选择器比 :lang() 更可靠
:lang(zh) 行为不稳定:Safari 对 lang="zh-Hans" 不触发,Firefox 对 lang="zh-CN" 有时漏匹配。而 [lang="zh-CN"] 是精确属性匹配,100% 可控。
推荐写法:
- 中文段落断行:
html[lang="zh-CN"] p { word-break: keep-all; } - 英文段落连字符:
html[lang="en-US"] p { hyphens: auto; -webkit-hyphens: auto; } - 中英文混排时统一代码块换行:
[lang] code, [lang] pre { word-break: break-all; }
别用 p { word-break: break-word; } 这类通用规则——它会覆盖所有语言的合理行为,导致中文被硬切、英文连字符失效。
真正容易被忽略的是:字体 fallback 链也得按 lang 分开写。比如 [lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; },而 [lang="en-US"] 则用 "Inter", "system-ui", sans-serif。写反了,中文就用西文字体渲染,标点间距全乱。



















