HTML5 的 lang 属性是影响可访问性、SEO、字体渲染和浏览器行为的核心语义标记，必须设在 根标签上且值合法（如 zh-CN），局部多语言需显式标注，并配合 :lang() 伪类实现字体与排版控制。
HTML5 中 lang 属性不是可有可无的装饰，而是影响可访问性、SEO、字体渲染和浏览器行为的核心语义标记。规范使用的关键，在于位置准确、值合法、层级合理、配合得当。
根标签必须设且只能设在 上
浏览器、屏幕阅读器（如 VoiceOver、NVDA）、搜索引擎只读取 这一处的值作为整页语言依据。其他位置全无效：
-
——<title></title>和<meta name="description">不继承，语义断裂 -
<meta http-equiv="content-language" content="zh-CN">—— HTML5 已弃用，现代浏览器忽略 -
或—— 空值或非法值，被当作未知语言处理
语言值必须符合 BCP 47 规范
中文推荐统一使用 zh-CN，它是事实标准，兼容性最稳、拼音支持最全、辅助技术识别率最高：
- ✅ 正确：
zh-CN、en-US、ja-JP（小写语言码 + 大写地区码 + ASCII 短横线） - ❌ 错误：
zh_CN（下划线）、zh-cn（地区码应大写）、zh-china（非 IANA 注册值） - 慎用：
zh（太宽泛，iOS VoiceOver 可能 fallback 到英文 TTS）；zh-Hans（仅表简体，不绑定地域，部分旧引擎语音库缺失）
局部多语言内容要显式标注
根语言不能替代局部语言声明。混合内容不加 lang，会导致屏幕阅读器硬读、字体错乱、拼写检查失效：
立即学习“前端免费学习笔记（深入）”；
- 单个术语：
<code lang="en">useState - 整段外文：
<p lang="fr">C’est une citation.</p> - 代码注释：
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre> - 避免无语义包裹：
<div lang="en">...</div>破坏语义层级，也干扰:lang(zh)CSS 匹配
配合 :lang() 伪类与字体链真正落地效果
只设 lang 不写 CSS，等于没完成闭环。关键样式需靠 :lang() 触发：
:lang(zh) { font-family: "PingFang SC", "Noto Sans SC", sans-serif; }:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", sans-serif; }:lang(ar) { direction: rtl; text-align: right; }- 注意：字体名含空格必须加双引号；末尾必须保留
sans-serif或serif作为兜底
