lang属性必须在首屏HTML中声明才有效，JS动态修改document.documentElement.lang无效，因浏览器和辅助技术（如NVDA、VoiceOver）仅在HTML解析初期读取该值，后续赋值不触发重解析，导致翻译按钮不出现、SEO索引错误、语音朗读错乱。
lang 属性必须在首屏 HTML 中写对，JS 动态修改 document.documentElement.lang 无效——屏幕阅读器、Chrome 翻译、SEO 都只认初始值。
为什么改 document.documentElement.lang 没用
浏览器和辅助技术（如 NVDA、VoiceOver）在解析 HTML 的第一毫秒就读取 <html lang="zh-CN">，后续 JS 赋值只是改了个 DOM 属性，不会触发重解析。结果就是：语音引擎继续用中文朗读英文段落，Chrome 翻译按钮不出现，搜索引擎索引为错误语言。
- SSR 项目（Next.js/Nuxt）：必须在服务端模板中注入真实语言值，比如
<html lang={locale}> - 静态站（Hugo/Jekyll）：每个语言版本生成独立 HTML 文件，
lang硬编码进模板头部 - 纯前端 SPA：语言切换时应整页刷新（
window.location.href = '/en/'），而非 patch 根节点
lang 值必须严格符合 BCP 47 规范
写错不报错，但等于没写。Chrome 会静默降级为 lang="zh"，导致 :lang(zh-CN) 样式不匹配、屏幕阅读器选错语音库。
- ✅ 正确写法：
zh-CN、en-US、ja-JP、pt-BR（注意是短横线-，不是下划线） - ❌ 典型错误：
zh_CN、Chinese、zh-ch、cn、zh-hans-cn（IANA 不收录三段式） - 选
zh-CN还是zh-Hans？绝大多数 CMS、SEO 工具、翻译插件只认zh-CN；zh-Hans仅当你需明确排除港澳台繁体且强调“简体字”时才用
局部多语言内容必须显式标注 lang
<html lang="zh-CN"> 只定义主语言，不影响子元素。嵌入的英文术语、日文引用、代码注释里的法语，全会被当成中文处理——语音朗读错、翻译失败、拼写检查乱跳。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
<p lang="en">API</p>→ 不会被中文语音引擎硬读成“阿皮” -
<pre lang="en">curl -X POST</pre>→ 语法高亮工具和翻译功能才能正确识别（别用lang="bash"，那不是合法语言码） -
<blockquote lang="ja">こんにちは</blockquote>→ 屏幕阅读器调用日语发音引擎 - 语言切换时，必须遍历所有已带
lang属性的元素同步更新，否则混排内容语义断裂
hreflang 和 lang 完全无关，但必须一致
hreflang 是给搜索引擎爬虫看的链接关系声明，lang 是给浏览器和辅助技术看的内容语言标记。两者职责不同，强行绑定或混用必翻车。
- 英文页
<html lang="en">，但hreflang="zh"指向自己 → 搜索引擎误判页面语言，直接忽略整组 hreflang - 中文页写了
hreflang="en"指向英文版，但英文版<html lang="zh-CN">→ 搜索引擎收了 hreflang，浏览器却当它是中文页渲染（字体错、标点异常） - 所有语言版本页面的
<head>必须完整互指：英文页要有hreflang="ja"指向日文页，日文页也必须有hreflang="en"指回英文页
最常被忽略的一点：URL 路径结构决定 hreflang 配置粒度。用 ?lang=ja 这类参数路由，Google 明确不推荐——它可能忽略 hreflang 或误判为重复内容。实际必须用子目录（/ja/）、子域名（ja.example.com）等可稳定抓取的绝对路径。
