首屏html中lang值必须正确，js动态修改无效；局部内容需显式标注lang属性，不能依赖继承。因浏览器和屏幕阅读器仅在初始解析时读取lang，后续js设置不触发重渲染、语音重载或seo识别。
必须在首屏 HTML 中写对 lang 值，JS 动态修改无效；局部内容需显式标注，不能靠继承或猜测。
为什么 document.documentElement.lang = "en" 不起作用
浏览器和屏幕阅读器（NVDA、VoiceOver）只在解析初始 HTML 时读取 。JS 后期执行 document.documentElement.lang = "en" 不会触发重渲染、语音引擎重载或 Chrome 翻译按钮刷新。
- 已加载的
<p></p>、<pre class="brush:php;toolbar:false;"></pre>等元素仍按旧语言规则断词、朗读、拼写检查 -
:lang(zh)CSS 伪类不会重新匹配，样式不更新 - SEO 抓取只认首屏 HTML 中的
lang，JS 设置对搜索引擎完全不可见 - 正确做法：SSR 渲染时注入、静态站硬编码、SPA 切换语言时整页刷新（
window.location.href）
哪些元素可以/必须加 lang 属性
lang 是全局属性，但不是所有标签加了都有效——关键看是否承载**用户可见的文本内容**且有明确语言归属。
- ✅ 推荐加：
<p></p>、<h1></h1>、<td>、<code><th>、<code><blockquote></blockquote>、<q></q>、<figcaption></figcaption>、<pre class="brush:php;toolbar:false;"></pre>（内容为自然语言时） - ⚠️ 注意：
<pre class="brush:php;toolbar:false;" lang="bash"></pre>是常见误用；bash不是 BCP 47 语言码，应改用lang="en"或留空 - ❌ 无效或语义错误：
<script></script>、<style></style>、<div>（除非它包裹的是完整一段外文）、<code><meta>（http-equiv="Content-Language"已弃用） - 表格单元格必须直接写在
<td lang="ja"> 上，<code><table lang="en"> 不会向下继承 <h3>lang 值怎么写才真正生效</h3> <p>写错不报错，但等于没写——浏览器静默降级为 <code>und（未知语言），导致字体回退失效、标点错乱、屏幕阅读器误读。- ✅ 必须用短横线
-，小写字母：zh-CN、en-US、pt-BR、zh-Hans - ❌ 绝对避免：
zh_CN（下划线非法）、Chinese（非标准）、ZH-cn（大小写混用）、zh-hans-cn（三段式 IANA 不收录） - 选
zh-CN还是zh-Hans？多数 CMS、SEO 工具、翻译插件只认zh-CN；zh-Hans仅当你需强调“简体字”且排除港澳台繁体场景时才用 - 局部多语言内容必须显式声明：
<p lang="en">API</p>才能让屏幕阅读器读作 /ˈeɪ.piː.ˈaɪ/，而不是“阿皮”
lang 和 CSS :lang() 怎么配合才不翻车
:lang()匹配非常严格，且浏览器支持不一致。盲目依赖容易白写样式。-
:lang(zh)不匹配lang="zh-CN"，:lang(zh-CN)也不匹配lang="zh-Hans" - 更稳妥的做法是用属性选择器：
html[lang="zh-CN"] p、td[lang="ja"]，调试直观、兼容性稳 - 若坚持用
:lang()，建议并列写全：html:lang(zh), html:lang(zh-CN), html:lang(zh-Hans) - 字体链中，
lang是触发 fallback 的开关：写错lang，"PingFang SC"就永远不会被尝试，中文直接走 Helvetica 或 Segoe UI，结果是标点异常、假名宽度错乱
最易被忽略的点：表格单元格、
<pre class="brush:php;toolbar:false;"></pre>、<blockquote></blockquote>这些语义明确的容器，必须各自带lang；靠父级或一设了之，等于放弃对它们的语言控制。 - ✅ 必须用短横线
