lang属性必须逐元素设置而非仅设根节点，否则导致读屏错误、标点间距异常、字体回退失效；所有语义化文本容器需显式声明lang，data-i18n须覆盖placeholder/alt/title等属性，动态dom需手动触发翻译，语言包加载须校验mime类型与fallback链。
只改 document.documentElement.lang 不会让页面真正“变成”另一种语言——文字不变、屏幕阅读器读错、标点间距乱、字体回退失效，这是绝大多数人踩的第一个坑。
lang 属性必须逐元素设置，不能只靠根节点继承
浏览器和辅助技术（如 VoiceOver、NVDA）不看父级 lang 值来决定文本渲染行为。它们逐个检查每个含文本元素自身的 lang 属性：标点宽度、连字规则、语音引擎选择、字体 fallback 链都依赖这个值。
-
<p>欢迎</p>即使document.documentElement.lang = 'zh-Hans'，若该<p></p>没写lang="zh-Hans"，仍可能被读作英文、顿号变窄、中文字体被日文字体覆盖 - 所有语义化文本容器都应显式加
lang：<h1 lang="zh-Hans"></h1>、<label lang="zh-Hans"></label>、<footer lang="zh-Hans"></footer> - 已有明确语言用途的元素（如
<pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">）切换语言时要保留原lang值，这是合法混排，不是 bug -
<title></title>和<meta name="description">不继承根节点lang，必须用 JS 单独更新
data-i18n 必须覆盖所有可翻译属性，不只是 textContent
data-i18n 默认只替换元素的 textContent，对 placeholder、alt、title、aria-label 等属性完全无效。漏掉任一后缀，对应文案就会卡在旧语言。
- 表单控件必须显式标注：
data-i18n-placeholder="search_hint"、data-i18n-alt="avatar_desc"、data-i18n-title="tooltip_info" -
value属性一般不翻译（属于用户输入数据），但<button></button>和<input type="submit">的显示文案建议统一走textContent更新，避免value被意外提交 - 含 HTML 结构的文案（如 “请阅读服务条款”）必须用
innerHTML替换，且语言包里对应值要是可信纯 HTML 片段（无用户输入、不执行 JS），否则有 XSS 风险 - 别在
<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre>内部加data-i18n——这些节点不参与文本渲染，JS 替换无效
动态插入的 DOM 必须手动触发翻译，不会自动监听
AJAX 加载的弹窗、分页表格新行、Tab 面板内容插入后，里面的 data-i18n 标记只是字符串，不会自动变成对应语言文本。DOM 插入和 i18n 处理是两件事，没有隐式绑定。
- 弹窗打开后，需在
appendChild()或insertAdjacentHTML()后立即调用翻译函数，遍历新节点 - 分页表格每页请求返回新
<tr>，必须对这批新 <code><tr> 单独执行翻译逻辑，不能依赖全局扫描 <li>不要用 <code>MutationObserver自动监听——它无法区分哪些节点是待翻译的、哪些是代码片段或配置项，容易误触、性能差、难以调试 - 懒加载模块（如
import('./modal.js')）完成并挂载 DOM 后，也需同步触发翻译 - 服务器返回语言包时，
Content-Type必须是application/json，否则response.json()会抛错 -
fetch外层必须try/catch，内部检查response.ok和response.headers.get('content-type')?.includes('application/json') - fallback 顺序必须严格：先试完整 BCP 47 码（如
zh-HK）→ 再截主语言（zh）→ 最后退到默认语言（如en） - 所有语言包结构必须扁平、键名完全对齐；某语言暂未翻译也要保留键，设为空字符串，否则查不到 key 就留白
语言包加载与 fallback 必须校验 MIME 类型和链路完整性
每次切语言都 fetch('/locales/zh.json') 不仅慢，还容易因 HTTP 状态码、Content-Type 错误导致静默失败，最终页面留白或部分文案消失。
最易被忽略的是 <title></title> 和 <meta name="description"> 的更新时机——它们不在常规 DOM 扫描范围内，且影响 SEO 和分享卡片，必须在语言切换流程末尾单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
