先抛一个核心结论：针对多语言提示信息的最佳实践，是使用 `data-tip` 属性存储 JSON 字符串。 具体用法：为元素添加 `data-tip='{"en":"Enter email","zh":"请输入邮箱"}'`，通过 JavaScript 的 `dataset.tip` 读取并解析，再根据 `navigator.language` 匹配主语言码，若未匹配则回退到 `en`。这种方式能有效避免多字段冗余、`title` 不可控、`href`/`src` 误用以及 `dataset` 驼峰转换带来的陷阱。

利用 data-lang 属性与 dataset API 动态读取多语言提示文本

本质上，HTML 本身并不具备“根据浏览器语言自动加载不同提示”的能力，这需要借助 JavaScript 来实现。不过，我们可以通过 `data-lang` 或其他自定义属性，预先存储各语言版本的内容，然后使用 JS 读取当前 `navigator.language` 进行匹配。关键在于“按需提取”，而非“自动加载”。 许多开发者常犯的错误是将多语言字符串直接硬编码在 HTML 中，例如： ```html ``` 这种写法会导致字段数量庞大、难以维护，且无法应对 `zh-CN` 与 `zh-TW` 的区分需求。 更推荐的方案是： * **仅使用一个 `data-tip` 属性，值为 JSON 字符串**：`` * **通过 `element.dataset.tip` 读取后，用 `JSON.parse()` 解析**，再以 `navigator.language.slice(0,2)` 获取主语言码进行匹配 * **务必设置 fallback 机制**：当未找到对应语言时，回退到 `en` 或第一个可用键，否则页面会显示 `undefined`，严重影响用户体验

title 属性不适合作为多语言提示的主要载体

`title` 属性虽然能触发原生 tooltip 提示，但其缺点明显：延迟较长、样式无法自定义、移动端基本不触发，且搜索引擎和屏幕阅读器对其解析不够稳定。更关键的是，`title` 只能存储纯字符串，无法容纳结构化的语言数据。 如果非要使用 `title` 实现多语言，唯一可行的方式是运行时通过 JS 动态设置：`el.title = tips[lang] || tips.en`。但这实际上绕过了 HTML 属性的初衷，还可能被 React/Vue 等框架的 DOM diff 机制覆盖。 需要特别注意的几点： * 不要将翻译文本直接写入 `title`，例如 `title="请输入邮箱"`——这种做法会彻底锁定语言，用户切换浏览器语言后提示仍为中文 * 如果必须使用 `title`，可保留占位符如 `title="{{email_tip}}"`，再由 JS 替换，但需注意 XSS 风险 * 从无障碍访问角度，`aria-label` 比 `title` 更可靠，且同样支持动态更新

避免使用 href 或 src 属性加载语言包

部分开发者尝试通过 `href` 或 `src` 属性加载语言包，例如： ```html ``` 但这并非 HTML 属性的能力范围——`href`/`src` 触发的是资源请求，而非语言选择逻辑。是否加载、何时加载、加载失败如何处理，全部需要依赖 JavaScript 控制。 几点实用建议： * HTML 属性只能提供静态元数据，无法触发异步行为；所谓的“自动加载”，实际上是 JS 根据 `document.documentElement.lang` 或 cookie 来决定的 * 如需预加载，应使用 `rel="prefetch"` 或显式调用 `fetch()`，而非指望属性自动完成 * 注意缓存问题：同一页面多次切换语言时，避免重复 `fetch` 同一 JSON 文件，应将其缓存在内存或 `Map` 中

dataset 读取时需注意 key 名规范与大小写

`dataset` 的驼峰转换规则容易踩坑。例如 `data-tip-zh` 会转为 `tipZh`，`data-api-url` 变为 `apiUrl`。这种转换在遇到语言码含连字符时容易出错，比如 `data-tip-pt-br` 会转为 `tipPtBr`，但代码中若写成 `el.dataset.tipPt-br` 会导致语法错误。 几个实用技巧： * **语言码尽量使用下划线代替连字符**：`data-tip-pt_br` 会转为 `tipPt_br`，这是合法的变量名 * **统一使用小写语言主码**：如 `zh`、`en`、`ja`，避免 `ZH` 或 `zh-CN` 直接进入 key 名 * **调试时打印 `console.log(Object.keys(el.dataset))`**，确认实际生成的 key 名称，避免凭猜测编写代码 归根结底，多语言提示的真正难点不在于 HTML 属性怎么写，而在于语言码映射策略——用户设置了 `zh-HK`，应优先匹配 `zh` 还是 `zh-HK`？这个决策必须在 JavaScript 层明确处理，HTML 仅负责存储数据，不参与逻辑判断。