首屏HTML中lang值必须正确，JS动态修改无效；局部内容需显式标注lang属性，不能依赖继承。因浏览器和屏幕阅读器仅在初始解析时读取lang，后续JS设置不触发重渲染、语音重载或SEO识别。
必须在首屏 HTML 中写对 lang 值，JS 动态修改无效；局部内容需显式标注，不能靠继承或猜测。
为什么 document.documentElement.lang = "en" 不起作用
浏览器和屏幕阅读器（NVDA、VoiceOver）只在解析初始 HTML 时读取 <html lang="zh-CN">。JS 后期执行 document.documentElement.lang = "en" 不会触发重渲染、语音引擎重载或 Chrome 翻译按钮刷新。
- 已加载的
<p>、<pre>等元素仍按旧语言规则断词、朗读、拼写检查 -
:lang(zh)CSS 伪类不会重新匹配，样式不更新 - SEO 抓取只认首屏 HTML 中的
lang，JS 设置对搜索引擎完全不可见 - 正确做法：SSR 渲染时注入、静态站硬编码、SPA 切换语言时整页刷新（
window.location.href）
哪些元素可以/必须加 lang 属性
lang 是全局属性，但不是所有标签加了都有效——关键看是否承载**用户可见的文本内容**且有明确语言归属。
- ✅ 推荐加：
<p>、<h1>、<td>、<th>、<blockquote>、<q>、<figcaption>、<pre>（内容为自然语言时） - ⚠️ 注意：
<pre lang="bash">是常见误用；bash不是 BCP 47 语言码，应改用lang="en"或留空 - ❌ 无效或语义错误：
<script>、<style>、<div>（除非它包裹的是完整一段外文）、<meta>（http-equiv="Content-Language"已弃用） - 表格单元格必须直接写在
<td lang="ja">上，<table lang="en">不会向下继承
lang 值怎么写才真正生效
写错不报错，但等于没写——浏览器静默降级为 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>、<blockquote> 这些语义明确的容器，必须各自带 lang；靠父级 <html> 或 <body> 一设了之，等于放弃对它们的语言控制。
