lang属性必须写在根标签上才有效，决定整页默认语言；局部多语言内容须为具体元素单独声明lang，不可依赖继承。
lang属性必须写在html>根标签上才有效
只在
或某个里加
动态切换时，只改
lang="en"，对页面级语言声明完全无效。浏览器、屏幕阅读器、搜索引擎都只认局部多语言内容必须显式标注lang，不能靠继承
即使已设好，一段英文术语、日文引文或代码注释仍会被读屏软件当成中文硬读。必须为具体元素单独加lang属性：
-
<p lang="en">API</p>→ 屏幕阅读器用英语发音引擎读 /ˈeɪ.piː.ˈaɪ/，不是“阿皮” -
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>→ 注意不是lang="bash"，那是非标准写法；语法高亮和翻译工具依赖语言码，不是语法名 -
<blockquote lang="ja">ありがとう</blockquote>→ 语义清晰，读屏能触发日语TTS引擎 - 避免
<div lang="en">...</div>包裹大段内容——语义模糊，且可能干扰父级:lang(zh)样式匹配
:lang()伪类匹配要严格对应，别指望通配
CSS里的:lang(zh)只匹配lang="zh"，不匹配lang="zh-CN"；同理:lang(zh-CN)也不匹配lang="zh-Hans"。实际项目中建议：
- 主语言统一用
zh-CN/en-US等带地区的BCP 47值，CSS里也写全：:lang(zh-CN) { font-family: "Microsoft YaHei"; } - 如果需兼容多种简体变体，可叠加写：
:lang(zh-CN), :lang(zh-Hans) { ... } - 别用
[lang="zh"]这种属性选择器替代:lang(zh)——前者不匹配继承来的语言值，后者才支持
动态切换时，只改document.documentElement.lang是无效的
JS执行document.documentElement.lang = "en-US"后，已渲染的文本、读屏上下文、Chrome翻译按钮、:lang()样式都不会更新。真正起作用的方式只有：
- 服务端渲染（SSR）：根据
Accept-Language头或用户登录态，在模板中直接输出正确的 - 静态站点：每个语言版本生成独立HTML文件，
lang硬编码进模板 - 纯前端SPA：语言切换时强制整页刷新（
window.location.href = "/en/"），或重写document.documentElement.outerHTML（但ARIA缓存难清理，慎用） - 局部混排元素的
lang值也得同步更新——比如页面里有<p lang="en">Hello</p>，切到日语时若这段仍该是英文，就保留；若需随主语言变，就得JS遍历并改掉
最常被忽略的是：多语言混排不是“设了根lang就完事”，而是每个外文词、每段引文、每行注释都得自己标清楚。浏览器不会猜，读屏不会推，CSS也不会通融。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
