多语言网站中，lang属性必须显式标注在承载用户可见自然语言文本的语义化元素上，值须严格符合BCP 47规范（如zh-CN），禁用于script、style等非文本元素，SPA需手动同步更新DOM中的lang值。
在多语言网站中，局部区域的语言必须显式声明，不能依赖根元素的 lang 属性自动继承——浏览器和屏幕阅读器不会向下“猜”语言，只认明确标注的节点。
哪些元素适合加 lang 属性
只有承载**用户可见的自然语言文本**且语义清晰的元素才应加 lang。常见有效场景包括：
-
<p lang="en">API documentation</p>：整段英文说明 -
<blockquote lang="fr">La vie est belle.</blockquote>：法语引文，语义强、结构独立 -
<q lang="ja">こんにちは</q>：短句直接引用，比<span>更合适 -
<figcaption lang="de">Abbildung 1: Datenfluss</figcaption>：德文图注，内容明确 -
<code lang="en">useState</code>：英文编程术语，影响 IDE 高亮与语音朗读
怎么写才真正起作用
值必须严格符合 BCP 47 规范，否则会被静默忽略，当成未知语言（und）处理：
- ✅ 正确：
zh-CN、en-GB、pt-BR、fr-FR（小写+短横线） - ❌ 错误：
zh_CN（下划线）、Chinese（非标准名）、ZH-cn（大小写混用） - ⚠️ 注意：
zh-Hans可用于强调“简体字”，但多数 SEO 工具和翻译插件只识别zh-CN
哪些地方千万别加
加了不仅无效，还可能破坏语义或干扰样式匹配：
立即学习“前端免费学习笔记（深入）”；
-
<div lang="en">...：语义模糊，不如用<section>或<article>配合lang -
<script>、<style>、<meta>：不承载自然语言文本，加了无意义 -
<table lang="en">：表格本身无语言属性，必须写在<td lang="ja">这类具体单元格上 -
lang=""：等于主动声明“语言未知”，可能导致整页被按英文规则朗读中文
动态页面要同步更新
单页应用（SPA）切换语言时，仅改状态或 class 不够，必须手动更新 DOM 中所有相关 lang 值：
- 立刻执行
document.documentElement.lang = "ja-JP" - 再遍历所有含外文的元素，如
document.querySelectorAll("code[lang='en'], blockquote[lang='fr']")，逐个重设其lang - 服务端渲染（SSR）则应在首屏 HTML 字符串中就输出正确值，JS 补救无效
