HTML国际化怎么建模？多语言对象工程化封装-html教程-PHP中文网

data-i18n 属性必须显式打满，js 不会自动推断任何内容；语言包需扁平键对齐且加载有 fallback；lang 属性须逐个同步；动态插入 dom 必须手动触发翻译。

html国际化怎么建模？多语言对象工程化封装

HTML 里没有“自动翻译”这回事。data-i18n 是唯一被识别的触发点，它只认这个属性，不看 class、不猜 id、不解析文本内容。漏标一个，那个节点就永远显示原始键名或空字符串。

<h2 data-i18n="page_title">首页</h2> ✅ 正确
<input placeholder="搜索"> ❌ 切换语言后 placeholder 还是“搜索”，必须加 data-i18n-placeholder="search_placeholder"
<img alt="用户头像"> ❌ alt 不会变，得写成 data-i18n-alt="avatar_desc"
<select data-i18n="country_select"><option>中国</option></select> ❌ option 文字没标，不会更新；正确写法是 <option data-i18n="country_china">中国</option>
<script>console.log("debug");</script> ❌ 不渲染为可见文本，加 data-i18n 毫无意义

JSON 文件结构决定健壮性。嵌套层级、键名不一致、缺失字段，都会导致查不到 key → 返回 undefined → 渲染为空白或原始键名，用户看到的是 header_title 而不是文字。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

每个语言一个文件：locales/zh-CN.json、locales/en-US.json，内容全是顶层键值对：{"login_btn": "登录", "form_email_required": "邮箱不能为空"}
所有语言文件键名必须完全一致；某语言暂未翻译，也要保留键："nav_help": "[未翻译]" 或 "nav_help": ""
fetch('./locales/' + lang + '.json') 必须用 try/catch 包住，捕获 TypeError: Failed to fetch 和 404；HTTP 状态非 2xx 时也需 fallback
fallback 顺序建议：先试完整 BCP 47 码（zh-HK），再截主语言（zh），最后退到硬编码默认对象（如 { login_btn: "Login" }）
服务端返回 JSON 时，响应头必须含 Content-Type: application/json，否则 response.json() 可能静默失败

只设 document.documentElement.lang = 'zh-CN'，对已渲染的子元素完全无效。屏幕阅读器、字体 fallback、标点间距、连字规则，全按每个元素自己的 lang 属性决定——不是继承来的。

页面初始化时，必须设 document.documentElement.lang = 'zh-CN'（注意：用 zh-CN，别用 zh_CN 或 chinese）
切换语言后，要遍历所有已有 lang 属性的元素（如 <p lang="ja">...</p>），判断是否需更新；明确要保留原语言的（如代码块、引文），则跳过
局部多语言内容必须显式声明：<code lang="bash">npm install、<p lang="en">This is English.</p>
<script></script> 和 <style></style> 内部不要写 lang，它们不参与文本渲染

AJAX 加载的弹窗、分页表格新行、懒加载模块，插入后不会自动识别 data-i18n。如果没调用翻译函数，那些属性只是字符串，文案根本不会变。

弹窗打开后，立即执行翻译逻辑：translateElements(modalElement.querySelectorAll('[data-i18n]'))
分页获取新 <tr> 后，在 <code>append() 完立刻遍历其内部 data-i18n 节点并替换
SVG 内嵌文本（如 <text data-i18n="download">下载</text>）需单独识别 SVGTextElement 类型，不能和普通 HTMLElement 混处理
表单控件的 option、label 的 for 属性不翻译，但文字必须标；input[type="submit"] 建议统一用 textContent 更新，避免 value 被意外提交

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！