用 <select> 实现语言切换需确保语义与可访问性：必须设 id/name，value 用标准标签（如 zh-CN），切换时同步更新 <html lang> 并跳转对应语言路径，配合 hreflang 和 Accept-Language 优先级处理，禁用自定义下拉以保障无障碍支持。
怎么用 <select> 实现语言切换，又不破坏语义和可访问性
纯 HTML 下拉切换语言，核心不是“怎么显示选项”，而是“怎么让浏览器和屏幕阅读器知道这是语言切换，且切换后页面内容真能响应”。<select> 本身不触发页面跳转或重渲染，必须配合 JavaScript 才能生效——但很多人只写 HTML 就以为完事了。
常见错误现象：Uncaught TypeError: Cannot read property 'value' of null（JS 拿不到 <select> 元素），或下拉选了“zh”但页面文字没变、lang 属性没更新、搜索引擎仍抓取英文版。
- 必须给
<select>加id或name，否则 JS 很难稳定获取 - 每个
<option>的value应该是标准语言标签，比如en、zh-CN、ja，别用chinese或english_us - 切换时，除了跳转 URL（如
/zh/about），至少还要同步更新<html lang="zh-CN">，否则屏幕阅读器读音不会变
URL 路由怎么配才不踩 404 和 SEO 坑
语言切换本质是路由切换。如果用 window.location.href = '/ja/' + window.location.pathname 这类拼接，很容易在子路径出错（比如当前是 /blog/2024/what-is-webassembly，拼成 /ja//blog/2024/what-is-webassembly 多了个斜杠）。
更隐蔽的问题是：静态站点生成器（如 Hugo、Jekyll）或 CDN 通常靠路径前缀区分语言，/en/ 和 /zh/ 是不同物理目录；但如果你只改了 <html lang> 却没跳转，用户看到的仍是英文 HTML 文件——语言没切，只是“假装切了”。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
location.pathname.replace(/^\/(en|zh|ja)\//, '/' + nextLang + '/')做路径替换，先匹配现有语言前缀再换 - 确保服务器或构建工具对每个语言路径都生成了对应 HTML，否则 404 不是 JS 能兜住的
-
<link rel="alternate" hreflang="zh-CN" href="/zh/">必须出现在<head>里，不然 Google 不知道这是同一页面的不同语言版本
localStorage 记住用户上次选择，但别覆盖 Accept-Language
用户选过一次中文，下次进来自动切中文，这事看着简单，实际容易搞反优先级：浏览器的 Accept-Language 请求头才是第一信号，localStorage 只是补充。强行用本地存储覆盖掉用户的系统语言设置，反而显得不尊重用户习惯。
典型翻车场景：日本用户用英文系统查资料，Accept-Language: en-US,en;q=0.9，你却因为 localStorage 里存着 "ja" 就直接切日文——结果页面全是日文，但用户根本看不懂。
- 启动时先读
navigator.language或request.headers['accept-language']（服务端更准），再 fallback 到localStorage.getItem('preferred-lang') - 只有当用户**主动点击/选择**下拉项时，才写入
localStorage.setItem('preferred-lang', selectedValue) - 别用
localStorage存完整 URL，只存语言码（zh-CN），避免路径变更后失效
为什么不用 <button> + 自定义下拉代替 <select>
有人觉得原生 <select> 样式难改，就用 div 模拟下拉。这在移动端尤其危险：iOS Safari 对自定义下拉的触控焦点、键盘导航、VoiceOver 支持极差，role="combobox" 很难写全，一不小心就让视障用户完全无法操作。
原生 <select> 的优势不是“好看”，而是开箱即用的可访问性（键盘上下键、回车确认、屏幕阅读器自动播报选项数）、移动端原生弹窗适配、以及表单提交时自动携带值。样式问题用 appearance: none + 自定义箭头图标 + 少量 CSS 就能解决，没必要推倒重来。
- 禁用默认样式用
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - 箭头图标建议用伪元素
::after，别用额外<span>，否则会干扰屏幕阅读器朗读顺序 - 如果真要用自定义下拉，请务必测试 VoiceOver（iOS）和 NVDA（Windows），不通过就退回原生
<select>
语言切换真正难的从来不是下拉框长什么样，而是每次跳转是否保持语义一致性、是否尊重用户原始偏好、以及服务端能否精准返回对应语言的 HTML——这些环节漏掉一个，多语言就只剩个空壳。
