data-i18n属性必须仅加在用户可见文本元素（如h1、p、button）上，区分data-i18n-placeholder等后缀，同步更新document.documentelement.lang，语言包加载需try/catch并双层fallback，动态dom插入后须立即调用翻译函数。
data-i18n 属性怎么加才不破坏可访问性
加错位置或忽略语义，会让屏幕阅读器读错、字体回退失效、甚至被搜索引擎忽略。关键不是“能不能换文字”，而是“换完后浏览器和辅助技术是否仍能正确识别语言上下文”。
-
data-i18n只能加在承载**用户可见文本内容**的元素上：<h1></h1>、<p></p>、<button></button>、<label></label>——<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre>这类节点加了也无效 - 表单控件必须显式区分属性：
data-i18n-placeholder、data-i18n-title、data-i18n-alt；一个data-i18n不会自动覆盖所有属性 - 带 HTML 结构的文案（如“请登录继续”）必须用
innerHTML替换，但语言包里对应值得是**纯 HTML 字符串**，且需确保来源可信，否则有 XSS 风险 - 键名必须全小写+英文点号分隔（如
form.submit），禁止空格、中文、驼峰——后续对接构建工具或服务端时极易错位
document.documentElement.lang 为什么不能只设一次
只在初始化时设 document.documentElement.lang = 'zh-Hans'，切换语言后不更新，等于告诉浏览器“页面语言没变”，但文案已换——这是最常被忽略的可访问性断点。
- 屏幕阅读器按
lang值决定发音规则，设错或不更新会导致中文朗读成日语腔调、标点停顿混乱 - Chrome 翻译按钮是否激活，完全依赖根
lang值；设成en却显示中文，翻译功能直接失灵 - 中日韩混排时字体 fallback 链（比如
lang="ja"才可能启用 Meiryo）由该属性触发，不更新就回退到系统默认字体，易出现方块 - 局部多语言内容（如
<p lang="en">API</p>）不会继承根lang，必须手动保留其原有lang值，否则会被批量脚本覆盖
JSON 语言包加载失败时为什么页面变空白
不是报错，而是静默 fallback 失效——fetch 返回 404 或 MIME 类型不对（如服务器返回 text/plain 而非 application/json），JS 读不到键值，所有 data-i18n 元素就显示原始 key，比如 “header_title”。
- 路径必须动态拼接：
./locales/${lang}.json，别硬写./zh.json；lang值要用 BCP 47 标准码（zh-Hans可，zh_CN或chinese会被忽略） - fetch 必须包
try/catch，且检查response.ok和response.headers.get('content-type')?.includes('application/json') - fallback 逻辑要兜底两层：加载失败 → 退到
en.json；key 不存在 → 退到空字符串或占位符（如"<missing>"</missing>），否则留白 - 所有语言包键名必须严格一致，哪怕某语言暂未翻译，也要留空字符串，否则 JS 查不到 key 就跳过
动态插入的 DOM 怎么保证翻译生效
弹窗、表格行、异步加载的卡片等，如果插入后不主动触发翻译，data-i18n 就只是个静态属性，不会自动生效。
- 插入后必须立即调用翻译函数，例如：
translateElement(newNode)或translateDocument(newNode)，不能等下次全局刷新 - 避免在
innerHTML += ...后再遍历处理——DOM 已解析，但新节点未被翻译函数捕获；应先构造 DocumentFragment，翻译后再 append - 若使用事件委托监听动态内容（如表格行点击展开），回调里插入的新节点必须同步翻译，否则首次展示就是英文/占位符
- IE11 不支持
element.dataset.i18n，读取时得用element.getAttribute('data-i18n')兜底，否则属性根本取不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
