文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
lang 必须在首屏 html 中写死，js 动态修改无效；所有含文本的语义化标签需显式设置符合 bcp 47 的 lang 值，不可依赖继承。
不能靠 JS 动态改 document.documentElement.lang 来“统一管理”——它只改了个属性值，浏览器、屏幕阅读器、SEO、字体回退链全不认账。
lang 必须在首屏 HTML 里写死，不是运行时补的
浏览器和辅助技术（如 NVDA、VoiceOver）只读取初始 HTML 的 。后续用 JS 执行 document.documentElement.lang = "en-US"，语音引擎不会重载，Chrome 翻译按钮不会激活，:lang() 样式也不会重新匹配。
实操建议：
- SSR 项目：根据
Accept-Language请求头或用户登录态，在模板渲染阶段直接注入正确lang值 - 静态站点（Hugo/Jekyll）：每个语言版本生成独立 HTML 文件，
lang硬编码进模板，不依赖 JS - 纯前端 SPA：语言切换时强制整页刷新（
window.location.href），别试图“优雅地”局部更新
所有含文本的语义化标签都要显式设 lang，不能只靠继承
只定义主语言，不影响内部英文引文、<pre class="brush:php;toolbar:false;" lang="bash"></pre>、法语术语的识别。这些节点必须单独加 lang 属性，否则屏幕阅读器会用中文音调读英文单词，:lang(en) 样式也不生效。
常见错误现象：
-
<p>API <code>fetch()全段被当中文处理，标点间距异常、“API”被朗读成“阿皮” -
<blockquote>Merci beaucoup</blockquote>没加lang="fr"，语音引擎仍用中文发音
实操建议：
- 基础文案容器（
<h1></h1>、<p></p>、<section></section>、<footer></footer>）全部手动加lang，值与当前语言包一致（如lang="zh-Hans"） - 已有合法
lang的特殊元素（如<pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">）保留原值，这是多语言混排的合法场景 -
<script></script>和<style></style>内部不加lang，它们不参与文本渲染
lang 值必须严格符合 BCP 47，错一个字符就等于没写
写错 lang 不报错，但搜索引擎忽略、屏幕阅读器朗读错、:lang(zh) 样式完全不匹配。关键不是“看起来像”，而是 IANA 语言子标签注册库是否收录。
✅ 正确写法：zh-CN、en-US、pt-BR、zh-Hans（注意是短横线 -，不是下划线 _）
❌ 典型错误：zh_CN、Chinese、zh-ch、cn、zh-hans-cn（IANA 不收录三段式，Chrome 会静默降级为 zh）
选 zh-CN 还是 zh-Hans？
- 多数 CMS、SEO 工具、翻译插件只认
zh-CN -
zh-Hans仅当你需强调“简体字”且明确排除港澳台繁体场景时才用
动态 DOM 和局部混排内容必须手动同步更新 lang
通过 JS 插入的新节点（如弹窗、异步加载的卡片、富文本内容），如果含可读文本，必须显式设置 lang 属性。不能指望它自动继承父级或根节点语言。
使用场景：
- AJAX 加载评论区后，每条
<div class="comment"> 需带 <code>lang="en"或对应语言值 - 富文本编辑器输出的
<p></p>、<blockquote></blockquote>，若含外文引用，需解析并插入对应lang - 第三方组件（如地图控件、图表库）渲染的文本，若支持自定义文案，应一并注入
lang属性
容易被忽略的点：你可能把 lang 当作“一次性配置”，但它本质是**每个文本节点的语言身份证**——只要内容变，这个证就得跟着换。漏掉任意一个，无障碍、SEO、字体渲染就断一环。
