必须为每个单独设置lang属性，因为整列表统一设lang会导致多语混排时发音、断字错误；应显式声明合法BCP 47标签，避免依赖JS或CSS推断，且需随内容编辑同步维护。
为什么不能只给整个列表加 lang
浏览器和屏幕阅读器依赖 lang 属性判断语言切换规则，比如发音、断字（hyphenation）、字体回退。如果整段 <ul></ul> 只设一个 lang="fr"，但其中某行实际是德语或夹杂日文，辅助技术会按法语读错——尤其人名、术语、缩写容易崩。逐行标注不是过度设计，而是可访问性的底线要求。
<li> 里直接写 lang 最稳
别绕弯用 JS 动态加，也别指望 CSS 的 :lang() 伪类反向推断。最可靠的方式就是手写或模板生成时，在每个 <li> 上显式声明：
<li lang="en">“I’ll be there at noon.”</li> <li lang="ja">「正午に着きます。」</li> <li lang="es">«Llegaré al mediodía.»</li>
- 值必须是合法 BCP 47 标签，比如
zh-Hans（简体中文）比zh更准，pt-BR比pt更明确 - 引号类型（英文直角引号、日文角括号、西班牙语尖括号）不影响
lang判定，但需和实际语言习惯一致 - 若某行含多语混排（如英文术语+中文解释），优先标主导语言；次要部分用嵌套
<span lang="en">API</span>补充
批量处理时注意这三点
如果列表来自 CMS 或翻译平台导出，用脚本批量加 lang 很常见，但容易翻车：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 别只靠文件后缀或字段名猜语言——
text_fr.txt里可能混了未译的英文占位符，得实际检测内容 - 避免覆盖已有
lang：正则替换时检查是否已存在lang=，否则会叠成lang="en" lang="ja"，后者无效 - 空行或纯标点行（如
<li>—</li>）仍需标语言，通常继承上一行或按上下文默认值，不能留空
验证是否真生效
光写了不等于被识别。打开 DevTools，在元素面板里点开任意 <li>，确认 lang 属性确实存在且值正确；再用屏幕阅读器（如 NVDA + Firefox）朗读，听发音是否切到对应语言音素。Chrome 的 Lighthouse 有时会漏报单个 <li> 的缺失，别全信。
立即学习“前端免费学习笔记（深入）”；
真正难的不是加属性，而是维护语言元数据的一致性——尤其当对话行被编辑、合并、拆分时，lang 容易脱钩。把它当成和文本内容同等重要的字段来管理。
