导航栏语言按钮必须用，因其原生可聚焦、支持键盘操作且热区完整；data-i18n仅处理文本，placeholder/title/alt需显式加后缀；动态插入的导航项须手动触发翻译；切换语言时须同步更新document.documentElement.lang及所有子元素lang属性。
导航栏语言按钮必须用 <button></button>，别用 <img alt="HTML横向导航栏多语言菜单切换的教程" > 或 <span></span>
直接在 <img alt="HTML横向导航栏多语言菜单切换的教程" > 上写 onclick 只响应图片区域点击，用户点文字“EN”或“中文”根本没反应。用 <button></button> 是唯一稳妥选择：它原生可聚焦、支持空格/回车触发、屏幕阅读器能正确播报，整个按钮框都是热区。
常见错误写法：<img id="zh" src="cn.svg" onclick="switchLang('zh')" alt="HTML横向导航栏多语言菜单切换的教程" > —— 这个 onclick 绑定只对图像生效，旁边的文字是纯文本，事件监听不到。
正确结构示例：
<nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li class="lang-switcher">
<button type="button" data-lang="en">EN</button>
<button type="button" data-lang="zh-Hans">中文</button>
<button type="button" data-lang="ja">日本語</button>
</li>
</ul>
</nav>
data-i18n 只管文本，placeholder/title/alt 得单独标
导航栏里常见多语言内容不只是链接文字，还有搜索框的 placeholder、下拉菜单按钮的 title、语言图标按钮的 alt。这些属性不会被 data-i18n 自动识别，必须显式加后缀：
立即学习“前端免费学习笔记（深入）”；
<input data-i18n-placeholder="search_hint"><button data-i18n-title="lang_switcher_tip">EN</button><img data-i18n-alt="language_icon" src="lang.svg">
漏掉任意一个，切换语言后对应位置就留空或显示键名（比如 “search_hint” 字符串），不是翻译失败，是压根没告诉 JS 去换哪个属性。
动态插入的导航项（如权限控制菜单）必须手动触发翻译
如果导航栏部分项由 JS 拼接后 innerHTML 插入（比如根据登录态显示 “Dashboard” 或 “Admin Panel”），这些新节点不会自动被翻译函数扫描到 —— querySelectorAll('[data-i18n]') 在页面加载时只查一次 DOM 快照。
解决方案很简单：插入完立即调用翻译逻辑，例如：
function appendNavItems(items) {
const ul = document.querySelector('.main-nav ul');
items.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<a href="https://www.php.cn/link/907353eab452f43367a8c29311399935" data-i18n="${item.key}">${item.key}</a>`;
ul.appendChild(li);
});
translateCurrentPage(); // 手动再跑一遍翻译
}
同理，下拉子菜单、权限过滤后的侧边栏、AJAX 加载的二级导航，都得在 DOM 插入后立刻补调翻译，否则永远显示键名。
切换语言时，document.documentElement.lang 和子元素 lang 必须同步更新
只改 document.documentElement.lang = 'zh-Hans' 是不够的。浏览器按每个节点自己的 lang 属性决定字体回退、标点间距、语音朗读，不是靠继承。导航栏里如果有英文术语、代码片段、品牌名（如 “React”、“API”），它们必须保留 lang="en"，不能被全局覆盖。
所以切换语言的完整动作包括：
- 更新
document.documentElement.lang - 遍历所有带
lang的元素，重置为当前主语言（除非明确标注了其他语言） - 更新所有
data-i18n*对应的文本和属性值 - 把选中语言存进
localStorage，但首次加载仍优先看navigator.language
最容易被忽略的是第二点：不重置子元素 lang，会导致中文字体渲染异常（比如标点撑开、全角空格错位），尤其在 macOS 和 iOS 上特别明显。
