HTML国际化降本核心是收敛「标记—加载—更新」三环节：所有可见文本节点及placeholder/title/alt等属性须显式打data-i18n及对应后缀；JSON包路径统一、MIME校验、降级加载；DOM更新仅遍历data-i18n元素并同步lang属性，禁用reload或全量替换。

HTML国际化降本的核心，不是堆工具或写更多代码，而是砍掉重复劳动、避免后期返工、让翻译动作可预测、可验证、可回滚。工程化效率提升的关键点，就藏在「标记—加载—更新」三个环节的收敛与约束里。

data-i18n标记怎么打才不返工

标记漏掉 placeholder/title/alt 是最常见返工源头，不是没加，是加了但没覆盖全属性。浏览器只读元素自身 lang 和对应属性值，不继承也不推测。

• 所有含文本的语义化标签（<h1>、<p>、<button>、<label>）必须带 data-i18n，键名统一小写+下划线，如 "form_email_label"
• 若该元素还有 placeholder、title、alt，必须额外加 data-i18n-placeholder、data-i18n-title、data-i18n-alt，不能指望一个 data-i18n 覆盖全部
• value 属性跳过标记——它是用户输入数据，不是界面文案；但 label 里的文字必须标，且 for 属性要和对应 input 的 id 严格一致
• 含 HTML 结构的文案（如“请阅读 使用条款”）必须用 innerHTML 替换，语言包中对应值得是已过滤的纯 HTML 字符串，否则有 XSS 风险

JSON语言包加载怎么防静默失败

硬编码语言包进 JS 或用 XMLHttpRequest 手动拼接路径，是上线后查不出问题的典型原因。fetch 不报错 ≠ 加载成功，HTTP 状态码和 MIME 类型都得校验。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 路径必须统一为 ./locales/${lang}.json，如 ./locales/zh-HK.json、./locales/en-US.json，避免拼写不一致导致 404
• 加载必须用 fetch() + try/catch，内部检查 response.ok 和 response.headers.get('content-type')?.includes('application/json')
• 服务器返回非 application/json MIME（比如 text/plain）时，response.json() 会抛错，但没 catch 就静默中断
• fallback 顺序必须是：先试完整 BCP 47 码（zh-HK），再截主语言（zh），最后退到默认（en），不能只 fallback 到 en

切换语言时 DOM 更新怎么不丢状态

直接 window.location.reload() 或暴力替换整个 body.innerHTML，看着快，实则代价最高：表单输入清空、滚动位置重置、第三方组件（日期选择器、富文本）语言不同步、事件监听器丢失。

立即学习“前端免费学习笔记（深入）”；

• 只遍历所有带 data-i18n 的元素，调用 textContent 或 innerHTML 更新内容，不碰结构
• 更新前用 window.scrollY 记录位置，更新后立即 window.scrollTo(0, scrollY) 恢复，否则页面跳顶
• 同步更新 document.documentElement.lang，同时遍历所有已有 lang 属性的元素（如 <pre lang="bash">），按需保留或更新其 lang 值——多语言混排场景不能一刀切
• 若用了 Intl.DateTimeFormat 或 Intl.NumberFormat，切换后必须重建实例，旧对象不会自动适配新语言

真正难的不是实现切换，而是让每次翻译变更都能被 lint 检出、被 CI 拦截、被 QA 快速验证。比如 data-i18n 键在语言包里缺失、lang 属性没同步更新、placeholder 没标记——这些都得靠脚本扫描，而不是靠人眼复查。