lang属性是页面可访问性与多语言支持的底层开关，必须在上严格按bcp 47标准设置（如zh-cn），spa切换时同步更新document.documentelement.lang，并为局部多语言内容显式声明lang，配合hreflang实现完整语言导航。
lang 属性不是“锦上添花”的可选项，而是决定页面能否被正确朗读、翻译、索引和渲染的底层开关。不设或设错 lang，中文页面可能被 VoiceOver 当英文读、Chrome 翻译按钮不出现、中英混排引号间距错乱——这些不是小毛病，是语义层断裂。
必须在 body 或 JS state
浏览器和辅助技术只识别根元素的 lang 声明。改 document.body.lang 或局部 div 的 lang，对 SEO、自动翻译提示、字体 fallback 几乎无影响。
- SPA 切换语言时，必须执行
document.documentElement.lang = "ja-JP"，不是body，也不是仅更新 React/Vue 的语言 state - SSR 页面需服务端根据
Accept-Language头输出对应，避免 JS 加载前的闪动或错误渲染 - 静态多语言站（如
/en/、/zh/）每个版本 HTML 文件的标签必须硬编码对应值，不可靠 JS 注入
lang 值必须严格符合 BCP 47 标准
写成 zh_cn、ZH-CN、Chinese 或带空格的 zh-CN ，浏览器和爬虫一律忽略——等于没写。
- 正确写法只有小写字母 + 连字符 + 地区码（可选）：如
zh-CN、en-GB、ja-JP、zh-Hans -
zh虽合法但模糊：zh-Hans（简体）和zh-Hant（繁体）触发的拼音标注、语音引擎、字体 fallback 逻辑不同 - 后端返回
zh_ch之类非标值时，前端必须做标准化转换再赋给document.documentElement.lang
局部多语言内容必须显式声明 lang，不能依赖继承
浏览器不会自动推断「这段英文是引用」「这行日文是代码注释」。不加 lang，就全按根语言处理——拼写检查失效、语音朗读错、假名被中文字体渲染。
- 中文文档里嵌法语引文：
<blockquote lang="fr">Je suis français.</blockquote> - 技术文档夹英文术语：
<code lang="en">useState，可触发 IDE 插件英文高亮 -
<pre class="brush:php;toolbar:false;" lang="bash">curl -X GET ...</pre>显式声明命令行语言，避免终端字体异常
配合 hreflang 实现跨页面语言导航与 SEO
lang 解决单页内语言识别，hreflang 解决多语言版本间的关联。两者缺一不可。
- 每个语言版本页面的
中，需用<link rel="alternate" hreflang="x-default">指定默认后备页 - 同时列出所有语言变体，如：
<link rel="alternate" hreflang="en-US" href="https://example.com/en/">和<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/"> -
hreflang值必须与对应页面严格一致，否则搜索引擎会忽略
最常被跳过的环节是：局部内容未声明 lang，以及动态切换时只改了 UI 状态却忘了同步 document.documentElement.lang。这两个点一旦遗漏，前面所有配置都打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
