lang属性必须显式写在语义化元素上才生效，不继承父级；值须符合bcp 47标准，如zh-hans、en；无效写法包括用下划线、非标准码或套在无语义标签中。
局部元素加 lang 必须显式写在目标标签上
浏览器和屏幕阅读器不会从父级继承语言意图，哪怕你写了 <div lang="en"><p>API</p></div>，里面的 <p></p> 仍按页面根语言（比如 zh-CN）处理发音和断词。真正生效的只有直接写在语义相关元素上的 lang 值。
有效写法包括：
-
<p lang="fr">Merci beaucoup.</p>✅ 段落本身是法语 -
<blockquote lang="ja">ありがとう</blockquote>✅ 引文有明确语义，读屏识别率高 -
<td lang="en">iPhone 15 Pro</td>✅ 表格单元格必须单独标注，不继承<table> 的 <code>lang -
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>✅ 注释类文本建议用en，而非bash（后者非标准语言码，仅部分工具识别） -
lang="zh_CN"→ 下划线非法，浏览器静默忽略 -
lang="Chinese"→ 非 BCP 47 标准，所有辅助技术不识别 -
lang="en-US"用于一段英式拼写的引文（如colour）→ 可能触发美式语音库，读成 /ˈkʌlər/ 而非 /ˈkʌlə/ -
lang="ja"和lang="ja-JP"在多数场景效果一致；但若涉及日语方言或海外日语教学内容，才需细化 -
:lang()是精确字符串匹配，<q lang="fr-FR"></q>不会命中:lang(fr)；反过来<q lang="fr"></q>也不会匹配:lang(fr-FR) - 如果
lang写在<blockquote></blockquote>上，而你想给里面的<em></em>加样式，em:lang(fr)一定失败——伪类不继承，<em></em>自身没lang属性 - 纯符号/代码/数值：
USD、2026-09-22、SHA-256—— 它们没有自然语言发音规则 - 缩写词嵌在中文句中时，优先用语义化包裹：
<span lang="en">API</span>比全段设lang="en"更精准；但若只是“点击按钮调用 API”，整个句子仍是中文，不必标 - 第三方脚本注入的内容（如评论框、广告位）——你无法控制其
lang，强行包裹一层<div lang="en"> 语义断裂，读屏可能跳过或误读<p>真正难的从来不是给几个 <code><p></p>加lang，而是确保动态插入的节点（比如 fetch 后渲染的卡片、Web Component 内部文本）也带着准确的语言上下文被解析——这需要在模板层或 hydration 阶段就注入，而不是等 JS 执行完再补。
无效写法包括：<div lang="en"><p>Hello</p></div>、<span lang="en">UI</span>（<span></span> 无语义，读屏通常忽略）、（对整页语言声明无效）。
lang 值必须符合 BCP 47，不能靠“看起来像”乱填
局部语言值不是随便写个缩写就行。比如中文术语“用户ID”出现在表格标题里，该用 lang="zh-Hans" 而不是 lang="en"——哪怕它含英文缩写，内容本质仍是中文语境下的概念。
常见错误写法及后果：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
推荐策略：简体中文内容优先用 zh-Hans（比 zh-CN 更侧重字形，兼容港澳台用户），英文内容统一用 en（无需区分 US/GB，除非拼写/发音差异关键）。
CSS 的 :lang() 在局部 lang 上容易失效的两个原因
写了 q:lang(fr) { font-style: italic; } 却没生效？大概率卡在这两点：
更稳妥的写法是属性选择器前缀匹配：q[lang^="fr"] 或 blockquote[lang^="zh"]，能覆盖 fr-FR、zh-Hans 等变体。
哪些地方不该加 lang？省掉反而更干净
不是所有外文内容都需要 lang。以下情况加了反而干扰可访问性或增加 DOM 体积：
