lang属性必须写在html根元素上，浏览器、搜索引擎和屏幕阅读器仅识别document.documentElement.lang；值须严格符合BCP 47标准（如zh-CN），大小写、连字符、空格均不可错；局部多语言内容需显式声明lang；hreflang须成对互指并含x-default兜底。
lang属性必须写在上，否则出海网站的语音、翻译、SEO全失效
浏览器、搜索引擎和屏幕阅读器只认 document.documentElement.lang，改 body.lang 或某个 div 的 lang 属性完全没用。常见后果包括：Chrome 自动翻译按钮不出现、VoiceOver 把“北京”读成 “Bei Jing”、Google 把中文页当英文索引。
实操要点：
- SSR 页面必须由服务端根据请求头
Accept-Language动态生成，不能等 JS 加载完再 patch - 静态多语言站（如 /en/index.html、/ja/index.html）每个 HTML 文件都硬编码对应值，避免 JS 注入延迟导致闪动或语音错乱
- SPA 切换语言时，必须执行
document.documentElement.lang = "ja-JP"，不是只更新 state 或局部节点
lang值必须严格符合BCP 47，zh-CN和zh-cn效果天差地别
浏览器和爬虫只接受小写字母 + 连字符 + 地区码（可选）的标准格式：zh-CN、en-GB、ja-JP。写成 zh_cn、ZH-CN、zh-CN （末尾空格）或 Chinese，等于没写。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 后端返回
zh_ch，前端没做标准化转换就直接赋给document.documentElement.lang - 误以为
lang="ja"足够：iOS VoiceOver 某些版本会降级为英语发音，lang="ja-JP"更稳妥 - 用
lang="zh"模糊声明：无法触发简体/繁体专属的拼音标注、字体 fallback 和语音引擎切换逻辑
局部多语言内容必须显式声明lang，不能靠继承
浏览器不会自动推断「这段英文是引用」「这行日文是代码注释」。不加 lang，整段就按根语言处理——拼写检查失效、语音朗读错、字体 fallback 异常（比如日文假名被中文字体渲染）。
典型使用场景：
- 中文文档里嵌法语引文：
<blockquote lang="fr">Je suis français.</blockquote> - 技术文档中夹英文术语：
<code lang="en">useState，可触发 IDE 插件英文高亮 - 代码块中嵌日文注释：
<pre class="brush:php;toolbar:false;" lang="bash"><code lang="ja">// サンプルコード</code></pre>
hreflang标签必须配对使用，否则出海网站会被判重复内容
hreflang 不是可选项，是 Google 识别多语言版本的唯一机制。漏配或配错，会导致不同语言页互相竞争排名，甚至被当成作弊。
关键规则：
- 每页
中必须包含自身语言的hreflang声明，以及所有其他语言版本的链接 - 必须成对互指：
/en/页声明hreflang="ja"指向/ja/，/ja/页也得声明hreflang="en"指回/en/ - 必须加
hreflang="x-default"作为兜底，默认展示给未匹配到语言偏好的用户 - 值要与
严格一致，比如对应的hreflang就得是zh-TW，不能是zh或zh_TW
最常被忽略的一点：lang 属性影响的不只是 SEO 和翻译提示，它还决定标点间距、连字行为、字体回退链、拼写检查词典——这些细节在出海场景下，直接决定用户是否觉得“这页面真像本地做的”。
