必须使用 de-de 而非 de、german 或 de_de，因 bcp 47 要求明确地域子标签以确保 chrome 翻译触发、voiceover 正确发音及 search console 识别；选 de-de/de-at/de-ch 须依目标用户与正字法而定，局部德语用元素级 lang 属性标注，动态页面需服务端注入 html lang 值。
德语页面必须用 de-DE，不是 de、german 或 de_DE —— 错误写法会导致 Chrome 翻译按钮不出现、VoiceOver 读成英语、Google Search Console 报“未指定语言”。
为什么必须写 de-DE 而不是 de
浏览器和屏幕阅读器依赖 BCP 47 规范解析 lang 值，de 是语言主标签，但缺乏地域子标签，属于“粒度太粗”：
-
de不明确是德国、奥地利还是瑞士德语，三者在拼写（如FarbevsFarbe）、标点（引号方向）、语音库加载上存在差异 - NVDA 和 VoiceOver 在遇到
de时可能 fallback 到系统默认 TTS 引擎（常为英语），导致“行”字读成英文发音 - Chrome 翻译按钮只对明确区域码（如
de-DE）触发，de被视为“未知变体”，直接隐藏翻译入口
de-DE、de-AT、de-CH 怎么选
选哪个取决于你内容实际面向的用户群体和拼写规范，不是按服务器位置或域名后缀机械匹配：
- 面向德国用户、使用德国正字法（如
Strasse而非Straße已过时写法）、引用德国机构资料 → 用de-DE - 内容含奥地利特有词汇（
Sackerl、Jause）或遵循奥地利教育局正字法 → 用de-AT - 页面大量使用瑞士德语术语（
Znüni、Chuchichäschtli）或强调瑞士官方双语上下文 → 用de-CH - 混排瑞士法语内容时，记得同步加
dir="ltr"（德语仍为左到右），避免与fr-FR的dir="ltr"冲突
局部德语内容怎么标注（比如英文页面里插一句德语）
主语言由 决定，局部德语只需在对应元素上显式声明 lang="de-DE"，无需 JS 或额外 meta：
- 引文：
<blockquote lang="de-DE">Die Welt ist schön.</blockquote> - 术语解释：
<p>Der <em lang="de-DE">Kern</em> ist das Zentrum.</p> - 代码块注释：
<pre class="brush:php;toolbar:false;" lang="bash"># de-DE: Dieser Befehl löscht die Datei</pre> - 不要给每个德语单词都套
span lang="de-DE"—— DOM 节点暴增，可访问性树构建延迟，且无实际收益
动态页面（React/Next.js）里改 lang 容易白忙活
客户端渲染时仅执行 document.documentElement.lang = "de-DE" 是无效的，因为辅助技术在 HTML 解析第一帧就锁定了语言值：
- Next.js 必须在
app/layout.tsx中通过服务端变量注入：，其中locale来自路由参数或中间件 - 纯 CSR 应用若支持多语言，需生成多个 HTML 入口（如
index-de.html），而非靠 JS patch - 如果必须运行时切换（极少数场景），除了改
lang，还得触发document.title = document.title强制重读根节点，但这对已激活的朗读会话仍不可靠
真正难的不是写对 de-DE，而是确保所有异步加载的文本节点（比如 i18n 库注入的文案、第三方评论组件）都继承或显式携带正确语言上下文 —— 否则屏幕阅读器会在同一段落里突然切语言引擎，造成断句错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
