lang属性必须在首屏html中硬编码，不可用js动态修改；静态站点、ssr需在构建或服务端注入，spa语言切换须整页刷新；hreflang与lang作用不同但须严格对齐；局部混排内容需显式声明lang；:lang()伪类匹配需精确指定变体。
lang属性必须在首屏HTML里写死，不能靠JS动态改
页面打开时，浏览器、屏幕阅读器、Chrome翻译按钮、SEO爬虫都只读取初始HTML里的。你用JS执行document.documentElement.lang = "en-US"，只是改了个DOM属性值，已渲染的文本不会重排，语音引擎不会切换，翻译按钮也不会激活——它根本没被触发。
所以“分配lang”不是运行时行为，而是构建或服务端阶段的动作：
- 静态站点（Hugo/Eleventy）：每个语言目录（/zh/、/en/）生成独立HTML，
硬编码进模板 - SSR（Next.js/Nuxt）：根据请求路径（如
/en/about.html）或Accept-Language头，在服务端模板中注入对应lang值 - 纯前端SPA：语言切换必须整页刷新（
window.location.href = "/en/about.html"），否则无障碍和SEO全失效
hreflang和lang是两回事，别混着配
hreflang是给搜索引擎看的链接关系声明，lang是告诉浏览器“这段内容实际是什么语言”。两者必须严格对齐，但作用域完全不同。
比如你有https://example.com/en/和https://example.com/zh/两个首页：
- 两个页面的
里都要放相同的<link rel="alternate" hreflang="en" href="https://example.com/en/">和<link rel="alternate" hreflang="zh" href="https://example.com/zh/"> - 但
https://example.com/en/页面的根标签必须是，https://example.com/zh/页面必须是 - 错配后果：Google可能把日文用户导到英文页；用户点进去后，浏览器仍按
lang="en"渲染中文内容——字体回退错、标点间距崩、语音朗读成英语
局部混排内容必须显式加lang，不能依赖继承
只定义主语言，不影响内部嵌入的英文代码、日文引用、法语术语。这些节点不加lang，就会被当成中文处理。
-
<p lang="en">API</p>→ 屏幕阅读器不会读成“阿皮” -
<pre class="brush:php;toolbar:false;" lang="en">curl -X POST</pre>→ 语法高亮工具和Chrome翻译才能识别为英文命令 -
<blockquote lang="ja">ありがとう</blockquote>→ VoiceOver自动切日语发音引擎 - 别用
lang="bash"——它不是BCP 47语言码；代码块优先用lang="en"，除非你真要标记Shell脚本为某种自然语言
:lang()伪类匹配很挑剔，别指望它自动泛化
CSS里的:lang(zh)只匹配lang="zh"，不匹配lang="zh-CN"；:lang(zh-CN)也不匹配lang="zh-Hans"。想覆盖所有简体中文变体，得写成：
:lang(zh), :lang(zh-CN), :lang(zh-Hans) {
line-height: 1.6;
}
更稳妥的做法是统一用lang="zh-CN"（主流CMS、SEO工具、翻译插件都认这个），避免三段式（如zh-Hans-CN）——IANA不收录，Chrome会静默降级为zh，导致:lang(zh-Hans-CN)样式完全不生效。
真正容易被忽略的是：当你在多语言页面里插入一段英文引文，又没给它加lang="en"，那它不仅会被中文语音引擎乱读，连:lang(en) { quotes: "«" "»"; }这种基础样式都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
