data-i18n是唯一兼顾可访问性、SEO与运行时切换的HTML原生方案；必须显式标记每个可翻译节点及对应属性（如data-i18n-placeholder），同步更新document.documentElement.lang和各元素lang值，并为动态DOM手动触发翻译。
data-i18n 属性是唯一能真正落地、不依赖框架又兼顾可访问性与 SEO 的 HTML 全局属性方案。其他所谓“全局属性切换”（比如只改 lang 或靠 class 控制显隐）在屏幕阅读器、字体回退、搜索引擎抓取上都会出问题。
为什么不能只靠 lang 属性切换语言
改 document.documentElement.lang 只是改了个字符串，DOM 已渲染完成，浏览器不会重解析文本节点的语言归属。屏幕阅读器仍按旧语音引擎朗读，Chrome 翻译按钮不激活，:lang(en) CSS 伪类也不重新匹配。
更关键的是：lang 是内容语言声明，不是翻译指令。它告诉浏览器“这段文字是什么语言”，而不是“把它翻成什么语言”。没配套的文案替换，用户看到的还是原始中文或英文。
- 必须同时做两件事：批量更新
textContent/placeholder等属性 + 同步设置每个含语言信息的元素的lang值 -
lang值必须符合 BCP 47 标准，zh-CN可用，zh_CN或chinese会被忽略 - 局部多语言内容（如
<p lang="en">API</p>）必须保留原lang，不能被主语言覆盖
data-i18n 怎么打标才不漏、不崩
它不是自动识别机制，而是显式绑定协议：每个要翻译的节点都得手动加属性，JS 才能查到并替换。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 适用标签：只对承载可见文本的元素有效 ——
<h1>、<p>、<button>、<input>、<textarea>、<svg><text>等；<script>、<style>、<pre>加了也无效 - 属性后缀必须明确：
data-i18n只管textContent；data-i18n-placeholder管placeholder；data-i18n-title管title；data-i18n-alt管alt - 键名必须全小写+英文点号或下划线分隔，如
form.submit或search_hint；禁用空格、中文、驼峰、连字符 - IE11 不支持
element.dataset.i18n，得用element.getAttribute('data-i18n')兜底
JSON 语言包加载失败时页面直接变空白？
这是最常被忽视的致命点：fetch 失败、路径写错、MIME 类型不对、key 缺失，都会导致 textContent 被设为 undefined，最终显示为空白或原始键名（如 "header_title"）。
立即学习“前端免费学习笔记（深入）”；
- fetch 必须包在
try/catch里，捕获TypeError: Failed to fetch - 成功响应后必须检查
response.ok === true和response.headers.get('Content-Type')?.includes('application/json') - fallback 不能只退到内置对象，得退到一个完整、扁平、键名对齐的备用 JSON 对象，例如：
{ "header_title": "Welcome", "login_btn": "Login" } - 语言包文件路径必须动态拼接：
./i18n/${lang}.json，别硬写死成./zh.json
表单选项、动态提示、SVG 文本这些容易被跳过的场景
静态 HTML 里的 data-i18n 好处理，但以下三类必须单独编码逻辑，否则一换语言就露馅：
-
<select data-i18n="country"><option>中国</option></select>→ 需遍历select[data-i18n] option，查语言包中"country.options"数组逐个赋值 - JS 动态弹出的
alert()、confirm()、Toast → 封装t('common_error')函数，内部查当前语言包，不能依赖 HTML 属性 -
<svg><text data-i18n="download">下载</text></svg>→ JS 中需识别SVGTextElement类型，走特殊替换路径，否则textContent不生效
data-i18n 标记、却实际需要翻译的地方——比如下拉框的 option、JS 弹窗、SVG 文本、甚至 title 属性——有没有被系统性覆盖”。漏掉任意一项，用户就会在某个角落突然看到中文混着英文，或者点击按钮后弹出未翻译的提示。 
