HTML内容怎么国际化？静态资源工程化托管-html教程-PHP中文网

data-i18n 必须覆盖所有可翻译属性（如 placeholder、alt、title、aria-label），lang 属性需显式声明在每个语义化标签上，语言包须 fetch 校验并按 bcp 47 规则 fallback，静态资源路径须适配 http 环境，动态插入 dom 后需手动触发翻译。

html内容怎么国际化？静态资源工程化托管

data-i18n 标记必须覆盖所有可翻译属性，不只是 textContent

只给 <button>提交</button> 加 data-i18n="btn_submit"，但漏掉 placeholder、alt、title 或 aria-label，切换语言后这些文本就卡在旧语言里。屏幕阅读器读 alt 时仍用英文发音，表单提示也失效。

实操建议：

Article To Html

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

下载

data-i18n 是基础，必须加在所有含可译文本的元素上（<p></p>、<h2></h2>、<label></label> 等）
含 placeholder 就额外加 data-i18n-placeholder；同理 data-i18n-title、data-i18n-alt
value 属性一般不翻译（属用户输入数据），跳过处理；但 label 的 for 和对应 id 必须严格匹配，否则点击失效
带 HTML 结构的文案（如“请阅读使用条款”）要用 innerHTML 替换，且语言包里对应值必须是可信纯 HTML 片段，否则有 XSS 风险

lang 属性不能只设在 html> 上，每个语义化容器都得显式声明

只执行 document.documentElement.lang = 'zh-Hans'，<p></p> 里的顿号间距还是英文规则，<pre class="brush:php;toolbar:false;" lang="bash"></pre> 字体被中文字体覆盖，<img alt="logo"> 的替代文本仍被读作英文——浏览器和屏幕阅读器根本不继承根节点的 lang。

实操建议：

所有含文本的语义化标签（<h1></h1>、<p></p>、<section></section>、<footer></footer>）都加 lang，值与当前语言包一致
已有明确语言的元素（如 <pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">）切换语言时保留原 lang 值，这是合法混排，不是 bug
<title></title>、<meta name="description"> 这类文档级元信息不继承的 lang，必须单独更新
<script></script> 和 <style></style> 内部不要写 lang，它们不参与文本渲染，设了也白加

语言包必须 fetch + 校验，不能硬编码或内联 JSON

把语言包直接写进 JS 文件，会导致构建体积膨胀、无法按需加载、热更新困难；用 XMLHttpRequest 又容易忽略 HTTP 状态码和 MIME 类型，遇到 404 或服务器返回 text/plain 时静默失败，整页文案变空白。

实操建议：

路径统一为 ./locales/${lang}.json（如 ./locales/zh-HK.json、./locales/en-US.json）
必须用 fetch() + try/catch，内部检查 response.ok 和 response.headers.get('content-type')?.includes('application/json')
fallback 顺序：先试完整 BCP 47 码（zh-HK），再截主语言（zh），最后退到默认语言（en）
所有语言包键名必须严格一致，哪怕某语言暂未翻译，也要留空字符串，否则查不到 key 就留白