lang属性错误或缺失会导致中文引号显示为英文直角引号、日文上下文中阿拉伯数字错误换行、safari中文字体fallback失效致方块乱码、voiceover将「東京」读作英语发音等可访问性与渲染逻辑问题。
lang 属性写错或漏写，页面排版会出什么问题
不设 lang 或写成 zh/zh_CN 这类非法值，浏览器不会报错，但实际影响很具体：中文引号显示为英文直角引号、阿拉伯数字在日文上下文中被错误换行、Safari 对中文字体 fallback 失效导致方块乱码、VoiceOver 朗读时把「東京」读成英语发音。这些不是“看起来差不多”，而是可访问性和渲染逻辑层面的断裂。
常见错误现象：
-
lang="zh"被忽略——BCP 47 要求区域子标签（如zh-CN、ja-JP），单语言码仅在极少数旧场景下兼容 - SPA 切换语言后只改了
document.body.lang，document.documentElement.lang仍是旧值，屏幕阅读器和搜索引擎仍按旧语言解析整页 - 服务端渲染 HTML 时没注入
lang，首屏源码里是空的或默认en-US，等 JS 加载完才补上，SEO 和首屏可访问性直接受损
多语言混排时，:lang() 样式必须显式声明
:lang() 不继承，也不靠父元素 lang 推断。你给 <blockquote lang="fr"></blockquote> 加样式，就得写 :lang(fr)，而不是指望它自动套用 html[lang="zh-CN"] 下的规则。
实操建议：
- 中文/日文/韩文共用样式可合并：
:lang(zh), :lang(ja), :lang(ko) { word-break: keep-all; } - 阿拉伯语必须配
dir="rtl"+:lang(ar) { text-align: right; }，否则光标位置、输入框方向全错 - 德语长词溢出容器？加
:lang(de) { overflow-wrap: break-word; }，别全局设word-break: break-all——会破坏中文断行逻辑 - 避免对每个单词都加
lang：DOM 膨胀、可访问性树变慢，真正需要局部语言语义的只有引文、代码注释、术语原文等少数节点
切换语言时，document.documentElement.lang 必须同步更新
只更新文本内容，不改 document.documentElement.lang，等于告诉浏览器“内容变了，但语言没变”。后果是：拼写检查器仍用旧词典、字体引擎继续 fallback 错误字体、自动翻译提示不触发、甚至某些 CSS font-language-override 生效失败。
关键点：
- 必须用
document.documentElement.lang = "ja-JP"，不是document.body.lang或随便一个 div - 更新时机要在所有 DOM 文本替换完成后，否则部分元素可能已按旧
lang渲染完毕 - 如果用了
Intl.DateTimeFormat或Intl.NumberFormat，它们不随lang自动刷新，得重建实例 - 路由变化或语言参数变更时，要监听并触发该更新——不能只靠用户点按钮才执行
HTML 文件静态化时，lang 值不能靠 JS 注入
纯静态 HTML（比如 Jekyll、Hugo 输出的页面）若依赖 JS 设置 lang，首次加载时 html 标签无 lang，浏览器和爬虫看到的是未声明语言的文档。这不是“延迟一点”，而是 SEO 和可访问性基线彻底失效。
正确做法：
- 每个语言版本生成独立 HTML 文件，
硬编码在源文件里 - 路径结构清晰：/zh/about.html、/en/about.html，而非 /about.html?lang=zh
- 若必须单页多语言，用服务端模板（如 EJS、Jinja2）根据请求头或路径前缀动态写入
lang值，确保源码里就有 - 绝对不要在
<script></script>里用document.documentElement.lang = ...替代服务端写入——它无法解决首屏问题
最易被忽略的点：lang 不是装饰属性，它是浏览器排版、语音、字体、SEO 的底层开关。改文本只是表面，改 lang 才算真正切换语言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
