lang属性应加在标签上全局声明主语言，局部不同语言内容需用等语义化标签包裹，而非；值须符合BCP 47标准，如zh-CN；它不触发输入法切换，仅影响语音合成、翻译和拼写检查。
lang属性该加在哪个标签上
绝大多数时候，lang 应该直接写在 标签里，全局声明页面主语言，比如 。浏览器、屏幕阅读器、搜索引擎都靠这个做基础判断。
但如果你的页面里混了明显不同语言的段落（比如英文引用、日文术语、法语书名），就得局部覆盖——这时不能用 <div lang="en"> 或 <code><span lang="ja"></span>，而必须确保该元素是「语义上独立的语言单元」。常见有效场景包括：<q></q>、<blockquote></blockquote>、<abbr></abbr>、<cite></cite>，以及带明确语言意图的 <p></p> 或 <section></section>。
容易踩的坑：
– 用 <span lang="fr"></span> 包一个单词，对语音合成或翻译工具基本无效，因为 <span></span> 没有语言上下文承载力；
– 在 <input> 或 <textarea></textarea> 上硬加 lang，浏览器不识别，输入法切换完全不响应；
– 忘记同时设置 xml:lang（XHTML 场景下需双写）。
lang值怎么写才被识别
lang 的值不是随便写缩写，得按 BCP 47 标准来。中文别只写 zh，要写 zh-CN（简体中文）、zh-TW（繁体中文）、zh-HK（香港繁体）。英文同理：en-US、en-GB、en-AU 会被不同语音引擎区别对待。
实操建议：
– 少用 zh 这种泛化标签，尤其涉及拼音输入、TTS 朗读时，zh-CN 和 zh-TW 的声调、词汇、数字读法都不同；
– 不要用下划线，zh_CN 是错的，必须用短横线 zh-CN；
– 避免自造代码，比如 zh-simplified 或 en-uk，这些不会被任何主流工具解析；
– 如果内容语言不确定，用 lang=""（空值），表示继承父级，比乱填强。
lang切换后浏览器会自动改输入法吗
不会。HTML 的 lang 属性本身不触发输入法切换，它只是元信息。用户是否切到中文输入法，取决于操作系统设置、浏览器历史行为、甚至当前光标位置的上下文，跟 lang 没有直接联动。
真实影响点：
– 某些浏览器（如 Safari）在 contenteditable 区域检测到 lang="ja"，可能微调拼写检查词典；
– 屏幕阅读器（NVDA、VoiceOver）会根据 lang 切换语音引擎，比如从普通话女声切到关西腔男声；
– Chrome 的内置翻译功能依赖 lang 做初始语言判定，但若页面没设或设错，它会 fallback 到文本统计识别，准确率下降；
– <input type="text" lang="ar"> 对 RTL 布局无作用，得配合 dir="rtl" 才生效。
React/Vue里动态改lang要注意什么
服务端渲染（SSR）场景下， 必须在首屏 HTML 字符串里就写对，前端 JS 后续用 document.documentElement.lang = "yy" 修改，只会更新 DOM，对已加载的语音引擎、搜索引擎快照、预渲染内容无效。
组件级局部语言控制：
– Vue 中不要在 v-html 插入的内容里指望 lang 生效，因为它是纯字符串注入，没有 DOM 解析过程；
– React 中用 dangerouslySetInnerHTML 同理，lang 属性不会被激活；
– 动态切换多语言文案时，推荐用 （根组件控制）+ 局部 <blockquote lang="{quoteLang}"></blockquote>（内容组件控制），避免在 <span></span> 或 <div> 上频繁 patch <code>lang 属性；
– Next.js 等框架中，lang 应通过 getServerSideProps 或 generateStaticParams 注入 HTML 模板，而非客户端 useEffect。
最常被忽略的一点：语言切换不只是改文案，还涉及字体回退、行高适配、标点挤压（如中文顿号和英文逗号宽度不同）、甚至日期/数字格式——lang 只是起点，不是终点。
