lang 属性是HTML中用于唯一、权威地「申明而非切换」当前元素所用自然语言的语义标记，它不触发自动翻译或界面语言变更，但直接影响屏幕阅读器发音、拼写检查、SEO 语言识别及浏览器断字等核心行为；其值须严格遵循BCP 1/47标准（如zh-CN、en-US），且应首先、准确地设置在<html>根元素上，并通过局部lang属性（如<span lang="en">...</span>）覆盖混排外语内容。真正实现用户可感知“多语言切换”，必须配合动态内容替换、语言资源加载与用户偏好同步，仅修改lang而未更新文本将损害可访问性。
lang 属性本身不负责切换语言，只用于声明当前元素内容的语言。它不能自动翻译文本或触发界面语言变更，但它是多语言网站中必不可少的语义标记，对可访问性、SEO 和浏览器行为（如语音朗读、拼写检查）至关重要。真正实现“多语言切换”，需要结合前端逻辑 + 后端/本地化资源 + 正确的 lang 设置。
lang 属性的基本设置规则
必须使用合法的 BCP 47 语言标签，格式为 语言代码-地区代码（小写，用短横线分隔）：
- 中文简体：<html lang="zh-CN">
- 中文繁体（台湾）：<html lang="zh-TW">
- 英文（美国）：<html lang="en-US">
- 英文（英国）：<html lang="en-GB">
- 仅语言（无地区）：<p lang="zh">也可接受，但推荐带地区以提升准确性</p>
切换语言时如何动态更新 lang 属性
用户点击切换语言后，需同步更新 <html> 标签的 lang 属性，并加载对应语言的内容：
- 用 JavaScript 修改：
document.documentElement.lang = "zh-CN"; - 确保所有动态渲染的文本（包括按钮、提示、表单占位符）也已替换为对应语言版本
- 避免只改 lang 却没换文本——这会让屏幕阅读器读错语言，反而损害可访问性
局部语言内容要单独标注
页面中混用多种语言时（如英文术语、引用外文），应在对应元素上设置 lang：
立即学习“前端免费学习笔记（深入）”；
- <p>这个功能叫 <span lang="en">dark mode</span>。</p>
- <blockquote lang="fr">La vie est belle.</blockquote>
- 这样浏览器和辅助技术才能正确处理发音与断字
配合多语言实现的关键点
lang 是“说明书”，不是“翻译机”。要真正支持切换，还需：
- 准备多套语言资源（JSON / JS 对象 / 后端 API）
- 记录用户偏好（localStorage、cookie 或 Accept-Language 头）
- 路由或组件级语言感知（如 Vue i18n、React Intl、或原生 fetch + 模板替换）
- 把 lang 更新作为切换流程的最后一步，而非唯一操作
