lang属性必须逐元素显式声明，仅靠根标签无法识别混排的英文、日文或代码注释，否则屏幕阅读器硬读、浏览器翻译跳过、:lang()选择器失效。
lang 属性写在局部元素上才真正起作用，只靠 根标签无法让混排的英文、日文或代码注释被正确识别——屏幕阅读器会硬读、浏览器翻译会跳过、CSS :lang() 选择器也匹配不到。
为什么
根标签的 lang 只定义文档主语言，不向下继承语义。它影响的是 SEO 抓取、全局字体 fallback 和拼写检查开关，但对页面里一段英文引文、一个 <code> 里的 Bash 命令、甚至 placeholder 文本完全无效。
- 现象：
<p>调用 <code>curl -X POST接口 中的curl被屏幕阅读器读成“酷尔”，不是 /kɜːl/ - 原因：该
<p></p>没声明语言，AT 默认按根语言（中文）规则解析每个字符 - 后果：Chrome 右键“翻译成中文”不会选中这行；
:lang(en) { hyphens: auto; }样式不生效
lang 必须逐元素显式声明
所有含用户可见文本的语义化标签，只要语言与主语言不同，就得带 lang。不是“可加可不加”，是“不加就等于放弃控制”。
- 英文段落：
<p lang="en">The response status is 200.</p> - 日文引用：
<blockquote lang="ja">ありがとうございます</blockquote> - 代码块注释：
<pre class="brush:php;toolbar:false;" lang="en"># Initialize the counter</pre>（别用lang="bash"，那不是合法语言码） - 外文术语：
<span lang="fr">RSVP</span>或<abbr lang="de">FAQ</abbr> - 表单提示：
<input placeholder="Search" lang="en">（注意：placeholder是 DOM 文本节点，必须单独标语言）
:lang() 样式怎么写才可靠
CSS 的 :lang() 伪类匹配的是元素自身或任意祖先的 lang 值，但它**不自动泛化**。写错值，样式就静默失效。
-
:lang(zh)≠:lang(zh-CN)：前者只匹配lang="zh"（非法值），后者只匹配lang="zh-CN"；实际项目应并列写：html:lang(zh-CN), html:lang(zh-Hans), html:lang(zh-TW) - 推荐更稳的写法：
html[lang="zh-CN"] p控制整块区域，避免依赖:lang()的浏览器兼容差异 - 中英文混排断行要分开：
html[lang="zh-CN"] p { word-break: keep-all; }+html[lang="en-US"] p { hyphens: auto; } -
lang="bash"这类非标准值虽被高亮工具识别，但不能用于:lang(bash)——浏览器不认，CSS 不触发
动态页面最容易漏掉的三个地方
JS 渲染内容时，lang 不是“顺手加上去”的事，而是必须和文本一起注入。漏掉任何一处，无障碍链就断了。
-
<canvas></canvas>的 fallback 文本：<canvas><div lang="zh-CN">图表加载失败</div></canvas>，否则屏幕阅读器可能跳过 - SVG 中的
<title></title>：<title lang="zh-CN">用户头像</title>，不写就会被按父容器语言朗读 - JS 动态插入的弹窗文案：不能只改
innerText，还得同步设置父元素lang，或用aria-label显式覆盖（但aria-label会替代原内容，慎用）
最麻烦的不是写错 lang，而是写了却没验证——NVDA 和 VoiceOver 对嵌套 lang 的解析深度不一致，同一段 HTML 在不同 AT 下表现可能完全不同。上线前必须用真实读屏软件逐段听一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
