lang属性是多语言站点的启动开关，必须正确写在html标签上，否则浏览器、搜索引擎和屏幕阅读器将无法识别页面主语言，导致字体回退、语音引擎切换、拼写检查等功能失效。
html 元素的 lang 属性不是“可选优化”，而是多语言站点的**启动开关**——它不写，或写错，整页的语言感知能力就基本失效。
为什么必须写在 html 标签上
浏览器、搜索引擎、屏幕阅读器（如 VoiceOver/NVDA）只认 html 标签上的 lang 值作为页面主语言依据。其他地方写的 lang 只影响局部，不改变整页基调。
- 没写
lang或写成lang="zh"：Chrome 可能将中文页面误判为“未知语言”，自动翻译菜单消失，拼写检查关闭 - 写了
但html还是lang="zh-CN"：这段英文仍用中文字体渲染，字母间距挤压，标点停顿错乱 - SPA 切换语言后只改了
document.body.lang：屏幕阅读器继续用旧语音引擎朗读，:lang(en)CSS 规则不生效
lang 值写错等于没写
浏览器不会报错，但会静默降级为 und（未知语言），所有依赖语言识别的功能全部退化。
- ❌ 错误写法：
zh_CN、ZH-cn、chinese、zh-ch - ✅ 正确写法：
zh-CN（注意大小写 + 短横线）、en-US、ja-JP、pt-BR - SEO 影响：Google Search Console 的「国际化」报告里，
hreflang组若与html lang不一致（比如一个写zh-cn，另一个写zh-CN），整组被静默忽略
它直接影响哪些具体行为
不是“增强体验”，而是决定底层行为是否发生：
- 字体回退：
lang="ja-JP"触发日文字体链（如"Hiragino Kaku Gothic Pro"），lang="zh-CN"启用简体中文字体优先级 - 屏幕阅读器发音：
lang="fr"让 VoiceOver 切换法语语音引擎，否则把 “Bonjour” 按中文音读成“波容茹” - 拼写检查：
textarea lang="de"才会高亮 “Schule” 写成 “Schuele” 的错误，根lang决定默认词典 - 翻译模型选择：
p lang="ko"提示 Chrome 优先调用韩语 NMT 模型，而非拿中文模型硬译
动态更新时最容易漏掉的点
JS 改完 document.documentElement.lang，只是改了根节点——而已渲染的 DOM 节点完全不受影响。
- 已存在的
Hello
lang处理，除非你手动给它也加lang="en" - React/Vue 中仅更新 state 或 class，不碰 DOM 的
lang属性，屏幕阅读器和翻译插件都“看不见”变化 - 真正安全的做法：语言切换后，要么刷新页面（
location.reload()），要么遍历关键语义节点（blockquote、pre、code）批量重设lang
最常被忽略的不是怎么写，而是——改语言时，你有没有重新检查每一个带语义的元素是否还贴着正确的 lang 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
