核心是用 data-i18n 属性标记可翻译元素，结合 locales 对象动态更新文本/属性值，语言存 localStorage 并同步 html lang 属性，支持属性翻译（如 placeholder）、资源路径切换及降级处理。
怎么用 JavaScript 动态切换 HTML 页面语言
核心是把不同语言的文本内容抽离成 JSON 或 JS 对象，再根据用户选择实时替换 DOM 中的文案。不推荐用多个 HTML 文件来回跳转，维护成本高、SEO 差、体验卡顿。
常见错误是直接 innerHTML 整页重写，导致事件监听丢失、表单状态清空、焦点错乱。正确做法是只更新带 data-i18n 属性的元素文本或属性值。
- 准备两套文案对象，比如
locales.zh和locales.en，键名统一（如"header.title"） - 页面加载后调用
loadLanguage(navigator.language || "zh")初始化 - 切换时只遍历所有
[data-i18n]元素，用element.textContent = t(key)更新 - 需要翻译
placeholder、title、alt等属性？加data-i18n-attr="placeholder"单独处理
如何让语言偏好持久化并自动匹配系统设置
用户切一次语言就忘，体验断层。必须存到 localStorage，且首次访问时主动读取 navigator.language 做 fallback，而不是硬写死 "zh"。
注意 navigator.language 返回的是 "zh-CN" 这类带区域码的字符串，而你的 locale key 很可能只是 "zh"。得做截断或映射：
立即学习“前端免费学习笔记（深入）”；
const lang = localStorage.getItem("lang") ||
navigator.language.split("-")[0] || "en";
- 每次调用
setLanguage(lang)时同步写入localStorage.setItem("lang", lang) - 在
上也动态更新lang属性，方便 CSS 选择器（如html[lang="en"] .btn）和屏幕阅读器识别 - 别忘了监听
storage事件——其他标签页改了语言，当前页也要响应
为什么用 data-i18n 比用 class 名或 ID 更可靠
用 class="header-title" 去查元素再翻译，容易和样式类冲突；用 id="login-btn" 则限制一个页面只能有一个登录按钮。而 data-i18n 是语义专用属性，无副作用。
-
欢迎
-
—— 翻译 placeholder -
- 支持嵌套键：
"nav.items.home"，结构清晰，多人协作不易撞 key
静态资源路径怎么随语言切换（比如 banner 图、PDF 下载链接）
图片、PDF、音频等资源本身不支持“翻译”，但路径可以按语言组织。比如 /i18n/zh/banner.jpg 和 /i18n/en/banner.jpg。
不要在 HTML 里写死 src="/banner.jpg"，而是用 data-i18n-src 属性标记，由 JS 根据当前语言拼路径：
@@##@@ // → 当前语言为 en 时，自动设为 src="/i18n/en/banner.jpg"
- 路径映射规则写在配置里，比如
assetMap: { "assets.banner": "banner.jpg" } - 避免在 JS 里拼接字符串，用
new URL(path, base)处理相对路径更安全 - 如果资源不存在，要有降级逻辑（比如默认加载
/i18n/en/下的文件，再 fallback 到根目录）
