如何在HTML中利用data自定义属性标签实现多语言文本的即时切换-html教程-PHP中文网

data-i18n属性需显式添加到所有可翻译位置，包括placeholder、title、alt等带后缀的属性；语言包须按规范路径和扁平键名组织；切换语言需同步更新document.lang、相关lang属性及localStorage；动态插入节点须手动调用翻译函数。

如何在html中利用data自定义属性标签实现多语言文本的即时切换

data-i18n 属性必须显式加在所有可翻译位置

只给

加属性远远不够。placeholder、title、alt 这些属性不会被 textContent 更新，漏掉就永远显示旧语言。

必须按需使用带后缀的属性：

value 一般跳过处理——它是用户输入数据，不是界面文案；<script></script>、、

内部不渲染可见文本，加 data-i18n 无效。

JSON 语言包结构和加载必须严格对齐

每个语言一个文件，路径统一为 ./locales/${lang}.json，比如 ./locales/zh-Hans.json、./locales/en-US.json。键名必须扁平、全小写+下划线（nav_home ✅，navHome ❌），且所有语言文件键名完全一致。

加载失败时页面不会报错，只会显示原始 key（如 form_submit），因为 JS 默认 fallback 到 undefined。必须主动兜底：

用 try/catch 包裹整个 fetch() 和 .json() 流程
检查 response.ok 和 response.headers.get('content-type')?.includes('application/json')
某语言暂未翻译的项，也要保留键并设为空字符串："btn_submit": ""，不能删键

切换语言时必须同步更新三处 DOM 语义

只替换文字是假切换。屏幕阅读器、字体回退、SEO 都依赖 lang 属性，而它不继承，只看每个元素自己的值。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

一次切换必须同时做三件事：

设置 document.documentElement.lang = 'ja'（注意短横线，不是下划线）
遍历所有已存在的 [lang] 元素，只更新那些“本该随主语言变”的（如是引文，应跳过；是主内容，要重设）
执行 localStorage.setItem('lang', 'ja') —— 必须在语言包加载完成、DOM 更新完毕后才写，否则刷新可能拿到未就绪状态


动态插入节点必须手动触发翻译
AJAX 加载的弹窗、表格行、懒加载模块，插入 DOM 后不会自动生效。JS 不会监听 DOMNodeInserted（已废弃），也没法靠 MutationObserver 自动识别 data-i18n。
正确做法是：节点插入后立即调用翻译函数，例如：
const el = document.createElement('div');
el.innerHTML = '<button data-i18n="modal.confirm"></button>';
container.appendChild(el);
translateElement(el); // 手动触发
IE11 兼容性也得注意：el.dataset.i18n 会失效，必须用 el.getAttribute('data-i18n') 兜底。
最易被忽略的是：语言包键名与 HTML 中 data-i18n 值大小写/分隔符不一致，或 JSON 文件 MIME 类型不对（非 application/json），这两处一出错，整页就静默 fallback 成 key 字面量——连控制台都不报错。