label 本地化需显式标注 data-i18n 并纳入完整国际化流程，否则屏幕阅读器读错、翻译遗漏、语言切换失效；嵌套内容须拆分处理，动态插入后须手动触发翻译。
label 标签内容本地化不是加个 lang 属性就能生效的，它必须参与整套 HTML 国际化流程，否则屏幕阅读器读错、翻译键漏掉、切换语言后不更新——全都会发生。
data-i18n 必须显式标注 label 的 textContent 和 for 属性
浏览器不会自动把 label 文本当作可翻译节点。只写 <label>用户名</label>，任何 i18n 库都看不到它。
- 必须加
data-i18n属性：<label data-i18n="login.username">用户名</label> - 如果
label绑定了input，且for属性含动态 ID（如for="user-name-123"），for本身不用翻译；但若for是固定值（如for="username"），需确保目标input的id不变，否则绑定断裂 - 别依赖 class 名推断键名，比如
class="form-label"不会触发任何翻译逻辑
label 里的嵌套元素（如 icon + text）要单独处理
常见写法：<label><i class="fa fa-user"></i> 用户名</label>。此时 textContent 包含空格和换行，直接替换会破坏结构。
- 推荐拆成两层：
<label><i class="fa fa-user" data-i18n="icon.user"></i> <span data-i18n="login.username">用户名</span></label> - 图标部分用
aria-label+data-i18n双保险，确保屏幕阅读器能读出翻译后的语义 - 避免在
label内写<strong>或<span style="color:red">等样式标签——它们不是文本内容主体，不应参与翻译键管理
表单控件未渲染完成时，label 翻译可能失效
SPA 中常通过 JS 动态插入 label + input 组合，若插入后没手动触发翻译，用户看到的就是原始键名（如 login.username）或英文原文。
立即学习“前端免费学习笔记（深入）”；
- 每次
appendChild()或insertAdjacentHTML()后，立即调用你的翻译函数，例如translateNode(labelEl) - 该函数需递归查找子节点中所有带
data-i18n的元素，并根据当前语言包更新textContent（注意：不碰innerHTML，除非你明确标记了data-i18n-innerhtml） - 特别注意：Vue/React 组件内用
v-html或dangerouslySetInnerHTML渲染的label，需在mounted或useEffect里补调翻译，框架不会自动扫描
最容易被忽略的是 label 的语义边界——它不只是“旁边那段文字”，而是与控件形成可访问性关联的原子单元。一旦翻译键缺失、属性未同步、DOM 插入时机错位，整个表单的无障碍体验就垮了一半。
