HTML 的 lang 属性本身不支持运行时语言切换，需用 JavaScript 动态更新 document.documentElement.lang、替换 data-i18n 元素文本，并存入 localStorage 以持久化；切勿仅改 lang 而不更新文案，且应避免整页重绘。
怎么用 lang 属性切换页面语言
HTML 本身不提供“切换语言”的运行时能力，lang 是一个静态语义属性，只告诉浏览器和辅助工具当前文本的语言类型。真要实现按钮切换，必须配合 JavaScript 动态更新 lang、替换文案、并持久化用户选择。
常见错误是只改了 却没动实际文字内容，结果屏幕阅读器读对了语言，但界面上还是英文——用户根本没感知。
- 每次切换都要同步更新
元素的lang属性（影响字体回退、断字、语音合成） - 文案不能硬编码在 HTML 里，得存在 JS 对象或外部 JSON 中，按
lang键查值 - 建议用
localStorage记住用户上次选的语言，刷新后自动恢复
button 点击后如何安全更新 lang 和文案
别直接 innerHTML 整页重绘，容易丢失状态、触发重复事件或破坏焦点。推荐最小粒度更新：只换带 data-i18n 的元素文本内容，并更新 的 lang。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('lang-toggle').addEventListener('click', () => {
const html = document.documentElement;
const current = html.lang;
const next = current === 'zh' ? 'en' : 'zh';
html.lang = next;
localStorage.setItem('preferred-lang', next);
// 遍历所有 data-i18n 属性的元素，替换成对应语言文案
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.dataset.i18n;
el.textContent = i18n[next][key] || el.textContent;
});
});
注意：i18n 是你提前定义好的双语对象，不是框架 API；data-i18n 值应为键名（如 "header.title"），不是语言代码。
为什么不能只靠 hreflang 或 link[rel="alternate"]
这些标签只用于 SEO 和浏览器地址栏语言建议，对当前页面行为零影响。用户点“切换中文”按钮，浏览器不会自动跳转到 index-zh.html，也不会重载页面——除非你手动写 window.location.href，但这会丢失表单状态、滚动位置、URL 参数。
真实项目中混用多页方案（每个语言一个 HTML）和单页方案（JS 切换）很危险：
-
link[rel="alternate"][hreflang="zh"]必须指向真实可访问的独立 URL，否则 Google 会忽略 - 如果用了 JS 切换，就别再加
hreflang指向不同页面，会造成语义冲突 - 服务端渲染（SSR）场景下，
lang应由服务端根据请求头Accept-Language决定首屏值，JS 再接管后续交互
字体和排版差异带来的隐藏问题
中英文混排时，lang="zh" 和 lang="en" 影响的不只是翻译——还决定断行策略、标点挤压、数字字体、甚至是否启用连字（ligature）。比如 Chrome 对 lang="ja" 启用更激进的日文断行，而 lang="en" 下某些中文字体可能 fallback 到宋体，导致粗细突变。
实操建议：
- 在 CSS 中用
:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB"; }做微调，别只靠全局 font-family - 避免在
lang切换后强制重排整个 DOM，用getComputedStyle检查line-height或font-size是否因字体变化而偏移 - 如果用了 Web Font，确保中英文字体都已预加载，否则切换瞬间会出现 FOUT（Flash of Unstyled Text）
最常被跳过的环节是：没验证屏幕阅读器在切换后是否真的用对应语言发音。这需要手动打开 VoiceOver 或 NVDA 测试，不能只看 lang 属性有没有改成功。
