怎样让网页支持多语言切换？Html标签Lang属性定义语言环境-html教程-PHP中文网

网页多语言切换必须在服务端或首屏html中正确设置lang属性，js动态修改无效；lang值须符合bcp 47规范（如zh-cn），区分大小写和短横线；局部混排需显式标注lang；:lang()样式需枚举所有可能变体或简化策略。

怎样让网页支持多语言切换？html标签lang属性定义语言环境

网页支持多语言切换，不能只靠 JS 改 document.documentElement.lang —— 那只是改了根标签的值，已渲染的文本、屏幕阅读器、浏览器翻译和 CSS :lang() 伪类都不会重新响应。

浏览器和辅助技术（如 NVDA、JAWS）只读取初始 HTML 的，后续用 JS 赋值不会触发语音引擎重载或翻译按钮激活。动态站点（React/Vue SSR）必须在服务端吐出的首屏 HTML 里就带正确 lang，否则无障碍功能从一开始就是错的。

SSR 页面：根据请求头 Accept-Language 或用户登录态，在模板中注入
静态生成站点（Hugo/Jekyll）：每个语言版本生成独立 HTML 文件，lang 硬编码进模板，不依赖 JS
纯前端 SPA：语言切换时强制整页刷新（window.location.href），或至少触发 document.documentElement.outerHTML 重写并清空 ARIA 缓存（但兼容性差，不推荐）

写错 lang 不报错，但等于没写——搜索引擎忽略、屏幕阅读器朗读错、:lang(zh) { quotes: "「" "」"; } 样式完全不生效。

✅ 正确写法：zh-CN、en-US、pt-BR、zh-Hans（注意是短横线 -，不是下划线 _）
❌ 典型错误：zh_CN、Chinese、zh-ch、cn、zh-hans-cn（IANA 不收录三段式，Chrome 会静默降级为 zh）
选 zh-CN 还是 zh-Hans？多数 CMS、SEO 工具、翻译插件只认 zh-CN；zh-Hans 仅当你需强调“简体字”且明确排除港澳台繁体场景时才用

只定义主语言，不影响内部英文引文、代码块、法语术语的识别。屏幕阅读器、Chrome 翻译、拼写检查都依赖具体元素上的 lang 属性。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

英文代码注释：<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>（别用 lang="bash"，那不是合法语言码）
日文引用：<blockquote lang="ja">ありがとう</blockquote>
中英混排段落里，英文部分单独包裹：<p>我们使用 <span lang="en">React Router</span> 实现路由</p>
避免给 <div> 批量加 <code>lang 覆盖子元素——语义不清，且可能干扰父级 :lang() 样式匹配
:lang() 伪类样式要小心匹配逻辑

CSS 的 :lang(zh) 只匹配 lang="zh"，不匹配 lang="zh-CN"；而 :lang(zh-CN) 也不匹配 lang="zh-Hans"。想覆盖所有中文变体，得写全：
```
/* 这样才能覆盖 zh, zh-CN, zh-TW, zh-Hans, zh-Hant */
:lang(zh), :lang(zh-CN), :lang(zh-TW), :lang(zh-Hans), :lang(zh-Hant) {
  font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
```
更稳妥的做法是：主语言用 zh-CN，局部切换只用 en、ja、ko 这类无地域后缀的通用码，降低 CSS 维护成本。

最容易被忽略的是：页面加载后，即使你用 JS 把所有 lang 属性都改了，已激活的屏幕阅读器也不会重读——它只认初始 DOM。所以语言切换不是“换皮肤”，而是“换语境”，得从 HTML 根上重建。