必须为每个中英文内容节点显式设置lang属性，因为屏幕阅读器和浏览器翻译依赖逐元素语言声明，根元素lang无法继承；需严格遵循bcp 47标准（如zh-cn、en-us），表格/列表/代码块等须单独标注，css应使用[lang]属性选择器并按语言配置断行与字体。
必须在每个中英文内容节点上显式写 lang 属性，不能只靠 继承——否则屏幕阅读器会把英文单词读成中文拼音，浏览器翻译会把整段英文误判为中文。
为什么只设根元素 lang 不够用
浏览器和辅助技术（如 VoiceOver、NVDA）对语言的识别是“按元素逐个查”的，不是“全局推断”。 只告诉系统“这页主语言是简体中文”，但不会让里面所有 <p>API</p> 自动变成英文语境。
常见错误现象：
-
<p>We use React Router</p>被 VoiceOver 读作“维尤 优斯 瑞克特 路由器” - Chrome 翻译按钮不出现，或点了之后把英文段落当成中文乱翻
- 拼写检查始终用中文词典，
<textarea></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 class="brush:php;toolbar:false;"></pre>、<code> 这些元素不继承父级 lang，必须直接写在自己标签上。
例如一个产品对比表：
| 功能 | Feature |
|---|---|
| 路由管理 | Routing |
| 状态持久化 | State persistence |
注意：<th lang="en">Feature</th> 不能省略 lang，哪怕它在 <table lang="en"> 里——浏览器根本不认这个继承。
<p>同理，<code><pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre> 应改为 <pre class="brush:php;toolbar:false;" lang="en">curl -X POST</pre>；<code>useState 建议包一层：<code lang="en">useState。
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。写反了，中文就用西文字体渲染，标点间距全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
