利用HTML全局属性实现网页多语言切换-html教程-PHP中文网

data-i18n是唯一兼顾可访问性、seo与运行时切换的html原生方案；必须显式标记每个可翻译节点及对应属性（如data-i18n-placeholder），同步更新document.documentelement.lang和各元素lang值，并为动态dom手动触发翻译。

利用html全局属性实现网页多语言切换

data-i18n 属性是唯一能真正落地、不依赖框架又兼顾可访问性与 SEO 的 HTML 全局属性方案。其他所谓“全局属性切换”（比如只改 lang 或靠 class 控制显隐）在屏幕阅读器、字体回退、搜索引擎抓取上都会出问题。

为什么不能只靠 `lang` 属性切换语言

改 document.documentElement.lang 只是改了个字符串，DOM 已渲染完成，浏览器不会重解析文本节点的语言归属。屏幕阅读器仍按旧语音引擎朗读，Chrome 翻译按钮不激活，:lang(en) CSS 伪类也不重新匹配。

更关键的是：lang 是内容语言声明，不是翻译指令。它告诉浏览器“这段文字是什么语言”，而不是“把它翻成什么语言”。没配套的文案替换，用户看到的还是原始中文或英文。

必须同时做两件事：批量更新 textContent/placeholder 等属性 + 同步设置每个含语言信息的元素的 lang 值
lang 值必须符合 BCP 47 标准，zh-CN 可用，zh_CN 或 chinese 会被忽略
局部多语言内容（如 <p lang="en">API</p>）必须保留原 lang，不能被主语言覆盖

`data-i18n` 怎么打标才不漏、不崩

它不是自动识别机制，而是显式绑定协议：每个要翻译的节点都得手动加属性，JS 才能查到并替换。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

适用标签：只对承载可见文本的元素有效 —— <h1></h1>、<p></p>、<button></button>、<input>、<textarea></textarea>、<svg><text></text></svg> 等；<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre> 加了也无效
属性后缀必须明确：data-i18n 只管 textContent；data-i18n-placeholder 管 placeholder；data-i18n-title 管 title；data-i18n-alt 管 alt
键名必须全小写+英文点号或下划线分隔，如 form.submit 或 search_hint；禁用空格、中文、驼峰、连字符
IE11 不支持 element.dataset.i18n，得用 element.getAttribute('data-i18n') 兜底

JSON 语言包加载失败时页面直接变空白？

这是最常被忽视的致命点：fetch 失败、路径写错、MIME 类型不对、key 缺失，都会导致 textContent 被设为 undefined，最终显示为空白或原始键名（如 "header_title"）。

fetch 必须包在 try/catch 里，捕获 TypeError: Failed to fetch
成功响应后必须检查 response.ok === true 和 response.headers.get('Content-Type')?.includes('application/json')
fallback 不能只退到内置对象，得退到一个完整、扁平、键名对齐的备用 JSON 对象，例如：{ "header_title": "Welcome", "login_btn": "Login" }
语言包文件路径必须动态拼接：./i18n/${lang}.json，别硬写死成 ./zh.json

表单选项、动态提示、SVG 文本这些容易被跳过的场景

静态 HTML 里的 data-i18n 好处理，但以下三类必须单独编码逻辑，否则一换语言就露馅：

<select data-i18n="country"><option>中国</option></select> → 需遍历 select[data-i18n] option，查语言包中 "country.options" 数组逐个赋值
JS 动态弹出的 alert()、confirm()、Toast → 封装 t('common_error') 函数，内部查当前语言包，不能依赖 HTML 属性
<svg><text data-i18n="download">下载</text></svg> → JS 中需识别 SVGTextElement 类型，走特殊替换路径，否则 textContent 不生效

真正卡住人的从来不是“怎么切”，而是“切完之后，那些没被 data-i18n 标记、却实际需要翻译的地方——比如下拉框的 option、JS 弹窗、SVG 文本、甚至 title 属性——有没有被系统性覆盖”。漏掉任意一项，用户就会在某个角落突然看到中文混着英文，或者点击按钮后弹出未翻译的提示。