lang 属性不是可有可无的装饰，它直接决定屏幕阅读器怎么读、浏览器要不要断字、拼写检查是否生效——设错或漏设，用户听到的就是一串发音错乱的语音。
lang 属性影响哪些具体行为
它不控制翻译按钮是否出现，但会显著干扰浏览器对页面语言的判断逻辑。常见实际影响包括：
- 屏幕阅读器（NVDA / VoiceOver）按
lang值切换 TTS 引擎：若<p lang="fr">Bonjour</p>没声明，可能用中文音念 “Bon-jour”； -
hyphens: auto在 CSS 中仅当元素有合法lang且浏览器支持该语言时才生效； - Chrome 的右键“翻译成中文”菜单项，会比对内容实际语言与
lang声明是否一致——不一致时更易触发提示； - 输入框内文本的拼写检查，依赖系统已安装对应语言词典 + 元素
lang值匹配，否则红线标错全失效。
lang 值必须符合 BCP 47 标准
随便写 zh、chinese 或 cn 都无效，浏览器可能忽略或降级处理。正确写法需区分地区变体：
- 简体中文优先用
zh-CN，繁体中文用zh-TW或zh-HK； - 英文按地域细化：
en-US、en-GB，影响日期格式、拼写（color/colour）等； - 嵌入外文段落时，不要只写
lang="fr"，而应写完整lang="fr-FR"，避免部分浏览器回退到默认引擎； - 动态插入的 HTML（如通过
innerHTML或框架渲染），必须同步设置lang，否则新节点无语言上下文。
lang 和 translate 属性不是一回事
lang 回答“这是什么语言”，translate 回答“要不要被翻译”。两者常被混用，但行为独立：
-
translate="no"可抑制 Chrome 翻译提示，但兼容性差（Safari 不支持，Firefox 行为不一致）； - 品牌名、代码标识符、缩写（如
<abbr lang="en" title="HyperText Markup Language">HTML</abbr>）建议同时设lang="en"+translate="no"； -
translate不影响屏幕阅读器——它只看lang； -
hreflang是<link>标签属性，用于多语言站点版本发现，和页面内lang完全无关。
根元素 lang 设置错误最致命
写错，整页辅助功能基础就塌了。真实项目中容易被忽略的点：
- Vue/React 单页应用中，
html标签的lang往往硬编码在 index.html，但切换语言时没同步更新； - SSR 渲染时，服务端未根据请求头
Accept-Language动态注入lang，导致首屏语言声明与内容不符； - 局部多语言内容（如双语表格）只用
<span></span>包裹却不设lang，屏幕阅读器仍按根语言朗读，术语发音全错； - 第三方组件（如评论插件、统计脚本插入的 DOM）自带
lang声明，可能覆盖父级，需检查是否冲突。
真正难的不是写对一个 lang="zh-CN"，而是让每个动态生成、跨框架、嵌套引入的文本节点，都带着准确的语言上下文被解析——这需要从构建流程、模板层、运行时三处同时控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
