lang属性仅标记文本主导语言，不能用于语言切换或翻译；西葡双语页面须按语义区块分别设置lang，如<section lang="es">和<section lang="pt">，并依地域选用es-ES/es-MX、pt-PT/pt-BR等子标签。
lang 属性本身不能“区分”西葡双语页面，它只能标记某一段文本的**主导语言**。浏览器、屏幕阅读器、搜索引擎靠它判断发音规则、断词逻辑和拼写检查策略——不是用来做语言切换或自动翻译的。
为什么直接写 lang="es" 或 lang="pt" 在整个 <html> 标签上会出问题
如果你的页面同时包含西班牙语和葡萄牙语内容（比如左栏西语产品说明、右栏葡语用户评价），把 lang 设在 <html> 上就等于强行指定整页为一种语言。后果包括：
- 屏幕阅读器对葡语段落按西语规则朗读，元音错读、重音位置偏移（比如葡语
vida读成 /ˈbi.ða/，西语是 /ˈbi.ða/，但实际发音差异极大） - 浏览器内置拼写检查只启用西语词典，葡语单词全标红
- 搜索引擎可能误判页面目标市场，影响拉美或葡语区自然流量
正确做法：按语义区块逐层设置 lang
关键原则是：**谁在说？说什么语言？就给谁打标签**。不需要全局统一，也不用怕嵌套。
- 主容器仍可设
lang="es"（如面向西班牙市场的首页），但所有葡语内容块必须显式覆盖 - 用
<section>、<article>、<blockquote>等语义化标签包裹不同语言内容，再加lang - 连
<span>都能用——比如一句西语中夹一个葡语专有名词：<span lang="pt">Lisboa</span>
示例：
立即学习“前端免费学习笔记（深入）”；
<html lang="es">
<body>
<header>
<h1>Nuestras soluciones médicas</h1>
</header>
<main>
<section lang="es">
<p>Diseñado para hospitales españoles.</p>
</section>
<section lang="pt">
<p>Desenvolvido para hospitais portugueses e brasileiros.</p>
</section>
</main>
</body>
</html>
容易被忽略的细节：西语和葡语的子标签要写准
lang 值不是随便填 "es" 或 "pt" 就完事。子标签影响字体回退、数字格式、甚至日期解析：
- 用
lang="es-ES"表示西班牙本土西语（含z/c的 /θ/ 音）；lang="es-MX"表示墨西哥西语（无 /θ/，用 /s/） - 用
lang="pt-PT"表示欧洲葡语（鼻化元音强、语速快）；lang="pt-BR"表示巴西葡语（元音更开、动词变位简化） - 如果页面同时服务西语用户和葡语用户，且内容未按地域拆分，就别硬选子标签——保持
lang="es"和lang="pt"即可，避免误导
真正麻烦的从来不是怎么写 lang，而是你得先确认：这段文字到底属于哪个语言变体、由谁来读、在什么设备上呈现。没想清楚这点，标签贴得再准也没用。
