lang属性不触发翻译但决定模型选型；必须严格匹配bcp 47格式（如zh-cn），写错或遗漏会导致chrome误译、voiceover朗读错乱、seo降级、css断字失效及屏幕阅读器静默忽略。
lang 属性本身不识别语言，它只声明语言；浏览器、屏幕阅读器和搜索引擎靠这个声明做后续判断——写错或漏写，识别错误就从根上开始。
为什么写了 lang="en" 页面还是被当成中文翻译？
常见错误现象：页面主体是英文，但 没改，用户点“翻译成中文”，Chrome 会先把英文原文用中文模型“翻译”一遍，再翻回英文，语义全毁。
- 浏览器翻译功能依赖
lang值选择处理模型，不是靠文本内容自动识别——lang错了，模型就选错 -
根元素的lang必须与当前渲染内容的主语言严格一致，哪怕只是临时切换语言页 - 动态改
document.documentElement.lang不会触发已渲染 DOM 的重译，必须location.reload()或服务端直出
写非标准值（如 zh_CN、english、zh）不是“效果差一点”，而是直接被静默忽略——相当于没写。
-
zh太宽泛：iOS VoiceOver 可能跳过中文 TTS 引擎，朗读腔调错乱 -
zh_CN或zh-china：下划线/大小写混用违反 BCP 47，Chrome 和 Safari 都不认 -
：空值被当未知语言，Chrome 翻译按钮不出现，Google Search Console 报“未指定语言” - 正确值只有
zh-CN、en-US、ja、fr-FR这类小写+连字符格式
多语言混排时，局部 lang 怎么加才不翻车？
不能只靠 ，嵌入的英文单词、代码、引文若没显式声明语言，就会继承中文语境，导致字体错、朗读错、拼写检查关。
- 外文术语、API 名称：
<code lang="en">useState触发 IDE 英文高亮，也避免被中文字体撑开 - 整段非母语文本：
<blockquote lang="de">Guten Tag</blockquote>让 VoiceOver 切换德语引擎 - 命令行示例：
<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre>告诉语法工具这是 shell 上下文 - 别给每个单词都加
lang——DOM 体积增大，可访问性树构建变慢，语义不清反而干扰辅助技术
SPA 中改 lang 为什么经常白忙活？
辅助技术在 HTML 解析初期就读取 document.documentElement.lang，JS 后期修改对已激活的朗读会话基本无效。
- 仅执行
document.documentElement.lang = "ja-JP"不够，必须同步触发document.title = document.title强制重读根节点（部分屏幕阅读器响应） - 更稳妥的做法是 SSR 或静态生成时就输出正确值：Next.js 在
app/layout.tsx里用，Nuxt 用useLocaleHead() - 第三方脚本插入的文本节点（如评论、广告）若没带
lang，它们的语言上下文就是缺失的——这点最容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
