必须在标签上设置lang属性，因为浏览器、屏幕阅读器和搜索引擎仅识别此处值作为整页语言依据；写错（如zh_cn、chinese）、漏写或置于等其他位置均无效，将导致翻译按钮缺失、语音朗读错乱及seo报错。
必须立刻在 标签上补全 lang 属性，其他任何位置、任何形式的“补救”都无效——浏览器和屏幕阅读器只认这一处，写错或漏掉，翻译按钮不出现、VoiceOver 乱读、SEO 报错就注定发生。
为什么只改
所有辅助技术（NVDA、VoiceOver、JAWS）和浏览器内核（Chrome、Safari）在 HTML 解析第一帧时，仅从 document.documentElement.lang 读取语言信号。它不是“建议”，而是唯一可信源：
-
→ 被忽略为文档语言，仅影响极少数子元素断词，实际无用 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已弃用，Chrome/Firefox/Safari 全部静默忽略 -
document.documentElement.lang = "zh-CN"（JS 执行）→ 页面已加载后设置，对已激活的朗读会话、已计算的 CSS:lang()、已显示的翻译按钮均无刷新效果
该填 zh-CN 还是 zh 或 zh-Hans
选 zh-CN 是最稳解法，不是折中，而是事实标准：
-
zh太宽泛：iOS VoiceOver 可能跳过中文 TTS 引擎，把“用户”读成 /yóu sèr/；Google Search Console 可能报“未指定语言” -
zh-Hans语义正确但兼容性有缺口：旧版 JAWS（v2018 及更早）无法匹配完整词典，部分翻译插件识别率低 -
zh_CN、zh-china、Chinese→ 全部非法，BCP 47 要求小写+连字符，浏览器静默丢弃，等效于没写 - 末尾空格也致命：
lang="zh-CN "会被 Lighthouse 报 “invalid language subtag”
动态页面（React/Vue/SPA）里怎么避免 lang 失效
核心矛盾：JS 后期改 document.documentElement.lang 对已渲染内容无效。真正起效的只有首屏 HTML 中的值：
- 服务端渲染（Next.js、Nuxt、Express+EJS）必须在模板里动态插值：
，不能硬编码lang="zh-CN" - 纯客户端 SPA 必须确保初始 HTML 已含正确值——比如用
index.html?lang=ja-JP触发服务端重写，或由 CDN 根据 Accept-Language 注入 - 切换语言时，仅执行
document.documentElement.lang = "en"不够，必须同步触发document.title = document.title（空赋值）来强制屏幕阅读器重读根节点 - 第三方脚本注入的内容（如评论框、广告位）若含外文，需显式加
lang，例如<div id="disqus_thread" lang="en"></div>，否则仍按根语言处理
真正难的从来不是写对一个 lang="zh-CN"，而是让每个服务端吐出的字节、每个 JS 动态插入的文本节点、每个跨域 iframe 里的内容，都在解析起点就被赋予准确的语言上下文——漏掉任意一环，无障碍和国际化就塌了一角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
