lang属性不能只写一次，因浏览器和屏幕阅读器按元素自身lang值判定语言行为而非继承；仅设html根节点会导致子组件、动态DOM、第三方SDK注入节点等语言属性缺失或错配，标点间距、字体回退、语音朗读均异常。
HTML代码质量无法靠单点规范撑起来，必须把编码标准、属性继承机制和工程化验证绑在一起做。单独写个 lang="zh-CN" 或强制用 <header> 标签，解决不了协作中语义漂移、属性遗漏、多层嵌套失效的问题。
为什么 lang 属性不能只写一次就完事？
很多团队在根节点加了 <html lang="zh-CN"> 就以为万事大吉，但实际中常出现子组件覆盖、框架注入节点丢失、SSR/CSR 渲染不一致等场景，导致部分区域语言属性为空或错配。
- React/Vue 组件中动态插入的 DOM 节点（如弹窗、Tooltip）默认不继承
lang，需显式透传或通过document.documentElement.lang读取后手动设置 - 服务端渲染（SSR）若未对 fragment 或 slot 内容做语言上下文继承，
<main>里嵌套的<article>可能丢失语言信息 - 第三方 SDK（如客服浮窗、埋点脚本）注入的节点几乎从不带
lang，需用 MutationObserver 监听并补全
charset 和 lang 的继承逻辑完全不同
meta charset="utf-8" 是文档级指令，浏览器解析时一次性生效，不参与 DOM 属性继承；而 lang 是可继承的 HTML 全局属性，其值沿 DOM 树向下传递，直到被子元素显式覆盖。
- 这意味着：一个
<div lang="en"><p>Hello</p></div>中的<p>自动获得lang="en"，无需重复写 - 但
<iframe>是独立文档上下文，其内部lang不继承父页，必须单独声明 - 某些 UI 库（如 Ant Design、Element Plus）的组件会重置
lang，需检查其 root wrapper 是否保留了继承链
工程化落地时最容易被绕过的三个检查点
靠人工 review 或 lint 规则（如 eslint-plugin-jsx-a11y）只能捕获显式错误，真正影响质量的是隐式断裂点。
立即学习“前端免费学习笔记（深入）”；
-
aria-label和aria-labelledby在组合组件中容易因 DOM 结构变化而失效，比如<select>封装后，原生 label 关联丢失，必须用aria-labelledby显式指向新生成的 id - 自定义元素（Custom Elements）若未在
connectedCallback中同步设置lang或dir，会导致 SSR 首屏正确、 hydration 后错乱 - 构建产物中，HTML 模板引擎（如 EJS、Nunjucks）若允许模板变量直接插进
<html lang="{{lang}}">，但未做空值 fallback（如{{lang or 'zh-CN'}}），上线后可能生成<html lang="">
真正卡住质量演进的，不是“要不要加 lang”，而是“在哪一层加、谁负责同步、失效时怎么兜底”。统一编码标准只是起点，属性继承是运行时契约，工程化验证才是让这两者咬合的关键——它得能跑在 CI 里，能报出 <dialog> 没 lang、<svg> 缺 role="img" 这类细粒度问题，而不是只扫出“缺少 DOCTYPE”。
