必须为引用元素显式设置lang属性，仅设<html>的lang无效；需用<blockquote><q><pre>等语义化标签配合lang值，且lang须匹配实际内容语言。
只给 <html> 设 lang，引用内容仍会被当成主语言朗读或翻译错——必须为引用元素本身显式加 lang 属性。
引用块必须用语义化标签 + lang 双重标注
浏览器和屏幕阅读器不靠“看起来像外文”识别语言，只认 <blockquote>、<q>、<pre> 这类有明确语义的标签，且必须带 lang 值。写在 <div> 或 <span> 上效果极差甚至无效。
-
<blockquote lang="fr">Merci beaucoup.</blockquote>✅ 语义+语言双到位，VoiceOver 用法语引擎读 -
<div lang="fr">Merci beaucoup.</div>❌<div>无语言语义，多数读屏软件忽略其lang -
<p><em lang="ja">はい</em></p>⚠️ 单词级可用，但整段引文优先用<q>或<blockquote>
lang 值必须匹配实际内容，不能按“页面语言”统一填
中文页面里嵌一段英文 API 文档，lang 就得是 en 或 en-US，不是 zh-CN；日文引用写 ja 足够，不必强行补 ja-JP（除非你真要区分日本本土与海外日语发音差异）。
- 数值、单位、代码符号（如
2026-09-21、USD、curl -X GET）不用设lang，它们无自然语言发音规则 - 缩写词如
API在中文上下文中建议包裹<span lang="en">API</span>，否则 NVDA 可能硬读成“阿皮” -
<pre lang="en"># Initialize counter</pre>比lang="bash"更合理——bash不是 BCP 47 语言码，en才让语法高亮工具和翻译功能正确识别注释
:lang() 样式匹配失败？先看是否精确匹配
CSS 的 :lang(fr) 只匹配 lang="fr"，不匹配 lang="fr-FR" 或 lang="fr-CA"；反过来 :lang(fr-FR) 也打不中 lang="fr"。想一劳永逸，改用属性选择器前缀匹配。
立即学习“前端免费学习笔记（深入）”；
-
blockquote:lang(fr) { quotes: "«" "»"; }→ 只对<blockquote lang="fr">生效 -
blockquote[lang^="fr"] { quotes: "«" "»"; }→ 匹配fr、fr-FR、fr-CA所有变体 - 若引用内含
<strong>等内联元素，strong:lang(fr)会失效——因为<strong>自身没lang，也不继承父级:lang()匹配逻辑
动态切换语言时，引用内容的 lang 得跟着一起换
用户点“切换为英文”，不仅文案要变，所有已存在的 <blockquote lang="zh-CN"> 也得同步改成 lang="en-US"，否则屏幕阅读器仍用中文引擎读那段英文引文，Chrome 翻译按钮也可能把整页误判为中文。
- 别指望只改
document.documentElement.lang就能“批量生效”——它只影响根语言，不影响已渲染的子元素 - 遍历更新时，注意保留真正该保持原语言的内容，比如一段日文古籍引文，无论页面切到哪种语言，它都该始终是
lang="ja" - SPA 中若用
outerHTML重写<html>，引用元素上的lang属性容易被丢掉或未同步，必须显式处理
最容易被忽略的是：引用内容的语言标注不是“可选优化”，而是无障碍、SEO 和浏览器基础功能（如翻译、拼写检查、字体回退）正常工作的前提。漏标一个 <q lang="de">，就可能让德语用户听到错误的中文发音。
