如何使用HTML lang属性标记外语句子-html教程-PHP中文网

lang必须写在具体文本元素上，因屏幕阅读器和CSS :lang() 仅识别元素自身lang属性；父容器设置不继承，BCP 47规范要求严格，中英文混排需用等语义化标签精准标注。

如何使用html lang属性标记外语句子

必须在具体元素上写lang，不能靠父容器继承；否则屏幕阅读器读不准、翻译工具翻错、CSS :lang() 选不到。

为什么`lang`必须写在句子所在标签上

浏览器和读屏软件（NVDA、VoiceOver）只认

、、

这类文本承载元素自身的lang属性。给

或设lang，里面的不会自动继承——它会被当成“未声明语言”，按页面主语言朗读。

Hello world ❌ 仍被读作中文音节

Hello world ✅ 触发英文TTS引擎

au revoir ✅ 单词级切换也有效


lang值怎么填才不被忽略
BCP 47规范不是摆设：错一个连字符、大小写颠倒、用下划线，都会让辅助技术静默失效。

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

中文别写zh或zh-Hans，优先用zh-CN（简体+大陆），兼容性最稳
英文别写english或en_US，必须是en-US或en-GB

日文用ja，不是jp；韩文用ko，不是kr

绝对不要写lang=""——这等于告诉读屏软件“语言未知”，它可能强行用英文引擎读中文多音字

中英文混排句子怎么标lang

一个
里既有中文说明又有英文术语（比如“调用useState钩子”），不能整个段落统一设lang="zh-CN"，否则useState会被中文引擎硬切音节，读成“yong-hu-shi”。

用包裹技术词：调用 useState 初始化状态

是语义化元素，读屏支持好，且天然适合嵌入外语术语
避免用无差别包裹：useState也可行，但不如语义明确

别套多余容器：API ❌ 多层不增加语言意图

CSS里用:lang()匹配时的坑
:lang(en)和[lang="en"]行为完全不同：前者能匹配继承语言的子内容，后者只认属性值完全相等的元素。


:lang(en) { font-family: Arial; } ✅ 匹配...OK里的（即使它没写lang）

[lang="en"] { font-family: Arial; } ❌ 只匹配显式写了lang="en"的元素，不会被选中
要匹配所有中文变体（zh-CN、zh-TW），用[lang|="zh"]，不是:lang(zh)（后者不支持子标签匹配）

最容易被忽略的是：页面主语言声明只在里生效，其他任何地方加lang都只是局部覆盖。混排外语句子时，得一层层确认每个文本节点是否真有对应语言标记，而不是指望“父元素写了就全有了”。