html 标签需手动实现多语言：为每个 显式添加 data-i18n 并同步更新 textcontent 和 lang 属性；语言包应扁平化、带 fallback；动态插入的 `` 必须调用翻译函数即时处理。

HTML `` 标签本身不自动支持多语言，选项文字（`` 的文本）必须随语言切换动态更新，同时要确保 `lang` 属性准确反映当前语言，否则屏幕阅读器、字体渲染和标点处理都会出错。

给每个 单独打翻译标记

`data-i18n` 不能只加在 `` 上——它不会自动作用到子 `` 元素。必须显式为每个 ` ` 添加 `data-i18n`，或统一用父级键 + 约定结构（如 `"status.options"` 对应数组）。

• 推荐写法：<select id="status-select"><option data-i18n="status.pending">待处理</option> <option data-i18n="status.done">已完成</option></select>
• JS 加载语言包后，遍历 select#status-select option，根据每个元素的 dataset.i18n 查对应文案并设 textContent
• 避免用 value 存文案（如 <option value="pending">待处理</option>），因为 value 不参与翻译，且表单提交时可能误传原始值

同步更新 select 和所有 option 的 lang 属性

仅设置 document.documentElement.lang = 'zh-CN' 是无效的。浏览器按每个节点自己的 lang 决定语音、字体回退和标点间距。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 初始化时，给 `` 和每个 `` 都加上 lang="zh-CN"（或当前语言码）
• 切换语言后，需重新遍历并更新：既改文本，也改 lang 值，例如 optionEl.lang = 'en-US'
• 若某 `` 内容含英文术语（如 “API Key”），可单独保留 lang="en"，不随主语言变化

配合 JSON 语言包结构与安全加载

语言包要扁平、键名一致、带 fallback，否则 `` 文字会留空或显示键名。

• 示例 zh.json：{"status.pending": "待处理", "status.done": "已完成"}
• 示例 en.json：{"status.pending": "Pending", "status.done": "Done"}
• 加载失败时，降级到内置默认对象（如 { "status.pending": "Pending" }），绝不留白
• 用 try/catch + response.ok 包裹 fetch()，防止网络错误导致整组选项消失

处理动态插入或 JS 生成的 select

页面初始加载后的 AJAX 表单、弹窗、Tab 页签中新增的 ``，不会被首次翻译逻辑覆盖。

• 每次插入新 `` 后，立即调用翻译函数，例如 translateSelect(newSelectEl)
• 函数内部需识别 data-i18n 并遍历其 ``，逐个更新 textContent 和 lang
• 若选项由 JS 动态生成（如 options.forEach(o => select.appendChild(new Option(t(o.key), o.value)))），应在创建时就调用翻译函数 t() 获取文案

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！