lang属性仅是语义标记，不触发翻译或行为变更，只向辅助技术、搜索引擎及css伪类声明文本语言；多语言适配需配合i18n库、服务端协商与翻译资源，lang是最后一步语义对齐。
lang 属性不是语言切换开关，只是语义标记
lang 属性本身不触发翻译、不加载对应语言资源、也不改变浏览器行为（比如字体回退或语音朗读音色），它只告诉辅助技术、搜索引擎和部分 CSS 伪类（如 :lang()）当前文本的自然语言。误以为设了 lang="ja" 就能自动显示日文界面，是常见误解。
实际多语言适配必须配合：前端 i18n 库（如 i18next、vue-i18n）、服务端语言协商（Accept-Language）、以及手动维护的翻译资源。而 lang 是这些机制落地后，**最后一步的语义对齐**——比如确保屏幕阅读器用日语发音，或让 q:lang(ja) { quotes: "「" "」" "『" "』"; } 生效。
设置 lang 的三种典型位置与优先级
HTML 中 lang 可出现在不同层级，浏览器按就近原则生效：
-
：全局默认，影响整个文档，但可被子元素覆盖 -
<section lang="en-US"></section>：局部覆盖，适用于双语页面中英文段落混排 -
<p lang="fr">Bonjour</p>：细粒度控制，适合嵌入外语引文、代码注释、人名地名等
注意：lang 值需符合 BCP 47 标准（如 zh-Hans、pt-BR），避免写 zh 或 chinese；大小写不敏感，但惯例小写为主。
和 hreflang、xml:lang 混用时的冲突风险
在多语言站点中，容易把 lang 和 hreflang（用于 <link> 标签声明替代语言版本）混淆。二者完全无关：hreflang 是给搜索引擎看的链接关系提示，不影响当前页面渲染；而 lang 影响的是当前节点的文本解释。
若同时使用 XHTML 或旧版 Polyglot HTML，可能遇到 xml:lang。此时若两者值不一致，HTML5 规范明确以 lang 为准，xml:lang 会被忽略——所以不必共存，删掉 xml:lang 更干净。
CSS 中 :lang() 伪类的实用限制
:lang(en) { font-family: system-ui; } 这类写法看似方便，但实际效果受限：
- 它只匹配
lang属性显式声明的元素，不会继承父级lang（除非该元素自身没设lang，才沿用最近祖先） - 不支持通配匹配，不能写
:lang(zh-*)，必须精确到子标签如zh-CN或zh-Hant - 无法响应运行时语言切换（比如用户点按钮切语言），因为 CSS 不监听 DOM 属性变更
真正需要动态样式适配时，更可靠的方式是切换 上的 class（如 html.lang-zh），再用 .lang-zh .btn { ... } 控制。
最常被忽略的一点：即使所有 lang 都设对了，如果字体文件没包含对应文字字形（比如用系统英文字体渲染中文），照样出现方框或 fallback 到其他字体——lang 管语义，不管渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
