html根标签的lang属性必须正确设置为小写连字符格式（如zh-cn），且唯一有效；spa切换语言时须更新document.documentelement.lang，局部多语言内容需显式声明lang，hreflang与lang须严格对应以保障seo和辅助技术正常工作。
lang 属性写错、漏写或只设在 body 上，字体回退就失效，屏幕阅读器会把“你好”读成 “ni hao”，搜索引擎可能当你是英文站——这不是体验问题，是语义丢失。
html 根标签的 lang 必须设对且唯一
浏览器和辅助技术只认 document.documentElement.lang（即 ），其他位置设了也白设。SPA 切换语言时常见错误是只改 body.lang 或状态变量，VoiceOver 仍用旧语音引擎，Chrome 翻译按钮也不出现。
- 必须用小写 + 连字符 + IANA 注册值：
zh-CN、ja-JP、en-GB；zh_cn、ZH-CN、chinese全部被忽略 - 简繁体要区分：
zh-Hans（简体）和zh-Hant（繁体）触发不同拼音标注与字体链，混用会导致繁体字缺字 - 服务端渲染页，需根据
Accept-Language头或 URL 路径（如/zh/）实时注入，不能靠 JS 延迟设置，否则 Safari 光标定位异常、::lang()伪类不生效
局部多语言内容必须显式加 lang，不能靠继承
浏览器不会自动识别「这段是英文术语」「这行是日文注释」。不加 lang，整段就按根语言处理——结果是英文单词被中文字体渲染（字母挤压）、日文假名宽度异常、拼写检查失效。
- 外文引用：
<blockquote lang="fr">Je suis français.</blockquote> - 代码片段：
<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre>（bash非标准语言码，但被高亮工具接受；更稳妥可写lang="en"） - 技术名词：
<code lang="en">useState，方便 IDE 插件做英文语义高亮 - 避免在纯样式容器（如仅含
class="card"的div）上滥用lang，无语义的声明反而干扰辅助技术
:lang() 伪类里 font-family 的顺序决定是否翻车
:lang(zh) 不是万能钥匙——它依赖底层语言标签解析器是否把 zh-CN 视为 zh 的子类，Chrome 和 Safari 行为不一致。更稳的是用属性选择器兜底，但字体链本身顺序才是关键。
- 语言专用字体必须放最前：
"PingFang SC"（简体）、"Hiragino Kaku Gothic Pro"（日文）、"Apple SD Gothic Neo"（韩文） - 禁止跨语言混搭：在
:lang(zh)里塞"Meiryo"，中文显示正常，但遇到日文假名时宽度错乱 - 末尾必须是
sans-serif或serif，不能是system-ui——它会绕过所有语言字体，直接 fallback 到系统拉丁字体 - 字体名含空格必须用双引号：
"Noto Sans SC"，写成Noto Sans SC会被拆成三个独立字体名，全部失败
lang 和 hreflang 必须严格对应，否则 SEO 和翻译全乱
hreflang 是给搜索引擎看的，lang 是给浏览器和辅助技术看的，两者必须一致。常见错误是 hreflang="en" 指向英文页，但页面 没改——Google 可能索引错版本，用户点翻译按钮后先翻成中文再翻回英文，语义崩坏。
-
hreflang值用 ISO 639-1 双字母码（en、ja），而lang值用 BCP 47（en-US、ja-JP），不要混用 - 每个语言版本页面都要包含完整互指块：
<link rel="alternate" hreflang="en" href="https://example.com/en/">和<link rel="alternate" hreflang="ja" href="https://example.com/ja/"> -
hreflang="x-default"强烈建议加上，指向默认语言页，避免用户语言未匹配时返回 404 或错版 - 静态多语言站点最稳路径是子目录结构：
/（英文）、/zh/（简体）、/ja/（日文），每个目录下 HTML 的硬编码，不靠 JS 注入
最容易被忽略的不是怎么写，而是「谁来保证它一直对」：后端返回的 lang 值（比如 ZH-CN 或 zh_ch）必须前端标准化为小写+连字符；动态插入 DOM 的元素，如果带多语言文本，得立刻补上 lang 属性，不能等后续批量脚本扫——语义断点往往就发生在那一帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
