最可控的i18n方案是data-i18n标记+独立json语言包+localstorage记忆；需为所有可见文本节点显式添加data-i18n，属性值如placeholder/title等须用对应后缀，动态dom插入后须立即翻译，json加载失败需fallback至完整码→主语言→默认语言，且必须同步更新各元素lang属性以保障可访问性与seo。
直接用 data-i18n 标记 + 独立 JSON 语言包 + localStorage 记忆选择，是当前最可控、调试最直观、不依赖构建工具或框架的方案。硬编码文案、只改 document.documentElement.lang 或靠 CSS :lang() 伪类驱动，都会在可访问性、动态 DOM、SEO 或 fallback 场景中翻车。
怎么给 HTML 元素打 data-i18n 标记才不会漏掉关键属性
所有可见文本节点（<h1></h1>、<p></p>、<button></button>、<label></label>）必须显式加 data-i18n 属性，值为统一英文键名，比如 "nav_home"；但仅这样远远不够：
-
placeholder、title、alt、value这类属性不会被textContent覆盖，必须单独处理 —— 加data-i18n-placeholder、data-i18n-title等对应后缀 - 不要在
<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre>内部加data-i18n，这些节点不参与渲染，JS 替换无效 - 含 HTML 结构的文案（如“请阅读 使用条款”）要用
innerHTML赋值，但语言包里对应值必须是可信纯 HTML 片段，否则有 XSS 风险 - 动态插入的 DOM（弹窗、表格行、AJAX 返回内容）必须在插入后立即调用翻译函数，否则不会自动生效
JSON 语言包加载失败时页面为啥全白？
因为没做 fallback —— fetch 失败、响应不是 JSON、或 key 缺失时，JS 查不到值就留空，而用户看不到任何提示。正确做法是：
- 路径拼接用
./locales/${lang}.json，别写死成./zh.json；加try/catch包裹fetch()和response.json() - fallback 优先级：先试用户选的完整码（如
zh-HK），再截断主语言（zh），最后退到默认语言（如en） - 所有语言包结构必须严格扁平、键名完全一致；某语言暂未翻译，也要保留键并设为空字符串
"btn_submit": ""，避免查不到 key 就跳过 - 服务器返回 JSON 时，MIME 类型必须是
application/json；否则fetch可能静默失败，控制台也不报错
为什么只改 document.documentElement.lang 屏幕阅读器还是读中文？
因为浏览器和辅助技术按每个元素自身的 lang 属性决定语音、字体回退、标点间距——不是继承来的。根节点改了，已渲染的子元素完全不受影响：
- 切换语言后，必须遍历所有已有
lang属性的元素（如<p lang="en">API</p>、<pre class="brush:php;toolbar:false;" lang="bash"></pre>），把它们的lang值也同步更新（除非明确要保留原语言） -
document.documentElement.lang必须设成 BCP 47 标准码（如zh-Hans、ja），zh_CN或chinese会被忽略，甚至触发 fallback 失败 - 不要指望全局
lang覆盖代码块或引文；混排内容必须自己显式写lang="en"，否则日语用户看到英文术语可能显示为方块字 -
localStorage.setItem('lang', 'ja')必须在语言包成功加载、文本和lang属性都更新完之后再执行，否则刷新页面会拿到未就绪的状态
最容易被忽略的是混排内容的 lang 维护和 fallback 的兜底层级 —— 它们不出现在控制台报错里，但会让整页文案消失、屏幕阅读器读错、搜索引擎抓取错版本。别让“看起来切换成功了”骗过你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
