lang属性可写在所有HTML元素上，作用于该元素及其子节点；根元素html的lang声明主语言，局部多语言内容需显式为对应元素设置lang值。
lang属性写在哪？不只标签能用
html的lang属性不是只在<html>根标签上才有效。它支持**所有元素**，作用范围是该元素及其子节点。比如<p lang="ja">こんにちは</p>里这段文字就会被屏幕阅读器、浏览器翻译功能识别为日语，而页面其他部分仍按<html lang="zh">处理。
常见错误是只设根lang，结果页面里嵌入的英文术语、法语引文、代码注释里的西班牙语等全被当成中文朗读或翻译失败。实际项目中，多语言内容往往混排——比如中文文档里夹一段<pre lang="bash">curl -X POST ...</pre>，这时给<pre>加lang="bash"（注意：这不是语言代码，但浏览器和语法高亮工具会识别）或lang="en"更合理。
- 根
<html lang="zh-CN">声明主语言，影响SEO、字体回退、拼写检查默认行为 - 局部切换必须显式写
lang，不能靠JS动态改document.documentElement.lang来“批量覆盖”——那只是改了根语言，不影响已渲染的子元素 -
lang值要符合BCP 47标准，比如zh-Hans（简体中文）、pt-BR（巴西葡萄牙语），别用zh_CN或chinese这种非标准写法
lang属性和hreflang有什么区别？别混着用
lang是告诉浏览器“这段内容是什么语言”，hreflang是告诉搜索引擎“这个链接指向什么语言的版本”。一个是**内容层标记**，一个是**链接关系声明**，用途完全不同。
典型误用：在<a href="/en/" hreflang="en">English</a>里以为加了hreflang就等于页面语言自动切换了。其实点击进去后，如果目标页没写<html lang="en">，照样被当中文渲染——字体可能错、标点间距异常、语音朗读混乱。
-
hreflang只出现在<link>或<a>标签里，且必须成对出现：<link rel="alternate" hreflang="zh" href="/zh/">+<link rel="alternate" hreflang="en" href="/en/"> - 搜索引擎用
hreflang做多语言站点分流，但用户打开页面后，一切渲染逻辑只认lang属性 - 单页应用（SPA）里用JS切换语言时，必须同时更新
document.documentElement.lang和所有含语言信息的lang属性，否则屏幕阅读器会卡在旧语言上下文里
lang属性会影响CSS吗？是的，但只在特定场景
现代浏览器支持基于lang的CSS伪类:lang()，但它和[lang]属性选择器行为不同——:lang(en)能匹配继承自父级的lang值，[lang="en"]只能匹配显式写了lang="en"的元素。
立即学习“前端免费学习笔记（深入）”；
真正容易踩坑的是**字体渲染差异**。比如<span lang="ja">日本語</span>在Chrome里可能触发日文字体回退链，而同样文字没lang时走中文字体路径，导致假名显示为方块或宽度异常。这不是bug，是浏览器按语言规则选字族的正常行为。
- 用
:lang(zh) { font-family: "PingFang SC", sans-serif; }可以统一中日韩文字体，但注意:lang(zh)不会匹配lang="zh-Hans"，得写:lang(zh-Hans)或用:lang(zh)配合:lang(zh-Hans)组合 - 不要依赖
lang做“语言检测”来加载不同CSS文件——它不触发重绘，也不影响资源加载时机 - RTL（从右向左）语言如阿拉伯语、希伯来语，除了
lang="ar"，还必须配dir="rtl"，否则文本方向、标点位置、表单控件顺序全错
纯前端多语言切换，lang属性只是起点
只改lang属性，不碰内容，等于换了个标签贴在旧内容上。用户看到的还是中文，只是浏览器“以为”它是英文。真要切换语言，核心是数据替换：文案、日期格式、数字分隔符、货币符号……这些都得由JS或服务端重新生成。
很多团队把lang当“切换开关”，结果切完页面乱码、按钮文字没变、时间还是UTC+8格式。根本原因是混淆了「语言标识」和「语言内容」——前者是元信息，后者才是用户真正消费的东西。
- 静态HTML站点：每种语言建独立HTML文件，各自写对的
<html lang="xx">，再用hreflang关联 - 动态站点：JS切换时，除更新
document.documentElement.lang，还要替换textContent、aria-label、placeholder等所有可读字符串，且注意title属性也要同步 - 最常被忽略的：表单输入框的
inputmode和spellcheck行为会随lang变化，比如lang="ja"下inputmode="text"可能唤出日语输入法候选栏，但若文案没切过去，用户打完字发现按钮还是中文，体验直接断裂
lang属性本身很简单，难的是它背后牵扯的字体、方向、输入法、辅助技术、搜索引擎、翻译工具链——每个环节都可能断掉一环。别把它当开关，当路标更准确：它指明方向，但路还得自己铺。
